Restaurant booking embed docs, and the API

Two lines, and the first one is a link.

Copy yours, already filled in, from the ‘Your button’ screen in the office.

<a href="{page}" data-bw-venue="{publicKey}" data-bw-launcher>Book a table</a>
<script src="{origin}/embed/v1/embed.js" async></script>

Put as many buttons on a page as you like; the script loads once and serves them all. It is under 6 KB gzipped, stores no cookies, and leaves the button a plain link until it loads or if anything in it fails.

Twelve you write, two the script writes.

The button itself

data-bw-venue: Required, and a button without it is ignored. Your public key is not a secret: it reads only what a guest can already see, so a copied key can do no more than put a working button on another site.
data-bw-launcher: Keeps your own element as the button, styled by your site, and lets the booking event reach your page. Without it, the script swaps in its own button.
data-bw-title: The overlay’s name for screen readers, never drawn on screen. Left out, it is “Book a table” in the visitor’s language.
data-bw-locale: en, fr or ar; a regional tag is reduced to its base. Left out, the overlay follows your page’s own lang, then the visitor’s browser, then English.
data-bw-theme: light, dark or auto; anything else is dropped. It sets the light or dark of the overlay’s frame around your colours.
data-bw-phone: A number to show if the booking form cannot load. Without it, that fallback panel has a link but no way to call you.

What the form opens on

data-bw-party: A whole number above zero: the party size the form opens on.
data-bw-date: YYYY-MM-DD, read as the restaurant’s own business day. Any other shape is ignored.
data-bw-time: The slot to open on, if still free, as a timestamp in milliseconds, not a clock time like 19:30.
data-bw-require: Comma-separated seating keys the guest must have, step-free access for instance. A time that cannot honour them is withheld.
data-bw-prefer: The same list as a preference. It never withholds a time, and it reaches you with the booking.
data-bw-layout: classic or compact: which of the two booking layouts to open in. A name we do not know falls back to your own setting.

The one attribute that can withhold every time.

A seating key you have never defined is honoured by no table, so a typo in data-bw-require reads as a fully booked restaurant.

The script writes data-bw-bound and data-bw-overlay for itself; never add them by hand.

Choose the sites that can open the booking form.

Open to any secure site for fourteen days, then only to the sites you allowed.

Days 1–14: Any secure site, plus localhost and 127.0.0.1 on any port. Every site that frames it is suggested in the office on the ‘Your button’ screen, to allow or remove.
After the window: Only the sites you listed or allowed. With none, it frames nowhere.
Locked: List your sites, each a scheme, host and optional port such as http://localhost:3000, and set the mode to Locked to skip the window.
Refused: The browser blocks the frame; ten seconds later the overlay shows a link to your booking page, and your number if data-bw-phone is set.

One event reaches your page.

A booking reference for your analytics, and nothing that says who booked.

document.addEventListener("bw:booking-confirmed", (e) => {
  // e.detail.bookingRef is the reference the guest was shown.
});

Ask the script what it can see.

Run __bw.verify() in the console, on the page you installed it on.

launchers: How many buttons it bound. Zero means the button and script are not on the same page, or the key is missing.
hrefFallback: Whether every button still has a link behind it, for when the script fails.
originAllowed: True once the overlay has opened and its frame has answered, and null otherwise. It is never false; read degraded beside frameLoaded to tell a refused site from an unopened form.
frameLoaded: Says the frame fetched our page, not that the booking form finished loading.
degraded: True when the overlay gave up waiting for its frame and showed your link instead.
build: The version of the script that answered.
?bw-verify=1: On your own URL, makes the same call also print its report.
?bw-open=1: On your own URL, opens the first button on the page, carrying bw-date, bw-time and bw-party through.
__bw.open({ venue }): Opens the overlay for your key and returns whether it took the click. Without a key it returns false.

Tell us what the API has to do.

On Pro when live, it will let assistants hold a free table while a guest decides.

A guest will confirm every booking with a button, and an assistant will never book or cancel for them. What our own apps call internally is not a contract and changes without notice.

See what it connects to