JavaScript SDK

The JavaScript SDK is one file that renders a complete reservation flow inside an element you choose. It has no dependencies, no build step, and runs unmodified in any browser your site supports. If you only need the widget on a page, this is the whole integration.

Install

Load the SDK from the BookDinePlay CDN and add an empty element where the widget should render:

<div id="bookdineplay-widget"></div>
<script src="https://cdn.bookdineplay.com/sdk/v0/bookdineplay.js"></script>

sdk/v0/ is the major-line alias: it always serves the latest 0.x release and is cached for five minutes, so fixes reach your page without a change on your side. To pin an exact, immutable version with an integrity hash instead, see the CDN guide.

The script attaches one global, window.BookDinePlay, and loading it twice is harmless — the first copy wins.

Render the widget

Call renderBookingWidget after the script tag, once the container exists:

<script>
  window.BookDinePlay.renderBookingWidget({
    container: '#bookdineplay-widget',
    venueSlug: 'your-venue',
    apiBaseUrl: 'https://api.bookdineplay.com',
    publishableKey: 'bdp_pk_your_publishable_key',
    resourceTypes: ['RestaurantTable', 'BilliardTable', 'DartBoard'],
    theme: 'auto'
  });
</script>

The call returns the widget instance, or null when it refused to render — see When it refuses to render. You can call it more than once on a page, each with its own container, to embed several venues or several resource selections side by side.

Options

What the guest sees

1. Resource type — restaurant table, billiard table, bowling lane… the types you listed in resourceTypes; the widget does not check them against the venue, so list only what it offers.
2. Party size and date, then the booking length if the venue lets guests choose one.
3. Available slots for that day, with the price estimate the venue configured.
4. Contact details — name, email, phone, optional notes; plus, where the venue offers them, bookable extras, a games-per-player count for resources priced per game, and an optional deposit.
5. Confirmation with the reservation reference.

Every step talks to the public API with your publishable key; the widget never stores anything beyond the current booking in progress.

Isolation from your page

The widget renders inside a Shadow DOM root: your stylesheet cannot leak into it and its styles cannot leak out. Browsers without Shadow DOM get a scoped fallback with bdp- prefixed class names. The only way in is the small set of CSS custom properties documented under Theming.

Content Security Policy

If your site sends a CSP, allow the two hosts the widget talks to:

script-src  https://cdn.bookdineplay.com
connect-src https://api.bookdineplay.com

The widget injects its own <style> inside the shadow root; a strict style-src without 'unsafe-inline' blocks that. Use a nonce-free policy for the page that embeds it, or allow inline styles for that page.

When it refuses to render

renderBookingWidget returns null and writes one line to the browser console instead of throwing, so a misconfiguration never breaks the rest of your page:

• container not found — the selector matched nothing, or the script ran before the element existed. Call after the container in the document, or on DOMContentLoaded.
• venueSlug and apiBaseUrl are required — one of the two is missing.
• a publishableKey is required — the widget will not start without one, because every API request would fail with 401 anyway.

Once rendered, a 403 on the first request is almost always the origin allowlist: the page's origin is not on the key's list. The network tab shows the problem type; Authentication explains each one.

Advanced: helpers and version

window.BookDinePlay.version is the SDK version string. window.BookDinePlay.helpers exposes the widget's pure functions — buildAvailabilityQuery, buildReservationPayload, buildApiHeaders, formatPrice, friendlyResourceLabel and a few more — for host pages that want to build their own interface on the same API. They take plain values, return plain values, and touch neither the DOM nor any secret.

Next steps

• Theming — match the widget to your brand.
• CDN — pinning exact versions, SRI, cache lifetimes.
• Authentication — origins, headers and every refusal.