Tutte le collezioni
Integrazioni
Integrazione e personalizzazione Booking Engine sul sito web
Integrazione e personalizzazione Booking Engine sul sito web

Istruzioni e consigli per attivare il modulo di prenotazione online e-commerce sul tuo sito web ufficiale.

Aggiornato oltre una settimana fa

Per attivare il Booking Engine sul tuo sito web della tua struttura hai 2 metodi possibili:

Mostriamo di seguito le differenze tra i due metodi:


Dal menu Altro > Configurazione, sezione Codice Booking Engine, trovi le sezioni dedicate alla generazione del codice da incorporare nel sito, oltre allo strumento di selezione dei colori:

Metodo 1: BOOKING ENGINE COME LINK ESTERNO AL TUO SITO WEB

💡 Nota: Questo è il metodo consigliato in quanto è semplice e veloce da integrare sul tuo sito web e garantisce sempre il corretto funzionamento del Booking Engine su computer, smartphone e tablet.

da Altro > Configurazione, nella sezione Codice Booking Engine, trovi il generatore del link specifico per la tua struttura dove poter impostare le opzioni e i colori.

Il link si presenta nel seguente formato:

https://booking.hotelincloud.com/show/...

Dovrai quindi far puntare il tuo sito web a questo link, ad esempio predisponendo un bottone "Prenota ora" ben visibile nella tua home page.

🌎 GESTIONE MULTILINGUA INTELLIGENTE

Il nostro Booking Engine è intelligente nel mostrare la corretta lingua al visitatore in quanto determina autonomamente la lingua impostata sul dispositivo sul quale è aperto il Booking Engine.

Esempio: un americano lo vedrà in inglese, un tedesco lo vedrà in tedesco, ...

Nel caso di un visitatore straniero per il quale non sia presente la traduzione il Booking Engine mostrerà la lingua inglese.

🛠 PERSONALIZZAZIONI

Per conoscere tutte le impostazioni avanzate consulta la sezione Personalizzazioni avanzate.


Metodo 2: BOOKING ENGINE INGLOBATO IN UNA PAGINA DEL TUO SITO WEB

💡 Nota: La resa estetica e funzionale di questo metodo dipende da come il tuo amministratore web integrerà il Booking Engine nel sito della tua struttura.

Nel caso in cui non si sia sicuri dell'operazione consigliamo di utilizzare il Metodo 1 (descritto sopra) che garantisce sempre la resa ottimale da tutti i dispositivi.

Per inglobare il nostro Booking Engine in una pagina del tuo sito web è necessario andare in Altro > Configurazione nella sezione Codice Booking Engine e copiare il codice "iframe" che andrà passato al proprio amministratore web per l'inclusione nel vostro sito web.

🛠 Impostazioni avanzate per web admin: Il codice iframe

Il codice iframe si presenta come un blocco di testo nel seguente formato:

<iframe id="ciao-be-iframe" style="display:block;height:800px;width:100%;overflow:auto;border:0;margin:0;padding:0;background:transparent;" src="https://booking.hotelincloud.com/show/<ID_STRUTTURA>?embedded=1&source=official-website#accommodations">Prenota dal sito ufficiale: <a href="https://booking.hotelincloud.com/show/<ID_STRUTTURA>?embedded=1&source=official-website&ref=iframe-error#accommodations"> NOME STRUTTURA </a></iframe>
  • Consigliamo di dedicare un'intera pagina al modulo di prenotazione e di impostare come altezza (height) del contenitore un valore adeguato che eviti il doppio scorrimento tra frame e pagina.

  • È possibile ridimensionare dinamicamente l'altezza del contenitore dell'iframe sfruttando il metodo window.postMessage() con il quale comunichiamo un JSON contenente l'altezza del frame.
    Documentazione: window.postMessage() su MDN Web Docs.
    Esempio messaggio JSON:

    { "height": 1234.567, "width": 255 }

    Questa comunicazione può essere ricevuta con un EventListener:

    window.addEventListener("message", (event) => { .... })

🌎 GESTIONE MULTILINGUA INTELLIGENTE

Il nostro Booking Engine è intelligente nel mostrare la corretta lingua al visitatore in quanto determina autonomamente la lingua impostata sul dispositivo sul quale è aperto il Booking Engine.

Esempio: un americano lo vedrà in inglese, un tedesco lo vedrà in tedesco, ...

Nel caso di un visitatore straniero per il quale non sia presente la traduzione il Booking Engine mostrerà sempre la lingua inglese.

🛠 PERSONALIZZAZIONI

Per conoscere tutte le impostazioni avanzate consulta la sezione Personalizzazioni avanzate.


PERSONALIZZAZIONI AVANZATE (valide per entrambi i metodi 1 e 2)

🎨 Colori

Dal menu Altro > Configurazione, nella sezione Brand e colori, è possibile personalizzare i colori (sfondo, pulsanti e barra di ricerca).


👨‍💻 Impostazioni avanzate per web admin: Esclusione tipologie non prenotabili da Booking Engine

Dal menu Altro > Configurazione, nella sezione Codice Booking Engine, è possibile escludere alcune tipologie di alloggi presenti sul gestionale dalla loro visualizzazione sul Booking Engine ottenendo ottenendo il nuovo codice da utilizzare sul proprio sito web.

Attenzione: I parametri &embedded e &source NON devono essere modificati.


👨‍💻 Impostazioni avanzate per web admin: passaggio parametri

Il link del Booking Engine permette il passaggio di parametri dei dati di richiesta prenotazione.

In questo modo è data la possibilità agli amministratori del vostro sto web di creare una maschera di prenotazione sul vostro sito così come mostrato nella seguente figura:

Parametri:

  • &checkin= data check-in nel formato aaaa-mm-gg

  • &checkout= data check-out nel formato aaaa-mm-gg

  • &adults= numero adulti

  • &children= numero bambini

Esempio di url con parametri:

https://booking.hotelincloud.com/show/ID_TUA_STRUTTURA?&checkin=2021-08-20&checkout=2021-08-30&adults=2&children=2

Al posto di ID_TUA_STRUTTURA va messo il numero identificativo della tua struttura (es: 12345) che puoi trovare in pagina Altro > Configurazione in basso a sinistra:

Nota: In caso di frame incluso all'interno del sito ufficiale, è possibile aggiungere il parametro &embedded=1 per nascondere la testata e il piè di pagina del BE.


👨‍💻 Impostazioni avanzate per web admin: Lingua forzata

Di default il booking engine riconosce automaticamente la lingua impostata sul dispositivo dell'utente, ma se vuoi forzarla, ad esempio per mantenerla coerente a quella impostata sul sito principale, puoi selezionare la lingua desiderata da Altro > Configurazione, sezione Codice Booking Engine ottenendo il nuovo codice da utilizzare sul sito web.

In pratica viene personalizzato l'url aggiungendo il codice della lingua prima di /show/. Esempio: https://booking.hotelincloud.com/en/show/...

Le lingue impostabili in modo forzato possono essere:

  • /it/ = italiano

  • /en/ = inglese

  • /de/ = tedesco

  • /es/ = spagnolo

  • /fr/ = francese

Per altre lingue contatta l'assistenza.


👨‍💻 Impostazioni avanzate per web admin: tracciamento con Google Analytics (e altri sistemi)

Se utilizzi Google Analytics, puoi impostare il tuo codice di tracciamento all'interno del Booking Engine.

L'integrazione ti permetterà di ricevere su Google Analytics non solo le statistiche delle visite, ma anche le conversioni delle prenotazioni ricevute, riportate come "transazioni" nel Monitoraggio e-commerce.

Per configurare il tracciamento con Google Analytics leggi la guida dedicata:

Hai ricevuto la risposta alla tua domanda?