Guida per agenzie web

Il Booking Engine di Vezpa nel sito di un cliente: il codice e come incollarlo

Indice

Il codice Gli attributi I siti autorizzati Dove incollarlo Se il Booking Engine non compare Sicurezza e privacy

Il codiceDue righe, da incollare dove deve comparire

Il gestore della struttura genera il codice nell'app Vezpa e te lo manda. Ha questa forma:

<div data-vezpa-be="hotel-rosa" data-modo="iframe" data-lingua="auto"></div>
<script src="https://vezpa.it/be/embed.js" async></script>

Il <div> va nel punto della pagina in cui il Booking Engine deve comparire; lo script basta una volta per pagina, anche con più segnaposto (incollato due volte non fa danni). Lo script è servito da vezpa.it con un'ora di cache: le correzioni arrivano da sole, senza toccare il sito.

Gli attributiChe cosa regola ogni data-

Attributo	Valori	Effetto
`data-vezpa-be`	nome della struttura (obbligatorio)	quale Booking Engine
`data-modo`	`iframe` (predefinito), `pulsante`, `angolo`	riquadro nella pagina, pulsante nel punto del segnaposto, pulsante fisso in basso a destra (uno per pagina)
`data-lingua`	`auto` (predefinito) o un codice come `de`	`auto` legge `<html lang>` della pagina; se il Booking Engine non parla quella lingua usa la sua predefinita
`data-camera`	identificativo numerico della sistemazione (lo scrive l'app)	mostra una sola sistemazione
`data-spa`	`si` / `no`	`no` nasconde la sezione SPA e negozio
`data-testo`	testo, al massimo 60 caratteri	testo del pulsante; vuoto = «Prenota» nella lingua dell'ospite
`data-origine`	URL https	scritto dall'app solo se la struttura ha un dominio personalizzato per il Booking Engine

Un attributo sconosciuto o sbagliato non rompe la pagina: lo script lo ignora e lo scrive nella console del browser con il prefisso [Vezpa BE]. Nelle pagine che aggiungono il segnaposto dopo il caricamento (siti a pagina unica) chiama window.VezpaBE.scansiona().

Se il gestore attiva, cambia o disattiva il dominio personalizzato del Booking Engine, il codice va ricopiato dall'app e incollato di nuovo: cambia data-origine.

I siti autorizzatiIl Booking Engine si apre solo dove il gestore ha detto sì

Il Booking Engine si lascia incorniciare solo dai domini che il gestore ha autorizzato nell'app (sottodomini compresi): domini nudi, senza https, pagine, porte o parametri. Se il sito ha un dominio di prova o di staging, va aggiunto anche quello. Fuori elenco il browser mostra al posto del riquadro un messaggio come «si è rifiutato di connettersi»: non è un guasto, è la protezione.

Dopo il pagamento l'ospite torna sulla pagina da cui era partito solo se la pagina è in https su un dominio autorizzato. Le pagine che usano un instradamento con # (per esempio /#/camere, frequente nei siti a pagina unica) tornano alla pagina senza la parte dopo il #: dopo # viaggia il codice di ritorno.

Dove incollarloWordPress, Wix, Squarespace, HTML

WordPress: blocco «HTML personalizzato» (o il widget HTML di Elementor), non un blocco di paragrafo. Se un plugin di ottimizzazione ritarda o unisce gli script, escludi vezpa.it/be/embed.js.
Wix: l'elemento «Incorpora HTML» esegue il codice in una cornice di Wix su un altro dominio, e lì il Booking Engine non si apre. Usa invece Impostazioni → Codice personalizzato (piano Premium) con data-modo="angolo", oppure un pulsante di Wix con il link diretto al Booking Engine.
Squarespace: blocco «Codice»; senza blocco codice, l'iniezione di codice nel piè di pagina con data-modo="angolo".
HTML: incolla le due righe nel <body>, dove deve comparire il Booking Engine.

Se il Booking Engine non compareLe cause, in ordine di frequenza

Dominio non autorizzato: il riquadro dice che la pagina non si può mostrare. Il gestore aggiunge il dominio nell'app e salva.
Script tolto o bloccato: guarda la console del browser. Un banner dei cookie che blocca gli script esterni va configurato per lasciar passare vezpa.it: il Booking Engine nel sito non usa cookie.
Content Security Policy del sito: servono script-src https://vezpa.it, frame-src https://vezpa.it e connect-src https://vezpa.it (più il dominio di data-origine, se c'è).
Cache: svuota la cache del sito e del CDN dopo aver incollato il codice.

Sicurezza e privacyChe cosa fa lo script, e che cosa no

Non legge cookie e non ne scrive; non legge la pagina oltre al proprio segnaposto; definisce un solo nome globale, window.VezpaBE, e solo classi CSS con il prefisso vezpa-be.
Dall'iframe accetta due soli messaggi, l'altezza e la chiusura del pannello (Esc premuto dentro il Booking Engine), e solo dal proprio iframe e dalla sua origine.
Il pagamento con carta si apre a pagina intera su Stripe: i dati della carta non passano mai dal sito. Dopo il pagamento il codice di ritorno viaggia dopo # (non arriva al server del sito) e lo script lo toglie subito dall'indirizzo.