Javascript Callbacks für die Onlinebuchung

Mit Javascript Callbacks kann auf Ereignisse während des Buchungsvorgangs reagiert werden. Mit eigenem JavaScript Code können so Aktionen außerhalb von cituro ausgelöst werden (Bspw. auf der Elternseite, auf der das Buchungswidget eingebunden ist).

Grundsätzlich gibt es in cituro 2 verschiedene Javascript-Callback Varianten.

1. Benachrichtigung der Elternseite per Javascript postmessage
2. Interne Javascript Callbacks

Benachrichtigung der Elternseite per Javascript postmessage

Das Buchungswidget benachrichtigt die Elternseite, auf der cituro als Overlay oder IFrame eingebunden ist über wichtige Ereignisse während des Buchungsvorgangs über Nachrichten. Entwickler können diese Nachrichten abonnieren, um Aktionen außerhalb von cituro auszulösen bspw. Conversion-Tracking, Weiterleitungen auf andere Webseiten oder Änderungen auf der eigenen Seite.

Hinweis: Für diesen Callback Mechanismus, ist keine zusätzliche Konfiguration in cituro notwendig, sodass Sie das Verhalten komplett über Code auf Ihrer eigenen Webseite steuern können.

Wir verwenden window.postMessage() für das Senden von Ereignisnachrichten an die Elternseite. Das Die Ereignisnachricht beinhaltet ein Javascript Objekt mit folgendem Format:

Es gibt aktuell 3 verschiedene Ereignisse (Event types), die von uns publiziert werden:
onLoad: Buchungswidget wurde geöffnet und vollständig geladen.
onBookingComplete: Buchungsvorgang wurde erfolgreich mit einer Buchung abgeschlossen.
onClose: Buchungswidget wurde geschlossen.

Um diese Ereignisnachrichten zu abonnieren muss auf der Elternseite, auf der das Buchungswidget eingebunden ist, ein Eventlistener für Nachrichten implementiert werden:

Interne Javascript Callbacks

Interne Javascript Callbacks können verwendet werden, um individuellen Code entweder beim Laden des Buchungswidgets oder beim erfolgreichen Abschluss einer Buchung auszuführen. So können Entwickler Aktionen auszulösen bspw. Conversion-Tracking, Weiterleitungen auf andere Webseiten oder Änderungen auf der eigenen Seite.

Hier finden Sie die Konfiguration für interne Callbacks:
Menü → Onlinebuchung → Callbacks

Hinweis: Der Javascript Code ist ohne <script> Tag anzugeben und wie der Inhalt einer Javascript Funktion zu schreiben. Der Code wird je Nach Art der Integration entweder auf der Elternseite (Bei Integration via Overlay) oder innerhalb unserer Buchungsseite (Integration per IFrame oder per Link) ausgeführt.

Eine beispielhafte Umsetzung für eine Weiterleitung nach der Buchung auf eine Dankesseite könnte so aussehen:

Klingt kompliziert? Wir helfen gerne!