Callbacks timum Booking

Quels callbacks propose le widget timum Booking ?

Le widget timum Booking met à disposition des callbacks qui vous permettent de réagir à des événements – par exemple pour rediriger après une réservation ou déclencher un événement de suivi. Le callback approprié pour la redirection après la réservation est createBookingSuccessful.

Documentation complète sur les callbacks : https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks ou Callbacks dans la documentation développeur.

Réservation

• openedBookingPage
• closedBookingPage
• createBookingStarted
• createBookingSuccessful
• createBookingFailed

Annulation

• openedCancelPage
• closedCancelPage
• cancelationStarted
• cancelationSuccessful
• cancelationFailed

Boîtes de dialogue

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

Exemple : déclencher un événement Meta Pixel ou GA4 après la réservation

<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 dans un iFrame : événements via postMessage

Le widget s'exécute dans le Shadow DOM pour l'isolation des styles. Si cela ne suffit pas, il peut également être exécuté dans un iFrame. Une configuration minimale se présente alors comme suit :

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

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