timum Booking Call Backs

Quali callback sono disponibili nei widget di prenotazione timum?

Il widget di prenotazione timum mette a disposizione dei callback. Il callback appropriato per il reindirizzamento dopo la prenotazione è: createBookingSuccessfull .

Ecco la documentazione completa sui callback nei widget di prenotazione timum: https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks

Elenco di tutti i callback: Booking related

openedBookingPage
closedBookingPage,
createBookingStarted
createBookingSuccessful
createBookingFailed

Cancelation Related

openedCancelPage
closedCancelPage
cancelationStarted
cancelationSuccessful
cancelationFailed

Dialog Related

openedProductSelection
openedResourceSelection
openedConfirmationPage
closedProductSelection
closedResourceSelection
closedConfirmationPage

Qual è l'interfaccia / il codice di esempio per attivare il nostro Meta Pixel o l'evento GA4?

Potrebbe apparire così:

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

Esiste l'opzione postMessage dall'iFrame (se il widget viene eseguito in un iFrame)?

Il widget viene eseguito in Shadow DOM per l'isolamento degli stili. Se ciò non è sufficiente, può essere eseguito anche in un iFrame. Una configurazione minima si presenta come segue:

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

Ecco il link alla documentazione pertinente:

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