Developer docs

Quickstart

Put the BookDinePlay booking widget on an existing web page in five minutes with a publishable API key.

This guide takes a page you already control and adds a working reservation flow to it. You need an operator account and five minutes.

1. Create a publishable key

In the console, open Venue → API keys at app.bookdineplay.com/operator/venue and create a key of type Publishable. Add every origin your page will be served from — scheme, host and port must match exactly:

https://www.your-venue.example
http://localhost:*

http://localhost:* allows any port on localhost, for local development — :* is the only wildcard the API accepts, and only for the port. The key starts with bdp_pk_ and is safe to put in HTML; the origin list is what protects it.

2. Add a container and the script

Anywhere in your page:

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

The v0 alias always serves the latest 0.x release of the SDK and is cached for five minutes. To pin an exact version with an integrity hash instead, see the note at the end of this page.

3. Render the widget

After the script tag:

<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']
  });
</script>
Option Required Meaning
container yes CSS selector of the element the widget renders into (a DOM element is accepted too)
venueSlug yes Your venue's slug, shown in the console's venue settings
apiBaseUrl yes https://api.bookdineplay.com
publishableKey yes The bdp_pk_… key from step 1
resourceTypes no Which resource types guests may book: RestaurantTable, BilliardTable, DartBoard, Shuffleboard, BowlingLane, EventArea
theme no auto (default), light or dark

4. Open the page

Load the page from one of the origins you allowed. The widget shows the venue's resource types, asks for party size, date and time, lists free slots, collects contact details and confirms the reservation. Every request it makes carries your publishable key in the X-BookDinePlay-Key header.

If nothing renders

  • Nothing appears and the console says the key is missing — publishableKey is required; the widget refuses to render without one rather than call the API unauthenticated.
  • 403 origin-not-allowed — the page's origin is not on the key's list. Add it in the console; the change is live immediately.
  • 401 invalid-api-key — the key was mistyped or has been revoked.
  • Opened the file directly (file://) — the browser sends Origin: null, which can never be on an allowlist, so you get 403 origin-not-allowed. Serve the page from a local web server and allow http://localhost:*.

See Authentication for the full list.

Pinning an exact version

The v0 alias updates automatically. If your security policy requires byte-level pinning, load an exact version and add the integrity value published next to it as sdk/<version>/sri.txt (also attached to that release on GitHub):

<script
  src="https://cdn.bookdineplay.com/sdk/<version>/bookdineplay.js"
  integrity="<hash from sdk/<version>/sri.txt>"
  crossorigin="anonymous"></script>

Exact versions are immutable and cached for a year; the alias is never the target of a published hash because its content changes by design.

Next steps