timum Booking Call Backs

What callbacks are available in timum Booking Widgets?

The timum Booking Widget provides callbacks. The appropriate callback for redirecting after a booking is: createBookingSuccessfull .

Here is the complete documentation on callbacks in timum booking widgets: https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks

List of all callbacks: Booking related

• openedBookingPage
• closedBookingPage,
• createBookingStarted
• createBookingSuccessful
• createBookingFailed

Cancelation Related

• openedCancelPage
• closedCancelPage
• cancelationStarted
• cancelationSuccessful
• cancelationFailed

Dialog Related

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

What is the interface / example code to trigger our Meta Pixel or GA4 event?

It could look 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.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>

Is there a postMessage option from the iFrame (if the widget runs in an iFrame)?

The widget runs in a Shadow DOM for style isolation. If that is not sufficient, it can also be executed in an iFrame. A minimal configuration 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>

Here is the link to the relevant documentation:

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