Callbacks de timum Booking

¿Qué callbacks ofrece el widget timum Booking?

El widget timum Booking pone a su disposición callbacks con los que puede reaccionar a eventos, por ejemplo, para redirigir tras una reserva o desencadenar un evento de seguimiento. El callback adecuado para la redirección tras la reserva es createBookingSuccessful.

Documentación completa sobre los callbacks: https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks o Callbacks en la documentación para desarrolladores.

Reserva

• openedBookingPage
• closedBookingPage
• createBookingStarted
• createBookingSuccessful
• createBookingFailed

Cancelación

• openedCancelPage
• closedCancelPage
• cancelationStarted
• cancelationSuccessful
• cancelationFailed

Cuadros de diálogo

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

Ejemplo: activar un evento de Meta Pixel o GA4 tras la reserva

<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 en un iFrame: eventos mediante postMessage

El widget se ejecuta en el Shadow DOM para aislar los estilos. Si esto no es suficiente, también se puede ejecutar en un iFrame. Una configuración mínima tendría el siguiente aspecto:

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

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