Callbacks

This page describes how you can use callbacks in BookingJs to respond to booking events such as successful bookings or cancellations.

Overview

With callbacks, you can execute custom code when certain events occur in the widget. This is useful for analytics, redirects, or integration with other systems.

Booking-related callbacks

Parameters

All booking-related callbacks receive an object with:

{
  timeslot: {
    start: DateTime,           // Luxon DateTime
    end: DateTime,
    timeslot_uuid: string,     // UUID of the appointment
    product_uuid: string,      // UUID of the product
    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       // Only for Successful/Failed
}

Example

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

Cancellation-related callbacks

Dialog-related callbacks

Data-related callbacks

Example: No appointments available

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

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

postMessage for iframe

For iframe integration, you can use postMessageTarget to send events to the parent page:

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

// In the parent page
window.addEventListener('message', (event) => {
  if (event.data.origin === 'bookingjs') {
    console.log('Event:', event.data.type);
    // event.data.type corresponds to the callback name
    // e.g. 'createBookingSuccessful'
  }
});

Related topics

• Configuration
• Integration