Booking widget

The widget puts your public booking page inside your own website. One <script> tag, no build step, no API key: it draws an iframe that resizes itself to its content.

1. Enable it and allow your domains

Team settings → Public booking → Widget. Turn the widget on and list the domains allowed to show it — up to 10.

• Enter a host name, optionally with a port: villa-suar.com, www.villa-suar.com, localhost:4010. No https://, no path, no wildcard.
• www.villa-suar.com and villa-suar.com are two different domains: add both if your site answers on both.
• Only https:// sites are allowed, except localhost which also works over http:// for local tests. A domain without a port only covers the default port.

Any site not on the list is refused by the browser itself: the booking page sends a frame-ancestors policy that names only your domains.

2. Paste the script

Copy the snippet shown in the tab, or write it yourself:

<script
  src="https://www.villaslot.io/widget.js"
  data-organization="your-organization-slug"
  data-mode="hourly"
  data-locale="en"
  async
></script>

The widget appears exactly where the tag sits. To offer both types, paste two tags — one per data-mode. Any other data-* attribute is ignored.

3. What happens on booking

The customer books inside the widget. Payment always opens in a new tab on VillaSlot, never inside the iframe — card details are never typed into a frame of your page. The customer also receives the booking link by email, so they can come back to pay later.

When a booking is created, the script fires a villaslot:booking-created event on its own <script> element. Use it for your analytics:

<script>
  document
    .querySelector('script[src$="/widget.js"]')
    .addEventListener('villaslot:booking-created', () => {
      // e.g. send a conversion event
    })
</script>

The event carries no customer data.

Look and feel

The widget follows the Appearance settings of the public page — theme and main color — not the theme of your website or of the visitor's VillaSlot account. Changes apply on the next load, with no change to the snippet.