timum Booking Callbacks

What callbacks does the timum Booking Widget offer?

The timum Booking Widget provides callbacks that let you respond to events – for example, to redirect after a booking or trigger a tracking event. The appropriate callback for redirecting after the booking is createBookingSuccessful.

The full documentation on callbacks: https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks or Callbacks in the developer documentation.

Booking

• openedBookingPage
• closedBookingPage
• createBookingStarted
• createBookingSuccessful
• createBookingFailed

Cancellation

• openedCancelPage
• closedCancelPage
• cancelationStarted
• cancelationSuccessful
• cancelationFailed

Dialogs

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

Example: triggering a Meta Pixel or GA4 event after booking

<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 in an iFrame: events via postMessage

The widget runs in the Shadow DOM for style isolation. If that isn't enough, it can also be run inside an iFrame. A minimal configuration then looks like this:

<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>

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