Callbacks

Auf Buchungs-Events reagieren

Ü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

Callback	Beschreibung
`openedBookingPage`	Buchungsseite wurde geöffnet
`closedBookingPage`	Buchungsseite wurde geschlossen
`createBookingStarted`	Buchungsprozess wurde gestartet
`createBookingSuccessful`	Buchung war erfolgreich
`createBookingFailed`	Buchung ist fehlgeschlagen

Parameter

Alle buchungsbezogenen Callbacks erhalten ein Objekt mit:

Callback-Parametertypescript

{
  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

Buchungs-Callbackjavascript

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

Callback	Beschreibung
`openedCancelPage`	Stornierungsseite wurde geöffnet
`closedCancelPage`	Stornierungsseite wurde geschlossen
`cancelationStarted`	Stornierungsprozess wurde gestartet
`cancelationSuccessful`	Stornierung war erfolgreich
`cancelationFailed`	Stornierung ist fehlgeschlagen

Dialog-bezogene Callbacks

Callback	Beschreibung
`openedProductSelection`	Produktauswahl geöffnet
`closedProductSelection`	Produktauswahl geschlossen
`openedResourceSelection`	Ressourcenauswahl geöffnet
`closedResourceSelection`	Ressourcenauswahl geschlossen
`openedConfirmationPage`	Bestätigungsseite geöffnet
`closedConfirmationPage`	Bestätigungsseite geschlossen

Hinweis

Dialog-bezogene Callbacks erhalten keine Parameter.

Daten-bezogene Callbacks

Callback	Parameter
`fetchingPublicDataSucceeded`	contact, resource, provider, channel
`fetchingPublicDataFailed`	error
`fetchingProductsSucceeded`	products[]
`fetchingProductsFailed`	error
`fetchingBookablesSucceeded`	bookables (nach Datum gruppiert)
`fetchingBookablesFailed`	error

Beispiel: Keine Termine verfügbar

Leere Termine behandelnjavascript

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:

iframe postMessagejavascript

// 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'
  }
});

Wichtig

postMessageTarget überschreibt die normalen Callbacks. Alle Events werden stattdessen per postMessage gesendet.