iFrame-Embed einbauen

iFrame-Embed

Ihre gehostete Buchungsseite liegt unter https://ihr-slug.platzeo.de. Für das Einbinden in Ihre eigene Website gibt es eine Variante zum Einbetten: https://ihr-slug.platzeo.de/embed.

Ersetzen Sie ihr-slug überall durch den Slug Ihres Restaurants. Den fertigen Code mit Ihrem Slug finden Sie im Admin unter Buchungsseite → Widgets im Abschnitt Widgets & Integration.

Snippet

<iframe
  data-platzeo-embed
  src="https://ihr-slug.platzeo.de/embed?id=reservierung&theme=auto"
  title="Reservierung"
  style="width:100%;border:0;min-height:560px"></iframe>
<script async src="https://platzeo.de/widget.js"></script>

Das Attribut data-platzeo-embed sorgt dafür, dass widget.js den iFrame erkennt und die Höhe automatisch anpasst – in jedem Schritt der Buchung, ohne Scrollbalken im iFrame. Die min-height im Snippet hält nur den Platz frei, bis der iFrame seine Höhe meldet; danach ist er so hoch wie sein Inhalt.

Ohne das Skript bleibt die Höhe fest. Das Formular ist je nach Schritt und Bildschirmbreite zwischen etwa 900 und 1400 px hoch; was nicht in eine feste Höhe passt, scrollt im iFrame.

Laden Sie widget.js von platzeo.de und nicht als Kopie von Ihrem eigenen Server.

Geben Sie dem iFrame mindestens 340 px Breite. 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 seamless=1 liegt diese Grenze bei 300 px.

URL-Parameter

Alle Parameter sind optional und werden an /embed?… angehängt. Groß- und Kleinschreibung der Werte spielt keine Rolle.

• id – Instanz-Kennung, wird in allen Events mitgeschickt. Je Seite eindeutig und höchstens 64 Zeichen lang. Fehlt sie, vergibt widget.js eine (platzeo-1, platzeo-2, …).
• theme – light, dark oder auto (folgt der Systemeinstellung des Gastes)
• primary – sechsstellige Hex-Farbe wie 14422b, überschreibt Ihre Primärfarbe. Schreiben Sie sie in der Adresse ohne #: Mit einem # endet dort der Teil, den der Browser an den Server sendet. Andere Schreibweisen werden ignoriert, ebenso eine Farbe, die sich vom Hintergrund des Formulars nicht abhebt (etwa Weiß im hellen Theme).
• lang – de oder en, überschreibt die Sprache der Buchungsseite
• compact=1 – blendet den Kopfbereich (Logo, Willkommenstext, Adresse) aus
• seamless=1 – transparenter Hintergrund ohne Karte und Schatten, fügt sich in Ihr Layout ein. Welches Theme der iFrame dann nimmt, steht unten unter Theming.
• sections – zeigt unter dem Tischformular zusätzlich activities (Ihre Aktivitäten), events (Ihre Veranstaltungen) oder beides: sections=activities,events oder sections=all. Ohne den Parameter zeigt der iFrame nur das Tischformular. Anmeldung und Buchung öffnen sich im iFrame an Ort und Stelle.

Beispiel: https://ihr-slug.platzeo.de/embed?lang=en&theme=dark&compact=1

Events

widget.js löst auf document zwei Events aus, z. B. für Analytics oder eigene Dankeseiten:

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.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 der iFrame 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.

Theming

Der iFrame verwendet Ihr komplettes Design aus dem Admin (Farben, Schrift, Ecken, eigenes CSS). Über primary, theme und seamless passen Sie die Darstellung pro Einbindung an, ohne die Einstellungen im Admin zu ändern.

Mit seamless=1 ist der Hintergrund des iFrames durchsichtig, die Schrift steht also auf dem Hintergrund Ihrer Website. Das Theme folgt dann nicht dem Gerät des Gastes, sondern Ihrer Seite:

• Mit widget.js auf der Seite (wie im Snippet oben) erkennt das Skript, ob der Hintergrund hinter dem iFrame hell oder dunkel ist, und der iFrame nimmt das passende Theme.
• Ohne widget.js sieht der iFrame Ihre Seite nicht. Er nimmt das helle Theme, auch bei theme=auto. Hat Ihre Website einen dunklen Hintergrund, geben Sie theme=dark an.
• Ist das Theme Ihrer Buchungsseite dunkel und die Adresse nennt keines, behält der iFrame ohne widget.js seinen dunklen Hintergrund. Helle Schrift auf einer Seite, die er nicht kennt, wäre oft nicht lesbar. Mit theme=dark oder theme=light ist er immer durchsichtig.

Die Erkennung liest Hintergrundfarben und Farbverläufe. Ein Hintergrundbild ohne Hintergrundfarbe auf demselben Element und ein Verlauf von hell nach dunkel gelten als unbekannt: Das Formular behält dann seinen eigenen Hintergrund, und widget.js meldet das in der Browser-Konsole. Geben Sie in diesem Fall theme=light oder theme=dark an.

Deklariert Ihre Website color-scheme: dark, legt der Browser unter einen iFrame ohne widget.js eine weiße Fläche. Ergänzen Sie dann color-scheme:light im style des iFrames.

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. Blockiert die Policy den iFrame, zeigt widget.js an seiner Stelle einen Link zu Ihrer Buchungsseite.

Fehlerbehebung

• Der iFrame zeigt Buchung derzeit nicht verfügbar? Dann ist die Online-Buchung im Admin ausgeschaltet oder pausiert, oder der Slug in der Adresse stimmt nicht.
• Der iFrame hat einen Scrollbalken? Dann fehlt widget.js oder das Attribut data-platzeo-embed.