Developer docs

WordPress plugin

Install the BookDinePlay plugin from the release zip, set your publishable key, and place the booking, events or voucher shortcode on any page.

The WordPress plugin puts the booking widget on any page or post with one shortcode, a venue's events — cards, detail, registration, tickets — with two more, and a gift voucher shop with a fourth. It does not bundle the SDK: it loads https://cdn.bookdineplay.com/sdk/v0/bookdineplay.js on pages that use the shortcode, so SDK fixes reach your site without a plugin update.

Install

  1. Download bookdineplay-<version>.zip from the latest GitHub release.
  2. In wp-admin go to Plugins → Add New → Upload Plugin, choose the zip, click Install Now, then Activate "BookDinePlay Booking Widget".
  3. Go to Settings → BookDinePlay and paste your venue's publishable key (bdp_pk_…) from the console under Venue → API keys. The field accepts only a value starting with bdp_pk_; a secret key is rejected, because this setting is embedded in your public pages.

Requires WordPress 6.0 or newer and PHP 7.4 or newer.

Add the shortcode

In any page or post:

[bookdineplay_widget venue="your-venue" types="RestaurantTable,BilliardTable,DartBoard"]
Attribute Default Meaning
venue demo-sportsbar Your venue's slug. Always set it.
types RestaurantTable,BilliardTable,DartBoard,BowlingLane Comma-separated resource types to offer: RestaurantTable, BilliardTable, DartBoard, Shuffleboard, BowlingLane, EventArea.
theme auto auto, light or dark — see Theming.
api https://api.bookdineplay.com Only for a private deployment.
key the key from Settings A per-shortcode publishable key, for a site that embeds more than one venue. Same bdp_pk_ rule; anything else is refused and that shortcode renders nothing (administrators see the missing-key notice) — it does not fall back to the Settings key.

Several shortcodes on one page each render their own widget.

Events

A venue on Pro or higher can show its published events on any page. The list shortcode renders every upcoming event as a card; a card opens into the event's detail and a registration form that ends, for a free event, in named tickets with a code and a QR page, or, for a Paid event (Premium, a connected payout account), in a Stripe Checkout — the same flow as renderEventsWidget in the JavaScript SDK:

[bookdineplay_events venue="your-venue" layout="grid" language="en"]
Attribute Default Meaning
venue, api, theme, key as above Exactly as for [bookdineplay_widget].
layout grid grid — cards in columns — or list, one card per row.
language en en or de: the language of the widget's own texts and of the problem messages it shows. Event titles and descriptions always come in the language the venue wrote them in.
success_url the built-in registration page Where a Paid event's Stripe Checkout returns the guest after they pay.
cancel_url the built-in registration page …after they abandon Checkout.

A site selling Paid tickets usually sets both return URLs:

[bookdineplay_events venue="your-venue" success_url="https://your-site.example/thanks" cancel_url="https://your-site.example/tickets"]

To give one event its own page, render it directly by its slug — shown in the console next to the event. The widget then shows the detail, the form and the confirmation, but no list and no back button:

[bookdineplay_event venue="your-venue" event="darts-league-night"]

[bookdineplay_event] takes the same attributes as [bookdineplay_events] except layout, plus the required event (lowercase letters, digits and hyphens). Without a valid event it renders nothing for visitors and a notice for administrators.

What visitors see, and why a sold-out, closed or past event shows a sentence instead of the form, is described under What the guest sees. A venue with no upcoming events shows an empty state; so does a venue whose plan does not include events. On Premium, a Paid event's form shows a live total and checks out through Stripe (the success_url/cancel_url attributes above); a venue whose plan does not include ticket sales, or that has not connected a payout account yet, answers the attempt with a generic "not available right now" message — the same one a guest would see for any other reason ticket sales are not open, so nobody outside the venue learns which it was. The tickets and the cancel link also reach the guest by e-mail, and the ticket and cancel pages live on app.bookdineplay.com — nothing else to install (What the guest receives).

Gift vouchers

A venue on Premium that sells gift vouchers online can put its voucher shop on any page — the same shop as renderVoucherShop in the JavaScript SDK:

[bookdineplay_vouchers venue="your-venue" language="de"]
Attribute Default Meaning
venue, api, theme, key as above Exactly as for [bookdineplay_widget].
language en en or de: the language of the shop's own texts, its offers and terms, and the problem messages it shows.

Visitors choose an offer, enter who is buying and, for a gift, who receives it, a message and an optional delivery date, and pay on Stripe Checkout; Stripe returns them to the built-in thank-you page. The voucher code arrives by e-mail. Underneath, visitors who already have a voucher can check its balance. A venue that does not sell vouchers online shows a short "not available" message instead of the offers — the same message for every reason, except that a venue that does not offer vouchers online at all says so.

Selling needs the Premium plan, a connected payout account and the online voucher sale switched on in the console; guests can check a balance on every plan. Paying with a voucher needs nothing extra on your site: the booking and events shortcodes already show a "Have a voucher?" field where a payment is made (Voucher fields in the widgets).

Allow your site's origin

The key you paste is protected by its origin allowlist, not by secrecy. Create the key with your site's origin — https://www.your-venue.example, scheme and host exactly as visitors load it — under Venue → API keys in the console; a key's origins are fixed at creation, so a new origin means a new key. Without it every booking request is refused with 403 origin-not-allowed. Authentication has the rules.

When the widget does not show

  • Ordinary visitors see nothing, administrators see a notice — no publishable key is configured. Set it under Settings → BookDinePlay (or per shortcode with key).
  • The settings page rejected the key — you pasted a secret key (bdp_sk_…). Copy the publishable key from the console instead.
  • The widget renders but every request fails — the site's origin is not on the key's allowlist, or the api attribute points somewhere wrong. The browser's network tab shows the problem type.
  • The voucher shortcode shows "not available" — the venue does not sell vouchers online right now: its plan, its payout account, its voucher settings or switched-off payments. The console shows which.
  • The events shortcode shows "No upcoming events" — the venue has no published event that is upcoming or ongoing, or its plan does not include events (Pro or higher). Publish an event in the console first. [bookdineplay_event] additionally needs a valid event slug.

Themes and styling

The widget renders inside a Shadow DOM, so your theme's CSS does not affect it — and it does not affect your theme. To match colors, corners and font, set the --bdp-* custom properties in your theme's stylesheet or in Appearance → Customize → Additional CSS; Theming lists them.

Updates, privacy and CSP

  • SDK updates within the current major line arrive automatically through sdk/v0/; a new major line only ever comes with a plugin update.
  • Pages with the shortcode load one script from cdn.bookdineplay.com and talk to api.bookdineplay.com. If your site keeps a list of third-party hosts (privacy notice, CSP, firewall), add both — the JavaScript SDK guide shows the CSP directives.
  • The plugin stores no secrets and sends nothing anywhere itself; only the browser talks to the API, with the publishable key.

Next steps

  • Theming — colors, radius and font.
  • Events — what the events shortcodes render, option by option.
  • Vouchers — what the voucher shortcode renders, and the balance check.
  • CDN — what sdk/v0/ promises and how releases reach your site.