Come inserire un tour virtuale nel tuo sito web (codice incluso)

Un tour virtuale vende di più sul tuo sito che come un link che le persone potrebbero non aprire mai. Incorporarlo significa che i visitatori possono guardarsi intorno nell'immobile senza lasciare la tua pagina. Basta un copia e incolla, a patto di usare il codice giusto.

Il codice di incorporamento

Qualsiasi tour che si può incorporare ti dà un <iframe>. Questa è la versione che consigliamo, già responsive (occupa tutta la larghezza e mantiene una forma 16:9):

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe src="https://roomtourapp.com/embed/il-tuo-tour"
    title="Tour virtuale a 360°"
    allow="fullscreen; gyroscope; accelerometer; magnetometer; xr-spatial-tracking"
    allowfullscreen loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

Cosa fa ogni parte:

aspect-ratio:16/9 sul riquadro mantiene la forma del tour su qualsiasi schermo. Senza, molti temi schiacciano l'iframe a 150 pixel di altezza.
allow="…gyroscope; accelerometer…" permette ai visitatori di guardarsi intorno muovendo il telefono. Senza, il browser blocca i sensori dentro l'iframe.
allowfullscreen fa funzionare il pulsante per lo schermo intero.
loading="lazy" fa sì che il tour si carichi solo quando il visitatore scorre fino a lì, così la tua pagina resta veloce.
title viene letto dagli screen reader. Descrivi l'immobile.

Con RoomTour non devi scriverlo: la pagina del tour nella dashboard web ha il codice pronto da copiare, con l'indirizzo del tuo tour.

Dove incollarlo

WordPress (editor a blocchi): aggiungi un blocco HTML personalizzato e incolla il codice. Nell'editor classico, passa prima alla scheda Testo.
Wix: Aggiungi → Incorpora codice → Incorpora HTML, incolla il codice e allarga il riquadro fino alla larghezza della sezione.
Squarespace: aggiungi un blocco Codice e incolla il codice.
Webflow: trascina un elemento Embed nella pagina e incolla il codice.
HTML semplice: incollalo dove deve comparire il tour.

Portali immobiliari

I portali non ti permettono di incollare codice di incorporamento: hanno un campo per il link del tour virtuale. Lì usa il link breve del tour, non il codice embed. La nostra guida passo passo spiega come fare un tour virtuale con il telefono, dall'acquisizione alla pubblicazione.

Problemi comuni

Il tour si vede come una striscia sottile. Il tema ignora l'altezza dell'iframe. Usa il contenitore con aspect-ratio qui sopra.
Guardarsi intorno muovendo il telefono non funziona. Manca l'attributo allow o il tuo costruttore di siti lo elimina. Incolla il codice completo.
La pagina è lenta. Controlla che loading="lazy" sia ancora presente e che ci sia un solo tour per pagina.
Due loghi. Se il tuo sito porta già il tuo marchio, usa la modalità embed del tour, che nasconde il logo del fornitore del tour. Gli indirizzi /embed/ di RoomTour fanno proprio questo.

Domande frequenti

Come inserisco un tour virtuale nel mio sito web?

Copia il codice di incorporamento del tour (un iframe) dal tuo fornitore di tour e incollalo in un blocco HTML o embed della pagina. Usa un contenitore responsive perché mantenga la sua forma sui telefoni.

Com'è fatto il codice embed di un tour virtuale?

È un iframe che punta al tour, con i permessi per lo schermo intero e per i sensori di movimento del telefono, così chi visita può guardarsi intorno muovendo il telefono. La versione responsive lo avvolge in un riquadro con proporzioni fisse.

Un tour incorporato rallenta il mio sito?

No, se si carica in modo differito: con loading="lazy" il tour inizia a caricarsi solo quando il visitatore scorre fino a lì. Evita di mettere più tour nella stessa pagina.

Posso incorporare un tour virtuale su un portale immobiliare?

Di solito i portali non accettano codice di incorporamento. Hanno invece un campo per il link del tour virtuale: incolla lì il link del tour.