Das Buchungs-Widget

Gäste sollen dort reservieren, wo sie ohnehin sind: auf der Website des Restaurants. Dafür gibt es ein Snippet aus zwei Zeilen — kein Relaunch, keine Migration, keine zweite Buchungsseite.

Zwei Zeilen HTML
Inline oder Popup
DOM-Events
JavaScript-API

2
Zeilen HTML
16
Attribute
8
DOM-Events
10
API-Methoden

Kapitel 01

Das Snippet

Einmal eingefügt, direkt vor dem schließenden body-Tag. Das Restaurant findet den fertigen Block mit seinen eigenen Werten im Dashboard unter Einstellungen → Website, samt Live-Vorschau daneben.

<script id="sipsaq-sdk" src="https://book.sipsaq.de/embed/v1/sipsaq.js" defer></script>

<div class="sipsaq-widget-config"
     data-restaurant="koez-bingoel"
     data-mode="popup"
     data-position="bottom-right"
     data-lang="de"
     data-primary-color="#2D6A4F"
     data-label="Tisch reservieren"
     data-source="website"
></div>

Das Snippet ist ein versionierter Vertrag

Die Kennungen in diesem Block — Skript-ID, CSS-Klasse, Event-Präfix — werden vom SDK genau so gelesen, wie sie hier stehen. Sie bleiben unverändert; angepasst werden nur die data-Attribute. Sollte sich das Snippet je ändern, erscheint es unter einem neuen Versionspfad, damit kein funktionierender Reservierungs-Button ohne Vorwarnung abgeschaltet wird.

Kapitel 02

Konfigurationsattribute

Alles am Widget wird über Attribute auf dem Konfigurations-div gesteuert. Nur eines ist Pflicht.

data-restaurantPflicht: Der Buchungs-Slug des Restaurants, zum Beispiel koez-bingoel.
data-modeinline: inline oder popup.
data-positionbottom-right: Wo das Popup sitzt — sieben Platzierungen stehen zur Wahl.
data-langde: de oder en.
data-primary-color#2D6A4F: Schaltflächen und ausgewählte Zustände.
data-bg-color#FFFFFF: Hintergrund des Panels; der Textkontrast wird daraus abgeleitet.
data-text-colorautomatisch: Nur nötig, wenn die abgeleitete Farbe überschrieben werden muss.
data-labelTisch reservieren: Beschriftung der schwebenden Schaltfläche.
data-widthautomatisch: Beliebige CSS-Länge, etwa 520px oder min(94vw,600px).
data-width-wideautomatisch: Breite für den Schritt mit den Gastdaten.
data-gap20px: Abstand zum Bildschirmrand im schwebenden Zustand.
data-pax—: Personenzahl vorbelegen.
data-openfalse: Beim Laden der Seite automatisch öffnen.
data-hide-default-buttonfalse: Unsere Schaltfläche ausblenden und eine eigene verwenden.
data-hide-brandingfalse: Die SIPSAQ-Marke auf der Schaltfläche ausblenden.
data-source—: Buchungen von dieser Seite in den Auswertungen kennzeichnen.

Kapitel 03

DOM-Events

Das Widget meldet jeden Schritt als Event auf window. Damit lässt sich die Buchungsstrecke an die Analytics der Website anschließen, ohne Zugriff auf das Widget selbst. Die Namen tragen in v1 durchgängig das Präfix sipsaq: — ready heißt also sipsaq:ready.

ready
Das Widget ist geladen.
opened
Der Gast hat es geöffnet.
pax-selected
Die Personenzahl wurde gewählt.
date-selected
Das Datum wurde gewählt.
slot-selected
Die Uhrzeit wurde gewählt.
booking-completed
Die Buchung ist abgeschlossen.

ready: Das Widget ist geladen.
opened: Der Gast hat es geöffnet.
pax-selected: Die Personenzahl wurde gewählt.
date-selected: Das Datum wurde gewählt.
slot-selected: Die Uhrzeit wurde gewählt.
booking-completed: Die Buchung ist abgeschlossen.
resized: Das Panel hat seine Größe geändert.
closed: Der Gast hat das Panel geschlossen.

window.addEventListener('sipsaq:booking-completed', function (e) {
  // e.detail enthält die Eckdaten der Buchung
  console.log(e.detail);
});

Kapitel 04

JavaScript-API

Wer die eigene Schaltfläche verwenden oder das Widget aus dem Seitencode heraus steuern möchte, findet dafür ein globales Objekt mit zehn Methoden. In v1 trägt es den Namen SipsaqWidget.

Ein Element mit data-sipsaq-action="open" öffnet das Widget ohne eine Zeile JavaScript.
Ein Link auf #sipsaq-open tut dasselbe.

const widget = window.SipsaqWidget;

widget.open()                     // Panel öffnen
widget.close()                    // schließen
widget.toggle()
widget.isOpened()                 // → true / false

widget.openWith({ pax: 4 })       // geöffnet, vorbelegt
widget.setPosition('top-left')    // verschieben
widget.setWidth('560px')
widget.setTheme({ bg: '#101418', color: '#74C69D' })

widget.on('booking-completed', fn)
widget.off('booking-completed', fn)

Kapitel 05

Der direkte Buchungslink

Nicht jedes Restaurant will etwas einbetten. Jedes bekommt deshalb zusätzlich eine eigene, vollständige Buchungsseite unter einer festen Adresse — gedacht für das Google-Unternehmensprofil, für Instagram und für QR-Codes am Tisch.

www.sipsaq.de/book/<slug>

Die Seite wird serverseitig gerendert und funktioniert ohne Anmeldung.
Sie zeigt Name, Adresse, Telefonnummer und Öffnungszeiten des Restaurants und führt in drei Schritten durch die Buchung.
Nach dem Absenden erhält der Gast eine eigene Statusseite zu seiner Reservierung.

Kapitel 06

Verhalten und Kompatibilität

Das Widget läuft in einem eigenen iframe auf unseren Servern. Es liest kein Cookie der einladenden Seite und setzt keines; die Kommunikation läuft über eine dokumentierte, versionierte postMessage-Schnittstelle.

Auf Mobilgeräten legt sich das Panel über den unteren Bildschirmrand, statt zu schweben.
Die Höhe des Panels passt sich dem jeweiligen Schritt an.
Alle Kennungen des Snippets sind Teil eines öffentlichen Vertrags: Änderungen daran erscheinen unter einem neuen Versionspfad, nie im bestehenden.

Weiter

Reservierungen

Buchungslebenszyklus, Tages- und Wochenansicht, Warteliste, Benachrichtigungen und Nachfrage.