Entwicklerdokumentation

Schnellstart

Bringen Sie das BookDinePlay-Buchungswidget mit einem veröffentlichbaren API-Schlüssel in fünf Minuten auf eine bestehende Webseite.

Diese Anleitung nimmt eine Seite, die Sie bereits kontrollieren, und ergänzt sie um einen funktionierenden Reservierungsablauf. Sie brauchen ein Betreiberkonto und fünf Minuten.

1. Veröffentlichbaren Schlüssel anlegen

Öffnen Sie in der Konsole Location → API-Schlüssel unter app.bookdineplay.com/operator/venue und legen Sie einen Schlüssel vom Typ Veröffentlichbar an. Tragen Sie jede Origin ein, von der Ihre Seite ausgeliefert wird – Schema, Host und Port müssen exakt übereinstimmen:

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

http://localhost:* erlaubt jeden Port auf localhost, für die lokale Entwicklung – :* ist der einzige Platzhalter, den die API akzeptiert, und nur für den Port. Der Schlüssel beginnt mit bdp_pk_ und darf in HTML stehen; die Origin-Liste ist das, was ihn schützt.

2. Container und Script einfügen

An beliebiger Stelle Ihrer Seite:

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

Der Alias v0 liefert immer das neueste 0.x-Release des SDK und wird fünf Minuten lang gecacht. Wie Sie stattdessen eine exakte Version mit Integritäts-Hash festlegen, steht am Ende dieser Seite.

3. Widget rendern

Nach dem 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 Pflicht Bedeutung
container ja CSS-Selektor des Elements, in das das Widget rendert (ein DOM-Element wird ebenfalls akzeptiert)
venueSlug ja Der Slug Ihrer Location, zu sehen in den Location-Einstellungen der Konsole
apiBaseUrl ja https://api.bookdineplay.com
publishableKey ja Der bdp_pk_…-Schlüssel aus Schritt 1
resourceTypes nein Welche Ressourcentypen Gäste buchen dürfen: RestaurantTable, BilliardTable, DartBoard, Shuffleboard, BowlingLane, EventArea
theme nein auto (Standard), light oder dark

4. Seite öffnen

Laden Sie die Seite von einer der erlaubten Origins. Das Widget zeigt die Ressourcentypen des Betriebs, fragt Personenzahl, Datum und Uhrzeit ab, listet freie Slots, nimmt Kontaktdaten entgegen und bestätigt die Reservierung. Jede Anfrage trägt Ihren veröffentlichbaren Schlüssel im Header X-BookDinePlay-Key.

Wenn nichts erscheint

  • Nichts erscheint und die Konsole meldet einen fehlenden Schlüssel – publishableKey ist Pflicht; das Widget rendert lieber gar nicht, als die API ohne Schlüssel aufzurufen.
  • 403 origin-not-allowed – die Origin der Seite steht nicht auf der Liste des Schlüssels. Die Origins eines Schlüssels stehen mit dem Anlegen fest: Legen Sie einen neuen Schlüssel mit allen Origins an, rollen Sie ihn aus und widerrufen Sie dann den alten (Schlüssel rotieren).
  • 401 invalid-api-key – der Schlüssel ist falsch abgetippt oder wurde widerrufen.
  • Datei direkt geöffnet (file://) – der Browser sendet Origin: null, das nie auf einer Liste stehen kann, also bekommen Sie 403 origin-not-allowed. Liefern Sie die Seite über einen lokalen Webserver aus und erlauben Sie http://localhost:*.

Die vollständige Liste steht unter Authentifizierung.

Exakte Version festlegen

Der Alias v0 aktualisiert sich automatisch. Verlangt Ihre Sicherheitsrichtlinie byte-genaues Pinning, laden Sie eine exakte Version und ergänzen den Integritätswert, der daneben als sdk/<version>/sri.txt veröffentlicht ist (ebenfalls an das Release auf GitHub angehängt):

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

Exakte Versionen sind unveränderlich und ein Jahr lang gecacht; der Alias ist nie Ziel eines veröffentlichten Hashes, weil sich sein Inhalt absichtlich ändert.

Nächste Schritte