timum Booking Call Backs

Quels callbacks sont disponibles dans les widgets de réservation timum ?

Le widget de réservation timum met des callbacks à disposition. Le callback approprié pour la redirection après la réservation est : createBookingSuccessfull .

Voici la documentation complète sur les callbacks dans les widgets de réservation timum : https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks

Liste de tous les callbacks : Booking related

• openedBookingPage
• closedBookingPage,
• createBookingStarted
• createBookingSuccessful
• createBookingFailed

Cancelation Related

• openedCancelPage
• closedCancelPage
• cancelationStarted
• cancelationSuccessful
• cancelationFailed

Dialog Related

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

Quelle est l'interface / le code d'exemple pour déclencher notre Meta Pixel ou un événement GA4 ?

Cela pourrait ressembler à ceci :

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

Existe-t-il une option postMessage depuis l'iFrame (si le widget s'exécute dans un iFrame) ?

Le widget s'exécute dans un 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 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>

Voici le lien vers la documentation pertinente :

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