JavaScript-Widget

Das Widget bindet die Buchungsseite an einer beliebigen Stelle Ihrer Website ein. Es lädt https://ihr-slug.platzeo.de/embed in einen iFrame, kümmert sich um die automatische Höhe und stellt Events bereit.

Snippet

<div data-platzeo-booking="ihr-slug"></div>
<script async src="https://platzeo.de/widget.js"></script>

Fertig. Das Skript sucht beim Laden alle Elemente mit data-platzeo-booking und setzt dort Ihre Buchungsseite als iFrame ein. Mehrere Widgets auf einer Seite sind möglich.

Laden Sie das Skript von platzeo.de und nicht als Kopie von Ihrem eigenen Server oder aus einem Bundle: Es sucht die Buchungsseite neben der Adresse, von der es geladen wurde, und eine Kopie erhält keine Korrekturen. Setzen Sie deshalb auch kein integrity-Attribut.

Der Slug besteht aus Kleinbuchstaben, Ziffern und Bindestrichen. Bei jedem anderen Wert bindet das Skript nichts ein und meldet das in der Browser-Konsole.

Das Widget ist so breit wie das <div>. Geben Sie ihm mindestens 340 px. In einer schmaleren Spalte passt das Formular weiter ohne Scrollen zur Seite, die Tage im Kalender sind dann aber schmaler als 40 px und mit dem Finger schlechter zu treffen. Mit data-seamless="1" liegt diese Grenze bei 300 px.

Konfiguration

Optionen als data-Attribute auf dem <div>. Groß- und Kleinschreibung der Werte spielt keine Rolle.

• data-theme – light, dark oder auto (folgt der Systemeinstellung des Gastes)
• data-primary – sechsstellige Hex-Farbe wie #14422b, überschreibt Ihre Primärfarbe. Andere Schreibweisen werden ignoriert, ebenso eine Farbe, die sich vom Hintergrund des Formulars nicht abhebt (etwa Weiß im hellen Theme).
• data-lang – de oder en. Ohne Angabe gilt die Sprache Ihrer Buchungsseite.
• data-compact="1" – blendet den Kopfbereich (Logo, Willkommenstext, Adresse) aus
• data-seamless="1" – transparenter Hintergrund ohne Karte, fügt sich in Ihr Layout ein. Das Theme richtet sich dann nach dem Hintergrund Ihrer Seite (dunkle Seite, dunkles Theme) und nicht nach dem Gerät des Gastes. Mit data-theme="light" oder "dark" legen Sie es selbst fest. Das Skript liest dafür Hintergrundfarben und Farbverläufe. Bei einem Hintergrundbild ohne Hintergrundfarbe oder einem Verlauf von hell nach dunkel kann es nicht entscheiden: Das Widget behält dann seinen eigenen Hintergrund und meldet das in der Browser-Konsole, bis Sie data-theme angeben.
• data-sections – zeigt unter dem Tischformular zusätzlich Ihre Aktivitäten (activities), Ihre Veranstaltungen (events) oder beides (activities,events oder all). Standard: nur das Tischformular.
• data-id – Instanz-Kennung, wird in Events mitgeschickt (Standard: platzeo-1, platzeo-2, …). Je Seite eindeutig und höchstens 64 Zeichen lang.
• data-min-height – Höhe in px, bevor die erste Höhenmeldung eintrifft (Standard: 560). Danach ist das Widget so hoch wie sein Inhalt.
• data-scroll-offset – Platz in px, der oben frei bleibt, wenn die Seite nach einem Schritt an den Anfang des Formulars springt. Eine Kopfzeile, die beim Scrollen stehen bleibt, erkennt das Widget in der Regel selbst; scroll-margin-top auf dem <div> wirkt genauso.

Beispiel:

<div data-platzeo-booking="ihr-slug"
     data-theme="auto"
     data-primary="#14422b"
     data-lang="en"
     data-compact="1"></div>
<script async src="https://platzeo.de/widget.js"></script>

JavaScript-API

Für dynamisch gerenderte Seiten (SPA, Tabs, Modals) steht window.Platzeo bereit:

// Widget in ein Element mounten (Element oder CSS-Selektor).
// Ein zweiter Aufruf für dasselbe Element ersetzt das Widget.
Platzeo.mount("#reservierung", "ihr-slug", {
  theme: "auto",
  primary: "#14422b",
  lang: "de",
  compact: false,
  seamless: false,
  sections: "events",
  id: "reservierung",
  minHeight: 560,
  scrollOffset: 80,
});

// Widget wieder entfernen
Platzeo.unmount("#reservierung");

// Neu hinzugefügte data-platzeo-booking-Elemente einsammeln
Platzeo.refresh();

Das Skript lädt asynchron, window.Platzeo gibt es also erst, wenn es gelaufen ist. Über window.platzeoReady läuft Ihr Code, sobald das Widget bereit ist, egal ob er vor oder nach dem Skript steht:

<div id="reservierung"></div>
<script>
  (window.platzeoReady = window.platzeoReady || []).push(function (Platzeo) {
    Platzeo.mount("#reservierung", "ihr-slug");
  });
</script>
<script async src="https://platzeo.de/widget.js"></script>

Events abonnieren

Das Widget löst auf document zwei Events aus – z. B. für Analytics oder eine eigene Dankeseite:

document.addEventListener("platzeo:booking-confirmed", (e) => {
  // e.detail = { id: "reservierung", slug: "ihr-slug", step: "done", status: "confirmed" }
  // status: "confirmed" | "pending" | "unverified"
});

document.addEventListener("platzeo:step-changed", (e) => {
  // e.detail = { id, slug, step }
  // step: "datetime" | "guest" | "confirm" | "done"
});

platzeo:step-changed kommt beim Laden des Formulars mit datetime und danach bei jedem Schritt. Nimmt Ihr Restaurant gerade keine Online-Buchungen an, zeigt das Widget einen Hinweis statt des Formulars und löst kein Event aus.

platzeo:booking-confirmed kommt, sobald der Gast das Formular abgeschickt hat, auch wenn die Reservierung noch nicht fest ist. status sagt, was der Gast jetzt hat:

• confirmed – eine bestätigte Reservierung
• pending – eine Anfrage, die Sie noch annehmen müssen
• unverified – der Gast muss erst seine E-Mail-Adresse bestätigen

Soll Ihre Statistik nur feste Buchungen zählen, werten Sie status === "confirmed" aus.

Der Zurück-Button des Browsers führt im Formular einen Schritt zurück. Ist die Buchung abgeschickt, führt er wieder zur vorherigen Seite.

Content-Security-Policy

Setzt Ihre Website eine Content-Security-Policy, braucht sie zwei Einträge: script-src https://platzeo.de für das Skript und frame-src https://ihr-slug.platzeo.de für den iFrame (für mehrere Restaurants: https://*.platzeo.de). Blockiert die Policy den iFrame, zeigt das Widget an seiner Stelle einen Link zu Ihrer Buchungsseite. Blockiert sie das Skript, bleibt das <div> leer.

Eigener iFrame?

Wenn Sie den iFrame selbst schreiben möchten, ergänzen Sie data-platzeo-embed – dann übernimmt widget.js Höhe und Events auch dort. Details im Artikel iFrame-Embed einbauen.