Add the booking widget to your website

This article shows you how to put a live booking box — the widget — on your own website. People can pick a time, see a price, and pay, all from your own site. One copy-paste. No developer needed.

You do all of this on the Add to your website screen in the menu.

What the widget does today — honestly

For a space you book by the hour, the widget guides a person through these steps:

1. They choose How long, the Day, and one of the Available times. Days that are full or closed are marked Full or Closed after the person opens them.
2. They choose the number of attendees. The widget tells them if the space is too small.
3. They review the price. They type their Name and Email. Phone / WhatsApp is optional.
4. The space is held for them for 15 minutes.
5. They pay by card on a secure page hosted by Stripe. This is the only step outside your site.

Once Stripe confirms the payment, the booking is confirmed automatically. It shows in your Bookings list the same way as a booking made in the dashboard.

What the widget cannot do yet:

• One space for each widget. A “show all spaces” picker is not built yet. If you want three spaces, paste the snippet three times, once for each space.
• Card payment only. The widget does not take cash or bank transfer. If a customer pays you in cash, enter the booking yourself. See Creating a booking yourself.
• Your opening hours decide the times. If a space has no opening hours, the widget shows no times. See Your spaces, hours, and prices.

In a hotel workspace

The widget shows a 7-day strip of nights for one room. A guest picks dates, sees a price, and pays the same way. The widget shows one room for each snippet.

Step 1 — Issue a publishable key

A publishable key is a code that starts with pk_live_ (or pk_test_ for tests). It is the safe, public kind of key. It can show availability and prices and start a hold, but it can never see personal data or touch money, even if someone copies it from your page.

1. On Add to your website, find the API keys card. If you already have an active publishable key and you still have its full value, go to Step 2.
2. Press Issue key.
3. Type a Name, for example “Website”.
4. For Kind, choose Publishable.
5. In Allowed websites (one per line), type each website where you will put the widget, for example https://example.com. You must add at least one.
6. Press Issue key.
7. The dashboard shows the full key one time, with the message “Key issued — copy it now.” Press Copy. Save the key in a safe place. Then press Done.

📸 Screenshot to add: the API keys card with the Issue key form

The dashboard shows the full key only once

After you press Done, the dashboard keeps only the first part of the key. If you lose the full key, revoke it and issue a new one. In the key table, press Revoke, then Confirm revoke. A revoked key stops working immediately.

The key table shows each key’s Name, Kind, Restrictions, Prefix, Created, Last used, and Status (Active or Revoked).

Step 2 — Copy the snippet

The Widget configurator card, on the same screen, builds the snippet for you. The snippet updates as you change a field. There is no “generate” button.

1. Under 1. What to book, choose the Resource. This list has your spaces.
2. In Publishable key (full value), paste the full key from Step 1. If you paste only the start of a key, the form tells you to paste the full key.
3. Under 2. Appearance, look at the Live preview. Change the look if you want. See Step 3.
4. Under 3. Copy the embed code, press Copy snippet below Booking widget embed.
5. Paste it into your website, where you want the booking box to appear. This works in WordPress, Wix, Squarespace, or a hand-written page — anywhere you can paste a block of HTML.

📸 Screenshot to add: the Widget configurator with the live preview and the embed code

The snippet looks like this. The configurator fills in the real values for you:

<script async src="https://docs.booking-engine.davidvalentino.com/widget/v1.js"></script>
<div
  data-booking-widget
  data-key="pk_live_your_key_here"
  data-resource="your-space-id"
  data-api-base="https://your-api-host"
></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.
• data-resource is which space to show.
• data-api-base is the address the widget talks to. The configurator fills it in. Do not remove it.

The Advanced — script URLs, API base, fallback contact section holds the script addresses and the API address. They are already filled in. Leave them as they are, unless your operator contact tells you to change them.

Using React, Vue, Svelte, or Next.js? Press See the framework guide, under the snippets.

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

In the Appearance part, you can change:

Setting in the configurator	Attribute	What it changes	Values
Accent color	data-accent	The main color	Pick a swatch, pick a custom color, or type a 6-digit hex color, like #2563eb
Corner radius	data-radius	Corner roundness	A number from 2 to 16
Font	data-font	The lettering	System, Serif, or Mono (system, serif, mono)
Density	data-density	How tight the layout is	Comfortable or Compact
Language	data-lang	The language	English (en) or Indonesian (id)
Fallback contact (optional)	data-fallback-contact	A contact the widget can show when it cannot load	For example mailto:reservations@example.com

The configurator adds most of these attributes to the snippet only when you change them from the normal value. If you type a value wrong in a hand-written snippet, nothing breaks — the widget quietly uses its normal look. 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 booking box for your space. Pick a day. Check that you see the times you set as opening hours.

To check the full booking flow, use a test publishable key (pk_test_…) and Stripe’s own test card numbers. Ask your operator contact if you do not have a test key.

📸 Screenshot to add: the widget showing the time picker on a website

Just want to show availability, not take bookings?

There is a second, smaller box for this: the calendar embed. It shows live availability and a price hint, one month at a time. It shows availability by day, not by hour. People cannot book or pay from it — it is look-only.

The configurator builds this snippet too. Press Copy calendar snippet below Calendar embed. It uses the same key and space you already picked. It looks like this:

<script async src="https://docs.booking-engine.davidvalentino.com/widget/calendar-v1.js"></script>
<div
  data-availability-calendar
  data-key="pk_live_your_key_here"
  data-resource="your-space-id"
  data-api-base="https://your-api-host"
></div>

The script address ends in calendar-v1.js, not v1.js. It is a different, smaller program. The same publishable key works for both.

If the widget looks “down”

A publishable key works only on the websites in its Allowed websites list. If you put the widget on a new website, or your website’s address changes, the widget will not work there until you add the address.

You can fix this yourself:

1. On Add to your website, find the key in the API keys card. The Restrictions column lists its allowed websites.
2. Press Edit restrictions.
3. In Allowed websites (one per line), add the website. Write only the site address, with no page path, for example https://example.com.
4. Press Save restrictions.

The key itself does not change, so your pages keep working. The change applies to the next request.

Two rules for the list:

• https://www.example.com and https://example.com are two different addresses. Add each one you use, on its own line.
• To allow every subdomain, use https://*.example.com. That covers shop.example.com but not example.com itself.

A publishable key must keep at least one website.

Note

This is a safety feature, not a fault. The list stops other websites from using your key.

One last reassurance

Pasting this snippet is safe. The publishable key is designed to be public. It cannot expose your customers’ data, and it cannot take money on its own.

Next steps

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