Come inserire un virtual tour nel sito, passo per passo

Ecco come inserire un virtual tour nel sito della tua agenzia: copia il codice del tour, incollalo in un blocco HTML nella pagina dell'immobile, sistema le misure e provalo sullo smartphone prima di pubblicare. Lo stesso metodo vale per una sola foto 360, per esempio il terrazzo di un trilocale a Bologna.

In questa guida trovi i passaggi per WordPress, Wix e Squarespace, un codice spiegato riga per riga da copiare e una lista di controlli da fare sul telefono.

Cosa ti serve prima di iniziare

Quattro cose, che il tour l'abbia fatto tu o te l'abbia consegnato un fotografo:

• Il codice di incorporamento, non solo il link. Il codice comincia con <iframe. Un link apre il tour nella sua pagina; il codice lo mostra dentro la tua, tra le foto e la descrizione.
• Un tour pubblico. Un tour privato mostra «Questo tour è privato» nella cornice, e chi visita la pagina non vede altro.
• Il permesso di modificare la pagina. Su WordPress serve un account che possa aggiungere codice (vedi sotto). Altrimenti manda il codice via email a chi gestisce il sito dell'agenzia.
• Per una sola foto 360, crea un tour di una sola stanza. Prima puoi guardarla nel nostro visualizzatore di foto 360 gratuito per controllare che sia dritta e nitida.

Se sei agli inizi con i tour, la nostra guida al virtual tour immobiliare spiega cosa aggiunge a un annuncio.

Passo 1: copia il codice di incorporamento

Quasi tutti i programmi per tour tengono il codice sotto un pulsante Condividi, Incorpora o Pubblica. Cerca un riquadro di testo che inizia con <iframe e un pulsante per copiarlo. Copia tutto, da <iframe fino a </iframe>: basta un carattere in meno e la cornice resta vuota.

In Vistura il codice è in Condividi > «Incorpora in un sito web» > «Copia codice», su tutti i piani, con l'indicazione «Incolla questo codice nella pagina dell'immobile sul tuo sito web.» Il codice occupa già tutta la larghezza della pagina e porta il nome del tour come titolo, così anche i lettori di schermo sanno cosa contiene.

Passo 2: incolla il codice nel tuo sito

Ogni strumento per creare siti ha il suo blocco per il codice, e ognuno ha il suo intoppo.

WordPress (la tua installazione)

1. Apri la pagina dell'immobile e mettiti nel punto giusto.
2. Aggiungi il blocco Custom HTML dall'inseritore dei blocchi, oppure scrivi /html in un nuovo paragrafo.
3. Clicca su Edit HTML, incolla il codice e salva la pagina (Update, nella documentazione).

L'intoppo sta nei permessi. La documentazione di WordPress (in inglese) spiega che se un utente non ha il permesso unfiltered_html, per esempio un Collaboratore (Contributor), WordPress ripulisce il blocco e toglie tag come <iframe> al salvataggio. Il codice sparisce senza avvisi. Chiedi a un Amministratore di incollarlo, o di darti quel permesso.

WordPress.com

Su WordPress.com gli iframe sono ammessi solo sui siti con un piano che accetta i plugin e le funzioni di hosting attivate. I siti gratuiti hanno limiti sul codice che si può aggiungere, e prima dell'attivazione valgono gli stessi limiti. Controlla il piano prima di cercare un errore nel codice.

Wix

1. Nell'editor apri Aggiungi elementi > Codice di incorporamento > Incorporamenti popolari > Incorpora HTML.
2. Clicca sull'elemento, inserisci il codice e applica.
3. Allarga l'elemento nell'editor fino alla misura che vuoi.

Wix avverte: «Vengono mostrati solo i codici HTTPS e gli URL.» L'elemento di Wix è a sua volta una cornice, quindi il tour non si adatta da solo allo schermo: nel codice metti larghezza e altezza al 100%, poi regola le misure dell'elemento. Controlla anche la vista mobile nell'editor di Wix.

Squarespace

La pagina di aiuto di Squarespace è in inglese; i nomi qui sotto sono i suoi.

1. Clicca su Add block, poi su Code.
2. Incolla il codice nel blocco. Lascia spento Display Source: serve a mostrare il codice come testo.
3. Salva e guarda il risultato in Safe Mode.

Per aggiungere un iframe in un blocco Code il sito deve avere il piano Core, Plus o Advanced. Il codice può anche non comparire finché sei collegato: Squarespace consiglia l'anteprima in Safe Mode. E avverte che il codice personalizzato può rovinare l'aspetto del sito, soprattutto sui dispositivi mobili.

Un sito che arriva dal tuo gestionale

Molte agenzie pubblicano il sito direttamente dal gestionale immobiliare, ed è qui che il tour si perde più spesso. Nella scheda dell'immobile cerca un campo o un blocco che si chiama HTML, Codice, Incorpora o Widget. Se non c'è, chiedi al fornitore dove va un iframe: alcuni hanno un campo apposta per il tour, altri inseriscono il codice per te. Chiedi anche se il campo accetta il codice intero o solo il link, perché la risposta cambia cosa devi incollare.

Passo 3: adatta la cornice a ogni schermo

Un codice di incorporamento è una riga di istruzioni. Ecco cosa fa ogni parte, secondo la guida di MDN sull'iframe:

Carica il tour solo quando serve

Se il tour sta sotto le foto, aggiungi loading="lazy". Il browser aspetta che chi legge arrivi vicino alla cornice prima di caricarla. Secondo web.dev questo caricamento differito è ben supportato dai principali browser, fa risparmiare dati, velocizza il resto della pagina e riduce la memoria usata.

Tieni la stessa forma su ogni schermo

Un'altezza fissa di 500 pixel diventa una striscia sottile sul computer e un muro sul telefono. La proprietà CSS aspect-ratio mantiene il rapporto tra larghezza e altezza al variare dello schermo, e funziona nei browser più diffusi da settembre 2021. Ecco un esempio da adattare con l'indirizzo del tuo tour:

<iframe src="https://INDIRIZZO-DEL-TUO-TOUR" title="Trilocale a Bologna, tour 360"
  width="100%" loading="lazy" allow="fullscreen"
  style="border:0; aspect-ratio:4/3; max-height:80vh"></iframe>

Tre impostazioni fanno il lavoro:

• aspect-ratio:4/3 dà una cornice abbastanza alta sul telefono. Un 16/9 molto largo lascia una fascia stretta dove la stanza si vede male.
• max-height:80vh tiene la cornice più bassa dello schermo del telefono, così resta sempre un po' di pagina intorno per scorrere.
• border:0 prende il posto del vecchio frameborder.

La pagina di MDN non parla di iframe: prova il risultato su un telefono vero prima di pubblicare.

Dove mettere il tour nella pagina dell'immobile

1. In alto, dopo la galleria di foto, prima della descrizione lunga. È lì che chi cerca casa decide se continuare.
2. Tieni il testo nella pagina. Prezzo, metri quadri, locali, classe energetica e descrizione restano scritti nella tua pagina: il tour dentro la cornice vive a un altro indirizzo.
3. Sotto la cornice, un link semplice «Apri il tour 360 a schermo intero» verso l'indirizzo del tour. Sul telefono questo link permette di vederlo su tutto lo schermo.
4. Un tour per pagina. Più cornici pesanti nella stessa pagina la rallentano.

Passo 4: provalo sul telefono prima di pubblicare

Apri la pagina sul tuo telefono e fai questi sei controlli:

• Scorri la pagina con un pollice. Se ogni passaggio fa girare la stanza invece di scendere, abbassa la cornice.
• Trascina il dito dentro la cornice. La stanza deve girare.
• Tocca il link sotto la cornice. Il tour deve aprirsi nella sua pagina.
• Guarda la pagina da scollegato, o in una finestra di navigazione in incognito. Squarespace a volte nasconde il codice a chi ha fatto l'accesso.
• Carica la pagina con i dati mobili, non solo con il Wi-Fi dell'agenzia.
• Se la cornice è vuota, controlla in quest'ordine: HTTPS (Wix), il piano (WordPress.com, Squarespace), i permessi dell'account (WordPress), poi il tour, che forse è privato.

Sito, portali ed email: tre lavori diversi

• Il tuo sito prende il codice di incorporamento.
• I portali come Immobiliare.it e Idealista hanno ciascuno le proprie regole per i virtual tour. Incolla il link nel campo per il tour virtuale, dove il portale ne ha uno, e segui le sue istruzioni. In Vistura, «Link per i portali» dà un link per ogni portale, con l'opzione «Senza i miei contatti né il mio logo», e le visite di ogni portale compaiono a parte (la vista Per portale è di Pro).
• Email e messaggi: manda un'immagine del tour con il link, non il codice.

Per la vetrina e il cartello lo stesso link diventa un QR code: leggi la nostra guida al QR code sul cartello vendesi.

Scopri se il tour funziona sul tuo sito

Un tour di Vistura incorporato nel sito tiene nella cornice la scheda agente, WhatsApp e il modulo, e ogni contatto arriva completo, su tutti i piani. Le visite dal tuo sito si contano come una provenienza a parte, «Il tuo sito web (incorporato)». Il dettaglio per provenienza si vede con Pro ed è conservato dal primo giorno: passando a Pro trovi tutto lo storico. Con Pro il tour porta anche il tuo logo e i tuoi colori, senza il badge «Creato con Vistura», e «Attiva la rotazione automatica nei nuovi tour» fa ruotare la foto da sola quando il visitatore smette di muoversi, ideale per una pagina lasciata aperta sullo schermo in vetrina. Pro costa 24 dollari USA al mese, o 19 con l'annuale, al prezzo fondatore per gli abbonamenti attivati fino al 31 dicembre 2026. Puoi provarlo con il piano Gratuito, con 3 tour online alla volta e il marchio Vistura. Confronta i piani nella pagina dei prezzi.

Se il tour non si vede

Domande frequenti

Posso inserire un virtual tour in un sito Wix gratuito?

La guida di Wix su Incorpora HTML non indica nessun piano, chiede solo un codice in HTTPS. I limiti di piano stanno altrove: WordPress.com chiede un piano con i plugin, Squarespace il piano Core, Plus o Advanced.

Il tour rallenta la pagina dell'immobile?

Molto meno se aggiungi loading="lazy" al codice: il browser carica il tour solo quando chi legge si avvicina, e il resto della pagina si apre prima.

Posso incollare il codice su Immobiliare.it?

Ogni portale ha le sue regole per i virtual tour. Controlla le sue istruzioni per sapere se prevede un campo per il tour e quali tour mostra.

Serve un nuovo codice se modifico il tour?

No, se il codice punta al tour e non a una sua copia. Con Vistura le modifiche compaiono sul sito senza toccare il codice.