Furni360
Prenotate una demo

Integrate un configuratore 3D di mobili nella pagina prodotto

Il configuratore 3D di mobili funziona con qualsiasi CMS, piattaforma e-commerce o framework – ovunque una pagina possa mostrare un iframe. Nessun plugin né modifica al server; questa guida spiega integrazione e verifica.

  1. Ricevete un codice di accesso (token)

    Apriamo una licenza per il vostro catalogo e registriamo i domini su cui funzionerà il configuratore. Ricevete un token e i nomi dei modelli.

  2. Aggiungete l’iframe alla pagina

    Sostituite il token e il nome del modello. Un’altezza di almeno 600 px lascia spazio sufficiente sia al modello sia alla scelta dei materiali.

  3. Aprite la pagina e verificate

    Se il dominio è nella licenza, il configuratore si carica subito. Per i test sul vostro computer si può aggiungere alla licenza anche localhost.

Codice di integrazione
<iframe
  class="furni360"
  src="https://embed.furni360.com/embed?token=IL_VOSTRO_TOKEN&model=doha.glb&lang=it"
  title="Configuratore 3D"
  width="100%"
  height="640"
  style="border: 0"
  allow="fullscreen; xr-spatial-tracking"
  referrerpolicy="no-referrer-when-downgrade"
  loading="lazy">
</iframe>
<p class="furni360-credit">
  Configuratore 3D di <a href="https://furni360.com/it">Furni360</a>
</p>

Sostituite IL_VOSTRO_TOKEN e il nome del modello con i valori della vostra licenza. Il configuratore mostra la lingua del vostro sito; lang (sr, en…) la imposta esplicitamente e le lingue che non supportiamo vengono mostrate in inglese.

Regole da rispettare

  • Il dominio del sito deve essere nella licenza. Una voce come «vostrodominio.it» copre anche www.vostrodominio.it e gli altri sottodomini.
  • Non impostate referrerpolicy="no-referrer" sull’iframe o sulla pagina: il configuratore verifica la licenza in base all’indirizzo della pagina.
  • L’attributo allow="fullscreen" consente di visualizzare il modello e le foto a schermo intero.
  • Se il configuratore si trova più in basso nella pagina o in una finestra modale, loading="lazy" o il caricamento al clic fanno risparmiare banda.
  • Vi chiediamo di mantenere la riga con il link «Furni360» sotto il configuratore. Potete adattarne lo stile al vostro sito.

Funziona con qualsiasi CMS o framework

  • WordPress

    Nell’editor a blocchi aggiungete un blocco «HTML personalizzato» (Custom HTML) e incollate il codice.

  • WooCommerce

    Incollate il codice nella descrizione del prodotto (in modalità HTML) o aggiungetelo come scheda separata nella pagina prodotto.

  • Shopify

    Nell’editor del tema aggiungete una sezione «Custom Liquid» al modello della pagina prodotto e incollate il codice.

  • PrestaShop, Magento e Shopware

    Usate un blocco CMS o il campo HTML nella descrizione del prodotto. Verificate che l’editor non rimuova gli elementi iframe.

  • Wix, Squarespace e Webflow

    Aggiungete un elemento «Embed» o «Custom code» alla pagina prodotto e incollate il codice.

  • React, Next.js, Vue, Angular

    Usate lo stesso iframe in un componente. Per pagine con molti prodotti, passate token e modello tramite props.

  • Sito su misura

    PHP, .NET, Django, HTML statico o qualsiasi altra tecnologia: incollate l’iframe nel template della pagina prodotto.

  • Finestra modale

    Impostate src solo quando il cliente apre la finestra e rimuovetelo alla chiusura – come nel negozio demo ARVO.

Adattamento allo schermo

Sugli smartphone il configuratore rende al meglio quando occupa quasi tutto lo schermo. Questo CSS gli assegna tutta la larghezza e un’altezza che si adatta al dispositivo:

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

.furni360-credit {
  margin: 8px 0 0;
  font-size: 13px;
  text-align: right;
  opacity: 0.7;
}

Vi serve aiuto con l’integrazione?

Inviateci il link del vostro sito: vi aiuteremo a collocare il configuratore nel punto giusto e nella dimensione giusta.

Contatti

Mostrate ai clienti ogni combinazione.

Una breve presentazione online – 30 minuti, senza impegno. Non avete tempo per una chiamata? Inviateci il link del vostro sito e il numero di modelli: vi risponderemo via email con un preventivo indicativo.

  1. Vi rispondiamo proponendo un orario
  2. Presentazione e confronto sul vostro catalogo
  3. Preventivo in base al numero di modelli e materiali
Prenotate una demoinfo@furni360.com