timum Booking Call Backs

Welche Callbacks gibt es in timum Booking Widgets?

Das timum Booking Widget stellt Callbacks zur Verfügung. Der passende Callback für die Weiterleitung nach der Buchung ist: createBookingSuccessfull .

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

Liste aller Callbacks: Booking related

• openedBookingPage
• closedBookingPage,
• createBookingStarted
• createBookingSuccessful
• createBookingFailed

Cancelation Related

• openedCancelPage
• closedCancelPage
• cancelationStarted
• cancelationSuccessful
• cancelationFailed

Dialog Related

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

Wie lautet die Schnittstelle / Beispiel-Code, damit wir darauf unser Meta-Pixel bzw. GA4-Event auslösen können?

Das könnte so aussehen:

<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',
    callback: {
      createBookingSuccessfull: ({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>

Gibt es die Option postMessage vom iFrame (falls das Widget in einem iFrame läuft)

Das Widget läuft im Shadow DOM zur Style Isolation. Falls das nicht reicht, kann es auch in einem IFrame ausgeführt werden. Eine minimal 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>

Hier der Link zur relevanten Doku:

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