Add the booking widget to your website

This article shows you how to put a live booking box — the widget — on your own hotel website. Guests can check availability, get a price, and pay, all from your own site. One copy-paste. No developer needed.

What the widget does today — honestly

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.

Guests can also book and pay, start to finish, without leaving your site for anything except the payment step itself: they pick dates, see a price, hold the room for 15 minutes, then pay on a secure page hosted by Stripe. Once Stripe confirms the payment, the booking is confirmed automatically — it shows up in your Reservations list the same way a booking made through the dashboard would.

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 API Keys & Widget 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 API Keys & Widget section of the dashboard

Step 2 — Paste the snippet into your website

The easiest way to get this snippet is the widget configurator, in the API Keys & Widget section of your dashboard: pick your key, your room, and your colors, and it builds the exact snippet for you with a live preview, ready to copy.

You can also write it by hand. 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 booking 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.

To check the full booking flow, use your test publishable key (pk_test_… — ask your operator contact if you don’t have one) and Stripe’s own test card numbers. A booking made this way appears in your Reservations list marked as a test, never mixed in with real guest bookings.

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

Just want to show availability, not take bookings?

There is a second, smaller box for this: the calendar embed. It shows the same live availability and a per-night price, one month at a time, but guests cannot book or pay from it — it is look-only. Use it on a page where you are not ready to take bookings yet, or alongside the full widget elsewhere on your site.

The widget configurator builds this snippet too, right below the booking widget’s snippet, from the same key and room you already picked. It looks like this:

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

Notice the script address ends in calendar-v1.js, not v1.js — it is a different, smaller program from the booking widget, so a page that only needs the calendar does not have to load the booking flow’s code too. The same publishable key works for both.

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.

Note

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.

Next steps

• Getting your API keys — more on the publishable key this snippet uses.