Developers
Three ways to put booking on your website.
Every integration talks to the same public BookDinePlay API, so availability, menus and reservations stay consistent no matter how you embed them.
Plain JavaScript SDK
Drop a widget into any website.
Framework-free and dependency-free. Load the script, call
renderBookingWidget, and BookDinePlay renders a self-contained, style-isolated reservation flow inside your container element.
-
Add the script tag
Load the BookDinePlay SDK from the BookDinePlay CDN. The major-line alias below updates automatically; pin an exact version with its integrity hash if your security posture requires byte-level pinning.
-
Add a container element
Place an empty element with an id where you want the widget to render.
-
Call
renderBookingWidgetPass your venue slug, your publishable key, the API base URL and the resource types you want to expose.
<div id="bookdineplay-widget"></div>
<script src="https://cdn.bookdineplay.com/sdk/v0/bookdineplay.js"></script>
window.BookDinePlay.renderBookingWidget({
container: '#bookdineplay-widget',
venueSlug: 'demo-sportsbar',
apiBaseUrl: 'https://api.bookdineplay.com',
publishableKey: 'bdp_pk_your_publishable_key',
resourceTypes: ['RestaurantTable', 'BilliardTable', 'DartBoard']
});
The publishable key is browser-safe by design: it is locked to the origins you allow rather than kept secret, and the widget renders nothing without one. Never put a secret key in page markup — those belong on a server.
The major-line alias above updates automatically but is not byte-pinned. For byte-level pinning, load an exact version and add the integrity value published alongside it as sdk/<version>/sri.txt, also attached to that release on GitHub — pick whichever your security posture requires.
<script
src="https://cdn.bookdineplay.com/sdk/<version>/bookdineplay.js"
integrity="<hash from sdk/<version>/sri.txt>"
crossorigin="anonymous"></script>
Theming
Match the widget to your brand.
The widget renders inside a Shadow DOM and reads its accent color, background, surface, text and border colors, corner radius and font from CSS custom properties on the host page or the widget's container element. Every property has a default, so setting none renders exactly as it does today.
Under prefers-color-scheme: dark, six of the nine properties — background, surface, text, muted, border and accent contrast — fall back to the widget's built-in dark palette. Accent, radius and font apply in both light and dark.
/* on your page, or on the widget's container element */
#bookdineplay-widget {
--bdp-accent: #0f766e;
--bdp-radius: 4px;
--bdp-font: Georgia, "Times New Roman", serif;
}
--bdp-accent
--bdp-accent-contrast
--bdp-background
--bdp-surface
--bdp-text
--bdp-muted
--bdp-border
--bdp-radius
--bdp-font
WordPress plugin
One shortcode, anywhere on your site.
Install the BookDinePlay plugin, and it enqueues the JavaScript SDK for you. Drop the shortcode into any page, post or block, and set which venue it should render.
-
Install the plugin
Download the plugin zip from the latest GitHub release, then install it via Plugins → Add New → Upload Plugin and activate it.
-
Set your publishable key
Paste your venue's publishable key under Settings → BookDinePlay. The plugin refuses to render the widget without one, and rejects a secret key outright.
-
Add the shortcode
Paste the shortcode into any page, post or widget area.
-
Set the venue attribute
Point the shortcode at your venue slug — attributes are sanitized and output is escaped.
[bookdineplay_widget venue="demo-sportsbar"]
// bookdineplay.php (excerpt)
add_shortcode( 'bookdineplay_widget', 'bookdineplay_render_widget_shortcode' );
function bookdineplay_render_widget_shortcode( $atts ) {
$atts = shortcode_atts(
[
'venue' => 'demo-sportsbar',
'api' => 'https://api.bookdineplay.com',
'types' => 'RestaurantTable,BilliardTable,DartBoard,BowlingLane',
'theme' => 'auto',
'key' => '',
],
$atts,
'bookdineplay_widget'
);
// ... sanitize, enqueue the SDK, attach the init payload as an inline script ...
return sprintf(
'<div id="%s" class="bookdineplay-widget"></div>',
esc_attr( $container_id )
);
}
.NET SDK
A typed client for custom applications.
Reach for BookDinePlay.Sdk when you're building a custom web app, an internal operations tool, or a service that needs typed access to venues, menus, availability and reservations.
-
Install the package
Add the NuGet package to your project.
-
Register the client
Register the typed client with
AddBookDinePlayClient, passing your API base URL and a server-side secret key. It sends that key as the API key header on every request. -
Call typed methods
Call the client's methods directly for venues, menus, availability, reservations and payment intents.
-
Share contracts
Request and response types come from
BookDinePlay.Shared, so your app and the API never drift apart.
# Terminal
dotnet add package BookDinePlay.Sdk
// Program.cs - using BookDinePlay.Sdk;
builder.Services.AddBookDinePlayClient(
new Uri("https://api.bookdineplay.com"),
builder.Configuration["BookDinePlay:ApiKey"]!); // a bdp_sk_ secret key
// IBookDinePlayClient client - injected; BookableResourceType lives in BookDinePlay.Domain
var venue = await client.GetVenueAsync("demo-sportsbar", cancellationToken);
var availability = await client.GetAvailabilityAsync(
venueSlug: "demo-sportsbar",
date: DateOnly.FromDateTime(DateTime.Today),
partySize: 4,
resourceType: BookableResourceType.RestaurantTable,
cancellationToken: cancellationToken);
var reservation = await client.CreateReservationAsync(
venueSlug: "demo-sportsbar",
request: createReservationRequest,
cancellationToken: cancellationToken);
Need help wiring it up?