Web agency guide

Vezpa's Booking Engine in a client's website: the code and how to paste it

The code The attributes Authorised websites Where to paste it If the Booking Engine does not appear Security and privacy

The codeTwo lines, pasted where it should appear

The property manager generates the code in the Vezpa app and sends it to you. It looks like this:

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

The <div> goes where the Booking Engine should appear on the page; the script is needed once per page, even with several placeholders (pasting it twice does no harm). The script is served by vezpa.it with one hour of cache: fixes arrive by themselves, without touching the site.

The attributesWhat each data- controls

Attribute	Values	Effect
`data-vezpa-be`	property name (required)	which Booking Engine
`data-modo`	`iframe` (default), `pulsante`, `angolo`	box in the page, button at the placeholder, fixed button at the bottom right (one per page)
`data-lingua`	`auto` (default) or a code such as `de`	`auto` reads the page's `<html lang>`; if the Booking Engine does not speak it, its default language applies
`data-camera`	numeric accommodation id (written by the app)	shows a single accommodation
`data-spa`	`si` / `no`	`no` hides the SPA and shop section
`data-testo`	text, at most 60 characters	button text; empty = «Book» in the guest's language
`data-origine`	https URL	written by the app only if the property has a custom domain for its Booking Engine

An unknown or wrong attribute never breaks the page: the script ignores it and logs it in the browser console with the [Vezpa BE] prefix. On pages that add the placeholder after loading (single-page sites) call window.VezpaBE.scansiona().

If the property manager activates, changes or deactivates the Booking Engine's custom domain, the code must be copied from the app again and pasted again: data-origine changes.

Authorised websitesThe Booking Engine opens only where the manager said yes

The Booking Engine lets itself be framed only by the domains the manager authorised in the app (subdomains included): bare domains, with no https, pages, ports or parameters. If the site has a test or staging domain, add that too. Outside the list the browser shows a message such as «refused to connect» instead of the box: it is not a fault, it is the protection.

After paying, the guest returns to the page they started from only if that page is https on an authorised domain. Pages that use # routing (for example /#/rooms, common on single-page sites) return to the page without the part after the #: the return code travels after #.

Where to paste itWordPress, Wix, Squarespace, HTML

WordPress: a «Custom HTML» block (or Elementor's HTML widget), not a paragraph block. If an optimisation plugin delays or combines scripts, exclude vezpa.it/be/embed.js.
Wix: the «Embed HTML» element runs the code in a Wix frame on another domain, where the Booking Engine does not open. Use Settings → Custom Code (Premium plan) with data-modo="angolo" instead, or a Wix button with the direct link to the Booking Engine.
Squarespace: a «Code» block; without a code block, footer code injection with data-modo="angolo".
HTML: paste the two lines into the <body>, where the Booking Engine should appear.

If the Booking Engine does not appearThe causes, most frequent first

Domain not authorised: the box says the page cannot be shown. The manager adds the domain in the app and saves.
Script removed or blocked: check the browser console. A cookie banner that blocks external scripts must let vezpa.it through: the Booking Engine on the site uses no cookies.
The site's Content Security Policy: it needs script-src https://vezpa.it, frame-src https://vezpa.it and connect-src https://vezpa.it (plus the data-origine domain, if any).
Cache: clear the site's and the CDN's cache after pasting the code.

Security and privacyWhat the script does, and what it does not

It reads and writes no cookies; it reads nothing on the page beyond its own placeholder; it defines a single global name, window.VezpaBE, and only CSS classes with the vezpa-be prefix.
From the iframe it accepts only two messages, the height and closing the panel (Esc pressed inside the Booking Engine), and only from its own iframe and its origin.
Card payment opens full page on Stripe: card data never passes through the site. After payment the return code travels after # (it never reaches the site's server) and the script removes it from the address at once.