Callbacks

Cette page décrit comment vous pouvez utiliser les callbacks dans BookingJs pour réagir à des événements de réservation tels que des réservations réussies ou des annulations.

Aperçu

Avec les callbacks, vous pouvez exécuter du code personnalisé lorsque certains événements se produisent dans le widget. Cela est utile pour l'analytics, les redirections ou l'intégration avec d'autres systèmes.

Callbacks liés aux réservations

Paramètres

Tous les callbacks liés aux réservations reçoivent un objet contenant :

{
  timeslot: {
    start: DateTime,           // Luxon DateTime
    end: DateTime,
    timeslot_uuid: string,     // UUID du rendez-vous
    product_uuid: string,      // UUID du produit
    product_name: string,
    resource_name: string,
    capacity: number,
    capacity_left: number,
    kind: 'models.Bookable' | 'models.LotAppointment',
    untouchedStart: string,    // Chaîne ISO
    untouchedEnd: string
  },
  data: {
    firstName: string,
    lastName: string,
    email: string,
    agbs: boolean,
    // + champs personnalisés
  },
  response?: RTKQResponse       // Uniquement pour Successful/Failed
}

Exemple

timum.init({
  ref: 'ihre-ressourcen-referenz',
  callbacks: {
    createBookingSuccessful: ({ timeslot, data, response }) => {
      // Événement analytics
      gtag('event', 'booking_complete', {
        resource: timeslot.resource_name,
        product: timeslot.product_name,
        customer_email: data.email
      });

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

Callbacks liés aux annulations

Callbacks liés aux boîtes de dialogue

Callbacks liés aux données

Exemple : Aucun rendez-vous disponible

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

      if (!hasAppointments) {
        // Masquer le widget
        document.getElementById('bookingjs').style.display = 'none';
        // Afficher l'alternative
        document.getElementById('no-appointments').style.display = 'block';
      }
    }
  }
});

postMessage pour iframe

Pour l'intégration iframe, vous pouvez utiliser postMessageTarget afin d'envoyer des événements à la page parente :

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

// Dans la page parente
window.addEventListener('message', (event) => {
  if (event.data.origin === 'bookingjs') {
    console.log('Event:', event.data.type);
    // event.data.type correspond au nom du callback
    // par ex. 'createBookingSuccessful'
  }
});

Sujets connexes

• Configuration
• Intégration