Add the booking widget to your website

This article shows you how to put a live availability box — the widget — on your own hotel website. One copy-paste. No developer needed.

What the widget does today — honestly

Today the widget shows your live availability: a 7-day strip for one room, straight from your dashboard. Block a date in the dashboard, and it updates on your website in real time.

What it does not do yet: guests cannot book and pay inside the widget. That full booking flow is coming soon, but it is not live today. We would rather tell you that here than have you discover it later.

Step 1 — Get your publishable key

You need your publishable key — a code that starts with pk_live_. It is the safe, public kind of key: it can show availability and prices, but it can never see guest personal data or touch money, even if someone copies it from your page. It is meant to be visible.

Look in the Keys section of your dashboard. If you do not see a publishable key there, ask your operator contact — they can issue one for you.

📸 Screenshot to add: the Keys section of the dashboard

Step 2 — Paste the snippet into your website

This works in WordPress, Wix, Squarespace, or a hand-written page — anywhere you can paste a block of HTML. Paste this where you want the availability box to appear:

<script async src="https://widget.<your-domain>/v1.js"></script>
<div
  data-booking-widget
  data-key="pk_live_your_key_here"
  data-resource="your-room-id"
></div>

What each part means, in plain words:

• The first line loads the widget program from the internet.
• The <div> is where the widget appears on your page.
• data-key is your publishable key from Step 1. Replace pk_live_your_key_here with your real key.
• data-resource is which room to show. Each widget shows one room — a “show all rooms” picker is not built yet. If you want three rooms, paste the snippet three times with three room IDs. Ask your operator contact for your room IDs.

Your operator contact will also give you the real widget address for the first line.

Step 3 — Match your website’s look (optional)

You can add these to the <div>, next to data-key:

Attribute	What it changes	Values
data-accent	The main color	A hex color, like #2563eb
data-radius	Corner roundness	A number from 2 to 16
data-font	The lettering	system, serif, or mono
data-density	How tight the layout is	comfortable or compact
data-lang	The language	en or id

If you type a value wrong, nothing breaks — the widget quietly uses its normal look instead. And the widget is isolated from the rest of your page (a technique called Shadow DOM), so it cannot clash with your website’s design, and your design cannot break it.

How to know it worked

Open your website. You should see the availability strip for your room. Block a date in your dashboard, refresh your website, and watch the date turn unavailable.

📸 Screenshot to add: the widget showing the 7-day availability strip on a hotel website

If the widget looks “down”

Your publishable key only works on websites that were approved in advance (this list is called a domain allowlist). If you put the widget on a new website, or your website’s address changed, the key will not work there yet. This is a safety feature, not a fault. Tell your operator contact your website’s address and they will add it.

One last reassurance: pasting this snippet is safe. The publishable key is designed to be public. It cannot expose your guests’ data, and it cannot take money on its own.