Demo: Standard – od

So baust du den Code ein

Der Code wird direkt vor dem schließenden </body>-Tag eingefügt – auf jeder Seite, auf der die Buchung verfügbar sein soll. Am einfachsten im gemeinsamen Footer deiner Website, dann ist er automatisch auf allen Seiten.

1. Code kopieren und ID eintragen

Ersetze DEINE-BOOKING-FLOW-ID durch deine Booking-Flow-ID aus der Bookings-Verwaltung.

2. Vor </body> einfügen

So sieht das auf deiner Seite aus. Zum Ausprobieren kannst du auch die komplette Beispielseite kopieren, als .html-Datei speichern und im Browser öffnen.

In deinem CMS oder Baukasten

WordPress: über ein Plugin für eigenen Header- und Footer-Code oder in der footer.php deines Themes direkt vor </body>
TYPO3, Joomla & andere CMS: im Feld für eigene Footer-Scripts oder in einem HTML-Element
Website-Baukästen: in den Einstellungen für eigenen Code im Footer bzw. in einem HTML-/Code-Element

Füge den Code nur einmal pro Seite ein. Er lädt asynchron und bremst deine Seite nicht aus.

Button und Sprechblase anpassen

Jede Einstellung ist eine Zeile im Snippet – füge sie direkt unter der Zeile mit deiner ID ein. Liegt z. B. ein Chat-Widget oder Cookie-Hinweis in der Ecke, rück den Button einfach zur Seite.

Schließen Besucher die Sprechblase, bleibt sie für die aktuelle Browser-Sitzung ausgeblendet.
Ohne brandColor bzw. colorScheme werden Farbe und Farbschema aus deinen Bookings-Einstellungen verwendet.

Alle Einstellungen

Jede Einstellung wird als c.push(['schlüssel', wert]); im Snippet gesetzt – bevor das Script geladen wird. Einstellungen im Snippet haben immer Vorrang vor den Werten aus deinen Bookings-Einstellungen.

Schlüssel	Typ	Standard	Beschreibung
`bookingFlowId`Pflicht*	string	–	Die ID der Buchungsstrecke, die geöffnet wird.
`accountId`Pflicht*	string	–	Statt `bookingFlowId`: zeigt die Auswahl aller Buchungsstrecken deines Accounts. Sind beide gesetzt, gewinnt `bookingFlowId`.
`brandColor`	string	`'#306f82'`	Markenfarbe als CSS-Farbe. Ohne Angabe wird die Farbe aus deinen Bookings-Einstellungen verwendet.
`colorScheme`	'system' \| 'light' \| 'dark'	`'system'`	Farbschema der Buchung. Ohne Angabe wird das Farbschema aus deinen Bookings-Einstellungen verwendet.
`customButtonSelector`	string	`'[data-oddc-open-bookings-modal]'`	CSS-Selektor für eigene Buttons. Gibt es passende Elemente, entfällt der schwebende Button.
`customInlineDivSelector`	string	`'[data-oddc-bookings-embed]'`	CSS-Selektor für Elemente, in die die Buchung eingebettet wird. Gibt es passende Elemente, entfällt der schwebende Button.
`inlineMinWidth`	number	`1200`	Mindestbreite des Bildschirms (px) für die eingebettete Buchung – darunter öffnet ein Button sie im Vollbild.
`disableCallToAction`	boolean	`false`	Blendet die Sprechblase neben dem schwebenden Button aus.
`buttonMarginRight`	string	`'15px'`	Abstand des schwebenden Buttons zum rechten Rand.
`buttonMarginBottom`	string	`'15px'`	Abstand des schwebenden Buttons zum unteren Rand.
`callToActionMarginRight`	string	`'100px'`	Abstand der Sprechblase zum rechten Rand.
`callToActionMarginBottom`	string	`'30px'`	Abstand der Sprechblase zum unteren Rand.
`borderRadius`	string	`'5px'`	Eckenradius der Sprechblase.
`buttonZIndex`	number	`1035`	`z-index` von Button und Sprechblase.
`modalZIndex`	number	`1040`	`z-index` der Vollbild-Ansicht.
`fetchConfig`	boolean	`true`	Lädt deine Bookings-Einstellungen (z. B. die Markenfarbe). Nur in Sonderfällen deaktivieren.
`bookingsStartUrl`	string	automatisch	Start-URL der Buchung. Wird aus der ID ermittelt – nur für Sonderfälle.

* Genau eine der beiden IDs ist erforderlich.

Nachrichten zwischen Seite und Buchung

Deine Seite und die Buchung im iframe tauschen Nachrichten per postMessage aus – nur mit dem Origin der bookingsStartUrl. Jede Nachricht ist ein Objekt mit type und den Feldern, z. B. { type: 'bookings:frame-height', height: 812 }. Ob die Buchung eingebettet ist, teilt ihr die Seite mit bookings:embedded mit: eingebettet (embedded: true) ist sie nur in der eingebetteten Buchung; im Vollbild der eingebetteten Buchung und im Vollbild des Buttons ist sie nicht eingebettet (embedded: false).

Die Buchung sendet – die Seite hört

Nachricht	Felder	Eingebettet	Nicht eingebettet
`bookings:ready`	–	Die Buchung ist geladen – einmal pro Laden des iframes. Die Seite antwortet mit `bookings:embedded` (`true`) und `bookings:frame-viewport`.	Wie eingebettet. Die Seite antwortet mit `bookings:embedded` (`false`).
`bookings:frame-height`	height	Höhe des Inhalts in px, bei jeder Änderung – das iframe wird so hoch wie die Buchung.	Wird nicht gesendet – das Vollbild ist so hoch wie der Bildschirm.
`bookings:navigation`	–	Ein neuer Schritt. Ist der Anfang der Buchung aus dem Bild gescrollt, scrollt die Seite zurück.	Wird nicht gesendet.
`bookings:frame-backdrop`	visible, color	Ein Sheet ist geöffnet bzw. geschlossen: Die Seite wird in `color` abgedunkelt und gesperrt, das iframe bedeckt den Bildschirm.	Wird nicht gesendet – nur ein letztes `visible: false`, wenn beim Wechsel ins Vollbild ein Sheet offen war.
`bookings:booking-succeeded`	–	Die Buchung war erfolgreich – bevor die Erfolgsseite erscheint. Zum Zählen einer Conversion; `bookings.js` selbst reagiert nicht darauf.	Wie eingebettet.
`bookings:booking-failed`	–	Die Buchung ist fehlgeschlagen (z. B. Termin vergeben, keine Verbindung). Besucher können es erneut versuchen – auf einige `booking-failed` kann noch ein `booking-succeeded` folgen. `bookings.js` selbst reagiert nicht darauf.	Wie eingebettet.

Erfolgreiche und fehlgeschlagene Buchungen kannst du auf deiner Seite selbst auswerten, z. B. für dein Conversion-Tracking. Die Nachrichten enthalten keine Daten zu Patient oder Termin; Umbuchungen und Absagen senden keine.

Die Seite sendet – die Buchung hört

Nachricht	Felder	Eingebettet	Nicht eingebettet
`bookings:embedded`	embedded	`embedded: true` – als Antwort auf `bookings:ready` und beim Verlassen des Vollbilds.	`embedded: false` – als Antwort auf `bookings:ready` und beim Öffnen des Vollbilds.
`bookings:frame-viewport`	top, height	Der sichtbare Teil des iframes in px – bei `bookings:ready`, beim Scrollen, bei Größenänderungen und beim Verlassen des Vollbilds.	Wird nicht gesendet.
`bookings:frame-backdrop-click`	–	Klick auf die abgedunkelte Seite – wie ein Klick auf den Hintergrund des Sheets.	Wird nicht gesendet – die Seite ist nicht abgedunkelt.

Häufige Fragen

Verändert das Script das Aussehen meiner Website?

Nein. Button, Sprechblase und Buchung sind gekapselte Web Components mit Shadow DOM. Es werden keine globalen Styles gesetzt und keine fremden Elemente verändert – dein Layout bleibt, wie es ist.

Funktioniert das auch mit React, Vue, Angular & Co.?

Ja. Klicks auf eigene Buttons werden auch erkannt, wenn die Buttons erst später gerendert werden. Ob der schwebende Button angezeigt wird und wo die Buchung eingebettet wird, entscheidet das Script beim Laden – lade das Snippet also, nachdem deine Buttons bzw. Platzhalter im DOM stehen. Alternativ öffnest du die Buchung per JavaScript: document.dispatchEvent(new CustomEvent('oddcBfMainButtonClick')) – erst nachdem das Script geladen ist, also z. B. in einem Klick-Handler.

Kann ich mehrere Buttons oder Platzhalter auf einer Seite haben?

Ja – jedes Element, das zum Selektor passt, öffnet die Buchung bzw. erhält eine eingebettete Buchung.

Muss ich mein Snippet nach Updates anpassen?

Nein. Wir halten die Einbindung dauerhaft abwärtskompatibel: Einstellungen, Selektoren und Events bleiben erhalten. Neue Funktionen sind immer optional. Das Aussehen von Button und Buchung kann sich mit Updates weiterentwickeln.

Setzt das Script Cookies?

Nein. Schließt ein Besucher die Sprechblase, merkt sich das Script das nur für die aktuelle Browser-Sitzung im sessionStorage (Schlüssel oddcBfCtaDisabled).

Was passiert in sehr alten Browsern?

Unterstützt ein Browser die nötigen Funktionen nicht, zeigt das Script einfach nichts an. Deine Seite funktioniert ganz normal weiter.

Standard-Einbindung als schwebender Button