Callbacks

Diese Seite beschreibt, wie Sie mit Callbacks in BookingJs auf Buchungs-Events wie erfolgreiche Buchungen oder Stornierungen reagieren können.

Übersicht

Mit Callbacks können Sie benutzerdefinierten Code ausführen, wenn bestimmte Events im Widget auftreten. Dies ist nützlich für Analytics, Weiterleitungen oder die Integration mit anderen Systemen.

Buchungs-bezogene Callbacks

Parameter

Alle buchungsbezogenen Callbacks erhalten ein Objekt mit:

{
  timeslot: {
    start: DateTime,           // Luxon DateTime
    end: DateTime,
    timeslot_uuid: string,     // UUID des Termins
    product_uuid: string,      // UUID des Produkts
    product_name: string,
    resource_name: string,
    capacity: number,
    capacity_left: number,
    kind: 'models.Bookable' | 'models.LotAppointment',
    untouchedStart: string,    // ISO-String
    untouchedEnd: string
  },
  data: {
    firstName: string,
    lastName: string,
    email: string,
    agbs: boolean,
    // + custom fields
  },
  response?: RTKQResponse       // Nur bei Successful/Failed
}

Beispiel

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

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

Stornierung-bezogene Callbacks

Dialog-bezogene Callbacks

Daten-bezogene Callbacks

Beispiel: Keine Termine verfügbar

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

      if (!hasAppointments) {
        // Widget ausblenden
        document.getElementById('bookingjs').style.display = 'none';
        // Alternative anzeigen
        document.getElementById('no-appointments').style.display = 'block';
      }
    }
  }
});

postMessage für iframe

Bei iframe-Integration können Sie postMessageTarget verwenden, um Events an die Parent-Seite zu senden:

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

// In der Parent-Seite
window.addEventListener('message', (event) => {
  if (event.data.origin === 'bookingjs') {
    console.log('Event:', event.data.type);
    // event.data.type entspricht dem Callback-Namen
    // z.B. 'createBookingSuccessful'
  }
});

Verwandte Themen

• Konfiguration
• Integration