Entwicklerdokumentation

JavaScript-SDK

Das BookDinePlay-Widget vom CDN laden, renderBookingWidget aufrufen und genau wissen, was es tut, liest und ablehnt.

Das JavaScript-SDK ist eine einzige Datei, die einen vollständigen Reservierungsablauf in ein Element Ihrer Wahl rendert. Keine Abhängigkeiten, kein Build-Schritt, läuft unverändert in jedem Browser, den Ihre Website unterstützt. Wenn Sie das Widget nur auf einer Seite brauchen, ist das die ganze Integration.

Installation

Laden Sie das SDK vom BookDinePlay-CDN und fügen Sie ein leeres Element ein, in dem das Widget rendern soll:

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

sdk/v0/ ist der Alias der Hauptversionslinie: Er liefert immer das neueste 0.x-Release und wird fünf Minuten lang gecacht, sodass Korrekturen Ihre Seite ohne Änderung auf Ihrer Seite erreichen. Wie Sie stattdessen eine exakte, unveränderliche Version mit Integritäts-Hash festlegen, steht in der CDN-Anleitung.

Das Script hängt genau ein globales Objekt an, window.BookDinePlay; zweimal laden schadet nicht – die erste Kopie gewinnt.

Rufen Sie renderBookingWidget nach dem Script-Tag auf, sobald der Container existiert:

<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>

Der Aufruf gibt die Widget-Instanz zurück – oder null, wenn das Rendern abgelehnt wurde, siehe Wenn es nicht rendert. Sie können ihn auf einer Seite mehrfach aufrufen, jeweils mit eigenem Container, um mehrere Locations oder mehrere Ressourcenauswahlen nebeneinander einzubetten.

Optionen

Option	Pflicht	Bedeutung
`container`	ja	Ein CSS-Selektor oder ein DOM-Element. Das Widget rendert darin.
`venueSlug`	ja	Der Slug Ihrer Location, zu sehen in den Location-Einstellungen der Konsole.
`apiBaseUrl`	ja	`https://api.bookdineplay.com`. Nur bei einer privaten Installation anders.
`publishableKey`	ja	Der `bdp_pk_…`-Schlüssel der Location. Wird bei jeder Anfrage als `X-BookDinePlay-Key` gesendet. Nie ein geheimer Schlüssel.
`resourceTypes`	nein	Welche Ressourcentypen der Gast wählen darf: `RestaurantTable`, `BilliardTable`, `DartBoard`, `Shuffleboard`, `BowlingLane`, `EventArea`. Standard: nur `['RestaurantTable']`. Ein einzelner Eintrag wählt diesen Typ vor (der Schritt wird weiterhin angezeigt); listen Sie jeden Typ, den die Location tatsächlich anbietet, damit Gäste wählen können.
`theme`	nein	`auto` (Systemeinstellung des Besuchers, Standard), `light` oder `dark`. Farben, Eckenradius und Schrift lassen sich zusätzlich anpassen – siehe Theming.

Was der Gast sieht

Ressourcentyp – Restauranttisch, Billardtisch, Bowlingbahn … die Typen, die Sie in resourceTypes angegeben haben; das Widget gleicht sie nicht mit der Location ab, listen Sie also nur, was sie anbietet.
Personenzahl und Datum, dann die Buchungsdauer, falls die Location Gäste wählen lässt.
Freie Slots an diesem Tag, mit der von der Location konfigurierten Preisschätzung.
Kontaktdaten – Name, E-Mail, Telefon, optionale Notizen; dazu, wo die Location es anbietet, buchbare Extras, eine Anzahl Spiele pro Person bei Ressourcen mit Preis pro Spiel und eine optionale Anzahlung.
Bestätigung mit der Reservierungsreferenz.

Jeder Schritt spricht mit Ihrem veröffentlichbaren Schlüssel mit der öffentlichen API; das Widget speichert nichts über die laufende Buchung hinaus.

Isolation von Ihrer Seite

Das Widget rendert in einer Shadow-DOM-Wurzel: Ihr Stylesheet kann nicht hinein- und seine Styles können nicht hinauswirken. Browser ohne Shadow DOM bekommen einen gekapselten Fallback mit bdp--präfixierten Klassennamen. Der einzige Weg hinein ist die kleine Menge an CSS-Custom-Properties, die unter Theming dokumentiert ist.

Content Security Policy

Sendet Ihre Website eine CSP, erlauben Sie die beiden Hosts, mit denen das Widget spricht:

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

Das Widget fügt sein eigenes <style> in die Shadow-Wurzel ein; ein striktes style-src ohne 'unsafe-inline' blockiert das. Verwenden Sie für die einbettende Seite eine Richtlinie ohne Nonce-Pflicht oder erlauben Sie Inline-Styles für diese Seite.

Wenn es nicht rendert

renderBookingWidget gibt null zurück und schreibt eine Zeile in die Browserkonsole, statt eine Ausnahme zu werfen – eine Fehlkonfiguration bricht also nie den Rest Ihrer Seite:

container not found – der Selektor hat nichts gefunden, oder das Script lief, bevor das Element existierte. Rufen Sie nach dem Container im Dokument auf oder bei DOMContentLoaded.
venueSlug and apiBaseUrl are required – einer der beiden Werte fehlt.
a publishableKey is required – ohne Schlüssel startet das Widget nicht, weil ohnehin jede API-Anfrage mit 401 scheitern würde.

Einmal gerendert, ist ein 403 bei der ersten Anfrage fast immer die Origin-Liste: Die Origin der Seite steht nicht auf der Liste des Schlüssels. Der Netzwerk-Tab zeigt den Problem-type; Authentifizierung erklärt jeden einzelnen.

Für Fortgeschrittene: Helfer und Version

window.BookDinePlay.version ist die Versionszeichenkette des SDK. window.BookDinePlay.helpers stellt die reinen Funktionen des Widgets bereit – buildAvailabilityQuery, buildReservationPayload, buildApiHeaders, formatPrice, friendlyResourceLabel und einige mehr – für Seiten, die auf derselben API eine eigene Oberfläche bauen wollen. Sie nehmen einfache Werte, geben einfache Werte zurück und berühren weder das DOM noch ein Geheimnis.

Nächste Schritte

Theming – das Widget an Ihre Marke anpassen.
CDN – exakte Versionen festlegen, SRI, Cache-Lebensdauern.
Authentifizierung – Origins, Header und jede Ablehnung.