[et_pb_section fb_built=“1″ specialty=“on“ module_class=“ et_pb_specialty_fullwidth“ _builder_version=“3.22″ inner_width=“89%“ inner_width_tablet=“80%“ inner_width_phone=““ inner_width_last_edited=“on|desktop“ inner_max_width=“89%“ inner_max_width_tablet=“80%“ inner_max_width_phone=““ inner_max_width_last_edited=“on|desktop“ make_fullwidth=“on“ global_colors_info=“{}“][et_pb_column type=“1_4″ _builder_version=“3.25″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_sidebar area=“sidebar-1″ disabled_on=“on|on|off“ _builder_version=“3.29.3″ custom_padding=“50px|||“ global_colors_info=“{}“][\/et_pb_sidebar][\/et_pb_column][et_pb_column type=“3_4″ specialty_columns=“3″ _builder_version=“3.25″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_row_inner admin_label=“Zeile“ _builder_version=“3.25″ global_colors_info=“{}“][et_pb_column_inner saved_specialty_column_type=“3_4″ _builder_version=“3.25″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_text admin_label=“Javascript Callbacks“ _builder_version=“3.29.3″ global_colors_info=“{}“]<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=“3.29.3″ custom_padding=“0px||20px“ hover_enabled=“0″ global_colors_info=“{}“ sticky_enabled=“0″]<\/p>\n
Mit Javascript Callbacks kann auf Ereignisse w\u00e4hrend des Buchungsvorgangs reagiert werden. Mit eigenem JavaScript Code k\u00f6nnen so Aktionen au\u00dferhalb von cituro ausgel\u00f6st werden (Bspw. auf der Elternseite, auf der das Buchungswidget eingebunden ist).<\/p>\n
<\/p>\n
Grunds\u00e4tzlich gibt es in cituro 2 verschiedene Javascript-Callback Varianten.<\/p>\n
\n1. Benachrichtigung der Elternseite per Javascript postmessage<\/a> [\/et_pb_text][et_pb_divider color=“#555555″ _builder_version=“3.5.1″ global_colors_info=“{}“][\/et_pb_divider][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=“Zeile“ _builder_version=“3.25″ global_colors_info=“{}“][et_pb_column_inner saved_specialty_column_type=“3_4″ _builder_version=“3.25″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_text admin_label=“Benachrichtigung der Elternseite per Javascript postmessage“ _builder_version=“3.29.3″ global_colors_info=“{}“]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=“3.29.3″ hover_enabled=“0″ global_colors_info=“{}“ sticky_enabled=“0″]<\/p>\n Das Buchungswidget benachrichtigt die Elternseite, auf der cituro als Overlay oder IFrame eingebunden ist \u00fcber wichtige Ereignisse w\u00e4hrend des Buchungsvorgangs \u00fcber Nachrichten. Entwickler k\u00f6nnen diese Nachrichten abonnieren, um Aktionen au\u00dferhalb von cituro auszul\u00f6sen bspw. Conversion-Tracking, Weiterleitungen auf andere Webseiten oder \u00c4nderungen auf der eigenen Seite.<\/p>\n Hinweis: <\/strong>F\u00fcr diesen Callback Mechanismus, ist keine zus\u00e4tzliche Konfiguration in cituro notwendig, sodass Sie das Verhalten komplett \u00fcber Code auf Ihrer eigenen Webseite steuern k\u00f6nnen.<\/p>\n Wir verwenden window.postMessage()<\/a> f\u00fcr das Senden von Ereignisnachrichten an die Elternseite. Das Die Ereignisnachricht beinhaltet ein Javascript Objekt mit folgendem Format:<\/p>\n [\/et_pb_text][et_pb_code module_class=“source_code“ _builder_version=“4.14.5″ hover_enabled=“0″ global_colors_info=“{}“ sticky_enabled=“0″]{\tsource:’cituro‘,\ttype:\u2039Event type\u203a,\tdata:\u2039Optional data object\u203a}[\/et_pb_code][et_pb_text _builder_version=“4.14.5″ hover_enabled=“0″ global_colors_info=“{}“ sticky_enabled=“0″]<\/p>\n Es gibt aktuell 3 verschiedene Ereignisse (Event types), die von uns publiziert werden: Um diese Ereignisnachrichten zu abonnieren muss auf der Elternseite, auf der das Buchungswidget eingebunden ist, ein Eventlistener f\u00fcr Nachrichten implementiert werden:<\/p>\n [\/et_pb_text][et_pb_code module_class=“source_code“ _builder_version=“3.29.3″ global_colors_info=“{}“]window.addEventListener(\t‚message‘,\tfunction(e) {\t\tif(e.data.event && e.data.event.source == ‚cituro‘){\t\t\t\/\/hier k\u00f6nnen Sie Ihren Trackingcode platzieren\t\t\tif(e.data.event.type == ‚onLoad<\/span>‚){\t\t\t\t\/\/Code f\u00fcr onLoad\t\t\t}\t\t\telse if(e.data.event.type == ‚onClose<\/span>‚){\t\t\t\t\/\/Code f\u00fcr onClose\t\t\t}\t\t\telse if(e.data.event.type == ‚onBookingCompleted<\/span>‚){\t\t\t\t\/\/Code f\u00fcr onBookingCompleted\t\t\t}\t\t}\t});[\/et_pb_code][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=“Zeile“ _builder_version=“3.25″ global_colors_info=“{}“][et_pb_column_inner saved_specialty_column_type=“3_4″ _builder_version=“3.25″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_text admin_label=“Interne Javascript Callbacks“ _builder_version=“3.29.3″ global_colors_info=“{}“]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=“3.29.3″ global_colors_info=“{}“]<\/p>\n Interne Javascript Callbacks k\u00f6nnen verwendet werden, um individuellen Code entweder beim Laden des Buchungswidgets oder beim erfolgreichen Abschluss einer Buchung auszuf\u00fchren. So k\u00f6nnen Entwickler Aktionen auszul\u00f6sen bspw. Conversion-Tracking, Weiterleitungen auf andere Webseiten oder \u00c4nderungen auf der eigenen Seite.<\/p>\n Hier finden Sie die Konfiguration f\u00fcr interne Callbacks: Hinweis: <\/strong>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\u00fchrt.<\/p>\n Eine beispielhafte Umsetzung f\u00fcr eine Weiterleitung nach der Buchung auf eine Dankesseite k\u00f6nnte so aussehen:<\/p>\n [\/et_pb_text][et_pb_code module_class=“source_code“ _builder_version=“3.29.3″ global_colors_info=“{}“]window.location.href = „https:\/\/www.mysite.com\/thanks-for-booking.html“;[\/et_pb_code][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner _builder_version=“3.25″ global_module=“491″ collapsed=“off“ global_colors_info=“{}“][et_pb_column_inner _builder_version=“3.25″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_divider color=“#555555″ divider_position=“center“ _builder_version=“4.12.1″ global_colors_info=“{}“][\/et_pb_divider][et_pb_text _builder_version=“4.14.5″ global_colors_info=“{}“]<\/p>\n [\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner column_structure=“1_2,1_2″ _builder_version=“3.25″ global_module=“487″ saved_tabs=“all“ global_colors_info=“{}“][et_pb_column_inner type=“1_2″ _builder_version=“3.25″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_blurb title=“E-Mail“ use_icon=“on“ font_icon=“||divi||400″ icon_color=“#555555″ _builder_version=“4.13.0″ header_level=“h3″ text_orientation=“center“ custom_padding=“10px|10px|10px|10px“ animation_style=“zoom“ box_shadow_style=“preset1″ global_colors_info=“{}“]<\/p>\n
\n2. Interne Javascript Callbacks<\/a><\/p>\nBenachrichtigung der Elternseite per Javascript postmessage<\/h2>\n
\nonLoad:<\/strong> Buchungswidget wurde ge\u00f6ffnet und vollst\u00e4ndig geladen.
\nonBookingCompleted:<\/strong> Buchungsvorgang wurde erfolgreich mit einer Buchung abgeschlossen.
\nonClose:<\/strong> Buchungswidget wurde geschlossen.\n<\/p>\nInterne Javascript Callbacks<\/h2>\n
\nMen\u00fc<\/strong> \u2192 Onlinebuchung<\/strong> \u2192 Callbacks<\/strong><\/p>\nSie haben Fragen? Wir helfen gerne!<\/h2>\n