Furni360
Zakažite prezentaciju

Kako se ugrađuje 3D konfigurator

Konfigurator je jedna stranica koju vaš sajt prikazuje kroz iframe – bez dodataka i izmena na serveru. Niste tehničko lice? Pošaljite link do ove stranice osobi koja održava vaš sajt ili nama pošaljite link do sajta.

  1. Dobijate pristupni kod (token)

    Za vaš katalog otvaramo licencu i upisujemo domene na kojima će konfigurator raditi. Dobijate token i nazive modela.

  2. Dodajte iframe na stranicu

    Zamenite token i naziv modela. Visina od najmanje 600 px daje dovoljno prostora i za model i za izbor materijala.

  3. Otvorite stranicu i proverite

    Ako je domen u licenci, konfigurator se odmah učitava. Za testiranje na računaru u licencu može da se doda i localhost.

Kod za ugradnju
<iframe
  class="furni360"
  src="https://embed.furni360.com/embed?token=VAS_TOKEN&model=doha.glb&lang=sr"
  title="3D konfigurator"
  width="100%"
  height="640"
  style="border: 0"
  allow="fullscreen; xr-spatial-tracking"
  referrerpolicy="no-referrer-when-downgrade"
  loading="lazy">
</iframe>

Zamenite VAS_TOKEN i naziv modela vrednostima iz licence. Konfigurator prikazuje jezik vašeg sajta; lang (sr, en…) ga zadaje izričito, a jezik koji ne podržavamo prikazuje se na engleskom.

Pravila koja treba ispoštovati

  • Domen sajta mora biti u licenci. Unos „vasdomen.rs“ pokriva i www.vasdomen.rs i ostale poddomene.
  • Ne postavljajte referrerpolicy="no-referrer" na iframe ili stranicu – konfigurator po adresi stranice proverava licencu.
  • Atribut allow="fullscreen" omogućava prikaz modela i fotografija preko celog ekrana.
  • Ako je konfigurator niže na stranici ili u modalnom prozoru, loading="lazy" ili učitavanje na klik štedi protok.

Uputstva za popularne platforme

  • WordPress

    U Gutenberg editoru dodajte blok „Prilagođeni HTML“ (Custom HTML) i nalepite kod.

  • WooCommerce

    Kod nalepite u opis proizvoda (u HTML režimu) ili ga dodajte kao poseban tab na stranici proizvoda.

  • Shopify

    U editoru teme dodajte sekciju „Custom Liquid“ na šablon proizvoda i nalepite kod.

  • PrestaShop i Magento

    Koristite CMS blok ili HTML polje u opisu proizvoda. Proverite da editor ne briše iframe elemente.

  • React / Next.js

    Koristite isti iframe u JSX-u. Za stranice sa više proizvoda token i model prosledite kroz props.

  • Modalni prozor

    Postavite src tek kada kupac otvori prozor, a pri zatvaranju ga uklonite – kao u demo prodavnici ARVO.

Prilagođavanje ekranu

Na telefonu je najbolje da konfigurator zauzme skoro ceo ekran. Ovaj CSS daje punu širinu i visinu prilagođenu uređaju:

styles.css
.furni360 {
  display: block;
  width: 100%;
  height: min(85svh, 760px);
  min-height: 560px;
  border-radius: 16px;
}

Treba vam pomoć pri ugradnji?

Pošaljite nam link do sajta – pomoći ćemo da konfigurator bude na pravom mestu i u pravoj veličini.

Kontakt

Pokažite kupcima svaku kombinaciju.

Kratka online prezentacija – 30 minuta, bez obaveze. Nemate vremena za poziv? Pošaljite nam link do sajta i broj modela – odgovaramo okvirnom ponudom emailom.

  1. Javljamo se sa predlogom termina
  2. Prezentacija i razgovor o vašem katalogu
  3. Ponuda prema broju modela i materijala
Zakažite prezentacijuinfo@furni360.com