Come integrare un tour virtuale sul tuo sito: guida completa 2026

Se hai già creato un tour in Tours e vuoi integrarlo nel tuo sito, non devi scrivere codice da zero. Dopo la pubblicazione, accedi a I miei tour, scegli il tour desiderato, apri il menu a tre punti e clicca su Integrazione. Da lì scegli la variante adatta al tuo sito — HTML, React, Angular, WordPress o Wix — e copi il codice generato.

Nella stessa finestra puoi attivare o disattivare l'integrazione e decidere su quali domini il tour può essere visualizzato. In pratica, hai il controllo su dove viene mostrato il tour, senza dover rientrare nell'editor e senza modificare il contenuto del tour.

Per il visitatore il risultato è semplice: la visita virtuale si apre direttamente nella tua pagina. Non lo rimandi su un altro sito, non lo porti fuori dalla pagina di presentazione e non lo costringi a cercare separatamente la galleria. Può esplorare le camere, i tavoli, l'appartamento, lo showroom o lo spazio eventi esattamente dove hai la descrizione, l'offerta, il form di contatto o il pulsante di prenotazione.

In breve

• Un tour virtuale integrato sul sito appare direttamente nella tua pagina, non come link separato verso un'altra piattaforma.
• In Tours, il codice si trova in I miei tour, dopo che il tour è stato pubblicato.
• I passaggi sono: I miei tour → menu a tre punti → Integrazione → scegli la piattaforma → copia il codice.
• Nella finestra di integrazione puoi attivare o disattivare la visualizzazione del tour su siti esterni.
• Puoi impostare i domini su cui il tour può apparire, per evitare che venga copiato ovunque.
• Sono disponibili varianti di codice per HTML, React, Angular, WordPress e Wix.
• Se modifichi il tour nell'editor, la versione integrata sul sito si aggiorna automaticamente.
• Il tour integrato può includere scene 360°, punti interattivi, prenotazioni e statistiche di utilizzo.

Cosa significa integrare un tour virtuale sul sito?

Integrare un tour virtuale sul sito significa che il visitatore può esplorare uno spazio a 360° direttamente nella tua pagina. Non vede solo una foto grande e non viene rimandato a una galleria esterna. Può ruotare l'immagine, passare da una stanza all'altra, toccare i punti interattivi e scoprire dettagli che le fotografie tradizionali non mostrano con la stessa chiarezza.

Per un hotel, questo può significare una presentazione più convincente delle camere. Per un ristorante, può significare che le persone vedono l'atmosfera e la sala prima di prenotare. Per il settore immobiliare, può ridurre le domande inutili, perché il visitatore capisce meglio la distribuzione degli spazi e le dimensioni prima di richiedere una visita.

Dal punto di vista tecnico, l'integrazione avviene tramite un codice generato dalla piattaforma. Lo copi da Tours e lo incolli nel tuo sito. Su WordPress o Wix lo inserisci in un elemento HTML. Su un sito realizzato su misura lo metti nel codice della pagina. Per progetti React o Angular usi la variante dedicata a quella tecnologia.

Il vantaggio principale è che mantieni il visitatore nello stesso contesto. Il tour può essere affiancato alla descrizione della camera, al modulo di contatto, ai prezzi o al pulsante di prenotazione. Questo rende l'esperienza più fluida e più facile da usare.

Come ottenere il codice di integrazione in Tours?

In Tours, il codice di integrazione viene generato automaticamente. Non devi costruirlo manualmente e non devi cercare impostazioni nascoste nell'applicazione. Dopo che il tour è stato pubblicato, lo trovi nell'elenco dei tuoi tour e apri l'integrazione direttamente da lì.

• Accedi al tuo account Tours.
• Apri la pagina I miei tour.
• Trova il tour pubblicato che vuoi mostrare sul sito.
• Premi sul menu a tre punti accanto al tour.
• Scegli l'opzione di integrazione.
• Verifica che l'integrazione sia attiva.
• Aggiungi o modifica i domini consentiti.
• Scegli la variante di codice per HTML, React, Angular, WordPress o Wix.
• Copia il codice visualizzato e incollalo nella pagina desiderata del tuo sito.

Ogni tour ha le proprie impostazioni di integrazione. Questo è importante soprattutto quando gestisci più sedi, più proprietà o più pagine di presentazione. Puoi avere un tour per la reception, uno per le camere, uno per il ristorante e un altro per una sala eventi, ciascuno con il proprio codice e i propri domini consentiti.

Cosa puoi impostare nella finestra di integrazione?

La finestra di integrazione non è solo il posto da cui copiare il codice. È anche l'area in cui controlli come viene utilizzato il tour su siti esterni. Da qui puoi disattivare l'integrazione, consentire solo determinati domini e scegliere il codice adatto alla piattaforma che usi.

• Attivazione o disattivazione: puoi interrompere la visualizzazione del tour su siti esterni senza eliminare il tour dall'account.
• Domini consentiti: scegli su quali siti può apparire il tour, ad esempio il dominio dell'hotel, del ristorante o dell'agenzia immobiliare.
• Scelta della piattaforma: puoi selezionare HTML, React, Angular, WordPress o Wix.
• Codice pronto da copiare: dopo aver scelto la piattaforma, il codice corretto appare sotto il selettore.
• Impostazioni separate per tour: ogni tour pubblicato può avere le proprie regole di integrazione.

L'elenco dei domini consentiti è utile per il controllo. Ad esempio, se hai creato un tour per il sito ufficiale di un hotel, puoi consentire la visualizzazione solo su quel dominio. Se qualcuno copia il codice e prova a inserirlo su un altro sito, l'integrazione può essere bloccata.

Quale variante scegliere: HTML, React, Angular, WordPress o Wix?

Non tutti i siti sono costruiti allo stesso modo, per questo Tours offre più varianti di codice. L'idea è che non devi adattare manualmente l'integrazione: scegli la variante adatta e copi il codice generato.

Se non sai quale variante scegliere, la regola è semplice: WordPress per WordPress, Wix per Wix, React per React o Next.js, Angular per Angular e HTML per qualsiasi altro sito che accetta codice personalizzato.

Integrazione del tour virtuale su WordPress

Su WordPress, l'integrazione è piuttosto semplice. Scegli la variante WordPress da Tours, copi il codice e lo inserisci nella pagina dove vuoi che appaia il tour. Non hai bisogno di un plugin specifico per i tour virtuali, purché il tema o l'editor ti permetta di aggiungere HTML personalizzato.

• In Gutenberg, aggiungi un blocco HTML personalizzato e incolla il codice.
• In Elementor, usa l'elemento HTML e inserisci il codice nella sezione desiderata.
• In Divi, usa il modulo di codice.
• In WPBakery, puoi usare un elemento per HTML grezzo o codice personalizzato.
• Nell'editor classico, passa alla visualizzazione Testo / HTML e inserisci il codice dove ti serve.

Vale la pena prestare attenzione anche allo spazio in cui inserisci il tour. Se lo comprimi in una sezione troppo piccola, l'esperienza non risulta piacevole. Su desktop, un'altezza di circa 600px è di solito un buon punto di partenza, mentre su mobile è bene verificare la pagina prima di pubblicarla.

Integrazione del tour virtuale su Wix

Su Wix, scegli la variante Wix da Tours e copi il codice generato. Poi accedi all'editor Wix e aggiungi un elemento di integrazione HTML nell'area della pagina dove vuoi che appaia il tour.

• Apri la pagina desiderata nell'editor Wix.
• Aggiungi un nuovo elemento dal menu +.
• Scegli l'area per l'integrazione o il codice personalizzato.
• Seleziona l'elemento HTML.
• Incolla il codice generato da Tours per Wix.
• Regola larghezza e altezza per desktop e mobile.
• Pubblica la pagina e testa il tour sul sito live.

Se il tour appare tagliato su Wix, nella maggior parte dei casi il problema riguarda le dimensioni dell'elemento HTML, non il codice di Tours. Ingrandisci l'area in cui hai inserito il tour, controlla la versione mobile e assicurati di aver pubblicato l'ultima versione della pagina.

Integrazione su React, Angular, Webflow, Squarespace o HTML

Se il tuo sito non è su WordPress o Wix, scegli la variante più adatta al progetto. Per un sito realizzato da zero, la variante HTML è di solito sufficiente. Per applicazioni moderne, puoi usare il codice per React o Angular.

• React / Next.js: usa il codice per React e inseriscilo nel componente in cui vuoi che appaia il tour.
• Angular: usa il codice per Angular nel template del componente appropriato.
• Webflow: aggiungi un elemento di integrazione e incolla il codice HTML di Tours.
• Squarespace: aggiungi un blocco di codice e incolla la variante HTML.
• Shopify: inserisci il codice in una sezione HTML personalizzata o in un template di pagina, in base al tema utilizzato.
• HTML puro: inserisci il codice direttamente nel punto in cui vuoi che il tour venga caricato.

Se la tua piattaforma non consente codice personalizzato, puoi usare il link pubblico del tour o il codice QR generato da Tours. Tuttavia, quando è possibile, l'integrazione diretta è la soluzione migliore per le pagine commerciali, perché il visitatore rimane vicino all'offerta, al modulo o al pulsante di prenotazione.

Come creare il tour prima di integrarlo?

Prima di arrivare al codice di integrazione, devi avere un tour pubblicato. In Tours, la creazione del tour avviene in modo visivo: carichi le scene 360°, le organizzi e aggiungi i punti interattivi di cui hai bisogno.

• Crei un account su getours.app e accedi all'applicazione Tours.
• Apri I miei tour e premi il pulsante per creare un nuovo tour.
• Compila il nome del tour e la categoria; facoltativamente puoi aggiungere posizione, prezzo o tag.
• Carica la prima scena 360° e assegnale un nome chiaro.
• Nell'editor, aggiungi scene aggiuntive, punti di navigazione, informazioni, immagini, video, link esterni e gruppi di scene.
• Se vuoi collegare alcuni punti alle prenotazioni, puoi organizzarli con tag interni.
• Pubblica il tour e scegli la visibilità appropriata.
• Dopo la pubblicazione, torna in I miei tour, apri il menu a tre punti e scegli integrazione.

In sintesi, l'editor è il posto dove costruisci l'esperienza 360°, mentre la finestra di integrazione è il posto da cui metti il tour sul sito e controlli dove può essere visualizzato.

Puoi avere prenotazioni nel tour integrato?

Sì. Se hai configurato le prenotazioni in Tours, funzionano anche nel tour integrato sul sito. Il visitatore può esplorare lo spazio e inviare una prenotazione o una richiesta senza essere spostato su un'altra pagina.

• Prenotazione a livello di tour: puoi mostrare un pulsante di prenotazione disponibile per tutta la durata del tour.
• Prenotazione a livello di scena: puoi attivare la prenotazione solo in determinate stanze o aree.
• Prenotazione a livello di gruppo: puoi raggruppare più scene, utile per tipologie di camere, appartamenti o spazi diversi.
• Prenotazione tramite punto interattivo: un punto nel tour può aprire la finestra di prenotazione per un tavolo, una camera, uno spazio o una visita.
• Prenotazioni per tag: più punti interattivi possono condividere lo stesso calendario se collegati tramite lo stesso tag.

Le prenotazioni si configurano separatamente, nel Booking Manager. Lì imposti la disponibilità, le regole di capacità, l'approvazione manuale o automatica e le persone che gestiscono le richieste. Dopodiché colleghi il manager al tour, a determinate scene, a gruppi di scene o a punti interattivi.

Se usi già un PMS, un channel manager o altre piattaforme di prenotazione, Tours può funzionare come canale visivo aggiuntivo. Nei casi in cui la disponibilità è gestita in più posti, l'approvazione manuale ti aiuta a evitare sovrapposizioni.

Cosa vede il visitatore nel tour integrato?

Il visitatore vede esattamente l'esperienza che hai costruito nell'editor di Tours. Non è solo un'immagine panoramica inserita nella pagina, ma una visita virtuale interattiva che può includere navigazione, informazioni, link, prenotazioni e statistiche in background.

• Scene 360° che il visitatore può ruotare in tutte le direzioni.
• Navigazione tra stanze o aree tramite punti interattivi.
• Punti informativi con testo, immagini o video.
• Link esterni verso menu, cataloghi, pagine di prodotto o moduli.
• Pulsante di prenotazione o punti interattivi che aprono la finestra di prenotazione.
• Contenuto in più lingue, se configurato nel tour.
• Statistiche sulle visite, sulle scene visitate e sulle interazioni.

Perché il tour non appare sul sito?

Se hai inserito il codice sul sito ma il tour non appare, non significa necessariamente che l'integrazione sia rotta. Nella maggior parte dei casi manca un'impostazione oppure il codice è stato inserito in un punto che non lo visualizza correttamente.

• Verifica che il tour sia pubblicato. Un tour non pubblicato non apparirà correttamente sul sito.
• Verifica che l'integrazione sia attiva in I miei tour → menu a tre punti → integrazione.
• Controlla i domini consentiti. Il dominio del tuo sito deve essere nell'elenco accettato.
• Assicurati di aver scelto la variante di codice corretta: WordPress per WordPress, Wix per Wix, React per React, Angular per Angular e HTML per tutti gli altri casi.
• Se usi Wix o un costruttore visivo, aumenta l'altezza dell'elemento in cui hai inserito il tour.
• Verifica che la tua piattaforma consenta codice HTML o codice esterno. Alcuni piani gratuiti possono avere limitazioni.
• Pubblica la pagina dopo aver incollato il codice. A volte il tour appare nell'anteprima ma non sul sito live se le modifiche non sono state pubblicate.

Il test più rapido è tornare nella finestra di integrazione, verificare che l'integrazione sia attiva, che il dominio sia consentito e che il codice scelto corrisponda alla tua piattaforma. In molti casi il problema si risolve senza modificare nulla nel tour.

Confronto con altre piattaforme di tour virtuali

Molte piattaforme di tour virtuali offrono una forma di integrazione sul sito. La differenza emerge quando vuoi qualcosa in più della semplice visualizzazione del tour: controllo sui domini, prenotazioni, statistiche di utilizzo, contenuto multilingue o varianti di codice per tecnologie diverse.

Per Tours, l'obiettivo non è solo inserire una panoramica sul sito, ma trasformare il tour in una parte utile della tua pagina: presentazione, interazione, prenotazione, richiesta di preventivo o analisi dell'interesse dei visitatori.

Se vuoi testare l'integrazione, puoi iniziare con un tour semplice. Crei l'account, pubblichi il primo tour, accedi a I miei tour, apri l'integrazione e copi il codice per la tua piattaforma. In pochi minuti puoi avere una visita virtuale 360° visualizzata direttamente sul sito, con punti interattivi, prenotazioni e statistiche di utilizzo pronti per l'uso reale.