Callbacks

Esta página describe cómo puede utilizar los callbacks en BookingJs para reaccionar a eventos de reserva, como reservas exitosas o cancelaciones.

Resumen

Con los callbacks, puede ejecutar código personalizado cuando se producen determinados eventos en el widget. Esto es útil para la analítica, las redirecciones o la integración con otros sistemas.

Callbacks relacionados con la reserva

Parámetros

Todos los callbacks relacionados con la reserva reciben un objeto con:

{
  timeslot: {
    start: DateTime,           // Luxon DateTime
    end: DateTime,
    timeslot_uuid: string,     // UUID de la cita
    product_uuid: string,      // UUID del producto
    product_name: string,
    resource_name: string,
    capacity: number,
    capacity_left: number,
    kind: 'models.Bookable' | 'models.LotAppointment',
    untouchedStart: string,    // Cadena ISO
    untouchedEnd: string
  },
  data: {
    firstName: string,
    lastName: string,
    email: string,
    agbs: boolean,
    // + campos personalizados
  },
  response?: RTKQResponse       // Solo para Successful/Failed
}

Ejemplo

timum.init({
  ref: 'ihre-ressourcen-referenz',
  callbacks: {
    createBookingSuccessful: ({ timeslot, data, response }) => {
      // Evento de analítica
      gtag('event', 'booking_complete', {
        resource: timeslot.resource_name,
        product: timeslot.product_name,
        customer_email: data.email
      });

      // Opcional: redirección
      // window.location.href = '/danke?booking=' + timeslot.timeslot_uuid;
    },
    createBookingFailed: ({ timeslot, data, response }) => {
      console.error('Buchung fehlgeschlagen:', response);
    }
  }
});

Callbacks relacionados con la cancelación

Callbacks relacionados con diálogos

Callbacks relacionados con los datos

Ejemplo: No hay citas disponibles

timum.init({
  ref: 'ihre-ressourcen-referenz',
  callbacks: {
    fetchingBookablesSucceeded: ({ bookables }) => {
      const hasAppointments = Object.keys(bookables).length > 0;

      if (!hasAppointments) {
        // Ocultar widget
        document.getElementById('bookingjs').style.display = 'none';
        // Mostrar alternativa
        document.getElementById('no-appointments').style.display = 'block';
      }
    }
  }
});

postMessage para iframe

Para la integración con iframe, puede utilizar postMessageTarget para enviar eventos a la página padre:

// En el iframe
timum.init({
  ref: 'ihre-ressourcen-referenz',
  postMessageTarget: 'https://ihre-website.de'
});

// En la página padre
window.addEventListener('message', (event) => {
  if (event.data.origin === 'bookingjs') {
    console.log('Event:', event.data.type);
    // event.data.type corresponde al nombre del callback
    // p. ej. 'createBookingSuccessful'
  }
});

Temas relacionados

• Configuración
• Integración