timum Booking Callbacks

Welche Callbacks gibt es im timum Booking Widget?

Das timum Booking Widget stellt Callbacks zur Verfügung, mit denen Sie auf Ereignisse reagieren können – zum Beispiel, um nach einer Buchung weiterzuleiten oder ein Tracking-Ereignis auszulösen. Der passende Callback für die Weiterleitung nach der Buchung ist createBookingSuccessful.

Die vollständige Dokumentation zu Callbacks: https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks bzw. Callbacks in der Entwickler-Dokumentation.

Buchung

• openedBookingPage
• closedBookingPage
• createBookingStarted
• createBookingSuccessful
• createBookingFailed

Stornierung

• openedCancelPage
• closedCancelPage
• cancelationStarted
• cancelationSuccessful
• cancelationFailed

Dialoge

• openedProductSelection
• openedResourceSelection
• openedConfirmationPage
• closedProductSelection
• closedResourceSelection
• closedConfirmationPage

Beispiel: Meta-Pixel oder GA4-Ereignis nach der Buchung auslösen

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.init({
    ref: 'booking-widget-demo-resource@timum',
    callbacks: {
	      createBookingSuccessful: ({timeslot, data}) => {
        // pseudoCode:
        doAnalytics("event booked", {
           customerName: data.lastName,
           customerFirstName: data.firstName,
           customerEMail: data.email,
           start: timeslot.start.toFormat('llll'),
           end: timeslot.end.toFormat('llll')
        });
      },
      // NOTE: Consider adding other related callbacks if needed.
    },
  });
</script>

Widget im iFrame: Ereignisse per postMessage

Das Widget läuft im Shadow DOM zur Style-Isolation. Falls das nicht reicht, kann es auch in einem iFrame ausgeführt werden. Eine minimale Konfiguration sieht dann wie folgt aus:

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.initialise({ //!! different function call - renders bookingjs in iframe!!
    ref: 'booking-widget-demo-resource@timum',

    //This setting overrides all callabacks,they will trigger the postMessage API instead.
    //The event.data object includes all parameters typically passed to callback functions,
    // along with an origin field (always "bookingjs") and a type field that indicates the event's name.
    //This type matches the name of the callback function you would use in a non-iframe scenario.
    postMessageTarget: "https://my-parent-website.de"
  });
</script>

Die relevante Dokumentation: https://www.npmjs.com/package/@timum/booking?activeTab=readme#appconfig