Callback di timum Booking

Quali callback offre il widget timum Booking?

Il widget timum Booking mette a disposizione callback che Le consentono di reagire agli eventi, ad esempio per effettuare un reindirizzamento dopo una prenotazione o attivare un evento di tracciamento. Il callback adatto per il reindirizzamento dopo la prenotazione è createBookingSuccessful.

Documentazione completa sui callback: https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks oppure Callback nella documentazione per sviluppatori.

Prenotazione

openedBookingPage
closedBookingPage
createBookingStarted
createBookingSuccessful
createBookingFailed

Annullamento

openedCancelPage
closedCancelPage
cancelationStarted
cancelationSuccessful
cancelationFailed

Finestre di dialogo

openedProductSelection
openedResourceSelection
openedConfirmationPage
closedProductSelection
closedResourceSelection
closedConfirmationPage

Esempio: attivare un evento Meta Pixel o GA4 dopo la prenotazione

<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 un iFrame: eventi tramite postMessage

Il widget viene eseguito nello Shadow DOM per l'isolamento degli stili. Se ciò non fosse sufficiente, può essere eseguito anche in un iFrame. Una configurazione minima si presenta quindi così:

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

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