Entwickler

Drei Wege, um Buchungen auf Ihrer Website anzubieten.

Jede Integration spricht mit derselben öffentlichen BookDinePlay-API, sodass Verfügbarkeit, Menüs und Reservierungen konsistent bleiben – egal, wie Sie sie einbetten.

Reines JavaScript-SDK

Betten Sie ein Widget in jede Website ein.

Framework-frei und ohne Abhängigkeiten. Laden Sie das Script, rufen Sie renderBookingWidget auf, und BookDinePlay rendert einen eigenständigen, stilisolierten Reservierungsablauf in Ihrem Container-Element.

  1. Fügen Sie das Script-Tag hinzu

    Laden Sie das BookDinePlay-SDK vom BookDinePlay-CDN. Der Major-Line-Alias unten aktualisiert sich automatisch; binden Sie eine exakte Version mit ihrem Integrity-Hash ein, wenn Ihre Sicherheitsanforderungen eine byte-genaue Bindung verlangen.

  2. Fügen Sie ein Container-Element hinzu

    Platzieren Sie ein leeres Element mit einer id an der Stelle, an der das Widget gerendert werden soll.

  3. Aufrufen von renderBookingWidget

    Übergeben Sie Ihren Location-Slug, Ihren Publishable Key, die API-Basis-URL und die Ressourcentypen, die Sie anbieten möchten.

<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']
});

Der Publishable Key ist bewusst browser-sicher: Er ist auf die von Ihnen freigegebenen Origins beschränkt, statt geheim zu sein, und ohne ihn rendert das Widget nichts. Legen Sie niemals einen Secret Key in den Seitenquelltext – der gehört auf einen Server.

Der Major-Line-Alias oben aktualisiert sich automatisch, ist aber nicht byte-genau gebunden. Für eine byte-genaue Bindung laden Sie eine exakte Version und fügen den Integrity-Wert hinzu, der daneben veröffentlicht wird als sdk/<version>/sri.txt, ebenfalls an dieses Release auf GitHub angehängt – wählen Sie, was Ihre Sicherheitsanforderungen verlangen. 

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

Zur vollständigen Anleitung →

Theming

Passen Sie das Widget an Ihre Marke an.

Das Widget wird innerhalb eines Shadow DOM gerendert und liest Akzentfarbe, Hintergrund-, Oberflächen-, Text- und Rahmenfarben, Eckenradius und Schriftart aus CSS-Custom-Properties auf der Host-Seite oder dem Container-Element des Widgets. Jede Eigenschaft hat einen Standardwert, sodass ohne Angaben alles wie bisher aussieht.

Unter prefers-color-scheme: dark fallen sechs der neun Eigenschaften – Hintergrund, Oberfläche, Text, gedämpfte Farbe, Rahmen und Akzentkontrast – auf die eingebaute Dark-Palette des Widgets zurück. Akzent, Eckenradius und Schriftart gelten in beiden Farbschemata. 

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

Zur vollständigen Anleitung →

WordPress-Plugin

Ein Shortcode, überall auf Ihrer Website.

Installieren Sie das BookDinePlay-Plugin, und es bindet das JavaScript-SDK für Sie ein. Platzieren Sie den Shortcode auf einer beliebigen Seite, in einem Beitrag oder Block, und legen Sie fest, welche Location er rendern soll.

  1. Installieren Sie das Plugin

    Laden Sie die Plugin-ZIP-Datei aus dem neuesten GitHub-Release herunter, installieren Sie sie über Plugins → Neu hinzufügen → Plugin hochladen und aktivieren Sie sie.

  2. Hinterlegen Sie Ihren Publishable Key

    Fügen Sie den Publishable Key Ihrer Location unter Einstellungen → BookDinePlay ein. Ohne ihn rendert das Plugin das Widget nicht, und einen Secret Key weist es rundweg ab.

  3. Fügen Sie den Shortcode hinzu

    Fügen Sie den Shortcode auf einer beliebigen Seite, in einem Beitrag oder Widget-Bereich ein.

  4. Legen Sie das Location-Attribut fest

    Richten Sie den Shortcode auf Ihren Location-Slug aus – Attribute werden bereinigt und die Ausgabe wird 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 )
    );
}

Zur vollständigen Anleitung →

.NET-SDK

Ein typisierter Client für individuelle Anwendungen.

Greifen Sie zu BookDinePlay.Sdk, wenn Sie eine individuelle Web-App, ein internes Betriebstool oder einen Dienst entwickeln, der typisierten Zugriff auf Locations, Menüs, Verfügbarkeit und Reservierungen benötigt.

  1. Paket installieren

    Fügen Sie das NuGet-Paket zu Ihrem Projekt hinzu.

  2. Client registrieren

    Registrieren Sie den typisierten Client mit AddBookDinePlayClient und übergeben Sie Ihre API-Basis-URL sowie einen serverseitigen Secret Key. Der Client sendet diesen Schlüssel bei jeder Anfrage als API-Key-Header.

  3. Typisierte Methoden aufrufen

    Rufen Sie die Methoden des Clients direkt für Locations, Menüs, Verfügbarkeit, Reservierungen und Zahlungsvorgänge auf.

  4. Contracts gemeinsam nutzen

    Anfrage- und Antworttypen stammen aus BookDinePlay.Shared, sodass Ihre App und die API niemals auseinanderlaufen.

# 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);

Zur vollständigen Anleitung →

API-Referenz →

Brauchen Sie Hilfe bei der Einrichtung?

Wir helfen Ihnen, BookDinePlay in Ihren Stack einzubetten.

Sprechen Sie mit uns Zurück zu den Funktionen