timum Booking Call Backs

¿Qué callbacks existen en los widgets de reserva de timum?

El widget de reserva de timum proporciona callbacks. El callback adecuado para la redirección tras la reserva es: createBookingSuccessfull .

Aquí está la documentación completa sobre los callbacks en los widgets de reserva de timum: https://www.npmjs.com/package/@timum/booking?activeTab=readme#how-to-use-callbacks

Lista de todos los callbacks: Booking related

openedBookingPage
closedBookingPage,
createBookingStarted
createBookingSuccessful
createBookingFailed

Cancelation Related

openedCancelPage
closedCancelPage
cancelationStarted
cancelationSuccessful
cancelationFailed

Dialog Related

openedProductSelection
openedResourceSelection
openedConfirmationPage
closedProductSelection
closedResourceSelection
closedConfirmationPage

¿Cuál es la interfaz / el código de ejemplo para activar nuestro Meta Pixel o el evento de GA4?

Podría verse así:

<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 la opción de postMessage desde el iFrame (si el widget se ejecuta en un iFrame)?

El widget se ejecuta en Shadow DOM para el aislamiento de estilos. Si esto no es suficiente, también puede ejecutarse en un iFrame. Una configuración mínima tiene 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>

Aquí el enlace a la documentación relevante:

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