Booking Engine Plus Event Emitter System

Introduction

The Event System lets the Booking Engine communicate with custom scripts and external programs by dispatching supported events with payload data. Use it to receive Booking Engine updates and trigger custom actions from JavaScript added in the Booking Engine settings.

This article explains how to initialize the eventSystem, reference supported events, and use the payload data available for those events.

Table of contents

• How to use the Event Emitter System
• Events dispatched by the Booking Engine
• Events that the Booking Engine subscribes to

How to use the Event Emitter System

1. Go to the Settings page of your Account Menu and click on the Booking Engine section
2. Click on Customize

3. Add the code below to the JavaScript field
   To use the Event System, you need to add an event listener for the on-booking-engine-ready event, which exposes the eventSystem as follows:

   <script>
    window.addEventListener('on-booking-engine-ready', (e) => {
      const { eventSystem } = e.detail;
    });
   </script>

4. Click Save

   

5. The eventSystem implements the IExternalEventSystem interface:

   interface IExternalEventSystem {
    addEventListener: (
      event: EventType,
      listener: (payload: PayloadOf<EventType>) => void
    ) => void;
    dispatchEvent: (event: EventType, payload: PayloadOf<EventType>) => void;
    removeEventListener: (
      event: EventType,
      listener: (payload: PayloadOf<EventType>) => void
    ) => void;
   }

   Where EventType refers to the type of events that we can trigger or listen to, and PayloadOf<EventType> refers to the payload that is sent with the event.

Events dispatched by the Booking Engine

1.  currency-change event:

This event is triggered when the user changed the currency of the Booking Engine from the currency selector in the header. The currency value in the payload is the abbreviation of the selected currency, same as it appears in the currency query parameter of the URL.

export type CurrencyChangeEvent = {
 event: 'currency-change';
 payload: { currency: Currency };
};

2. language-change event:

This event is triggered when the user changed the language of the Booking Engine from the language selector in the header. The language value in the payload is the abbreviation of the selected language, same as it appears in the URL.

type LanguageChangeEvent = {
 event: 'language-change';
 payload: { language: Language };
};

3. reservation-created event:

This event is triggered when a reservation was created in the Booking Engine.

type ReservationCreatedEvent = {
  event: 'reservation-created';
  payload: CreatedReservation;
};

When CreatedReservation is:

interface CreatedReservation {
  booking_id?: `${number}`;
  booking_total?: number;
  checkin_date?: string;
  checkout_date?: string;
  city?: string;
  currency_code?: string;
  custom_payment_method?: string;
  hotel_name?: string;
  nights?: number;
  payment_method?: PAYMENT_METHOD;
  real_booking_total?: number;
  resRooms?: {
    adults: `${number}`;
    id: `${number}`;
    kids: `${number}`;
    package: `${number}`;
    package_name: string | null;
    rate_id: `${number}`;
    room_total: `${number}`;
    room_type_id: `${number}`;
    room_type_name: string;
    room_type_photos: ({
      TYPE?: string;
      alt: string;
      cropParam: string | null;
      croppedImage: string;
      fullPath: string;
      galleryPath?: string | null;
      id: string;
      imageHeight: string;
      imageWidth: string;
      mime?: string;
      originalName: string;
      ownerId?: string;
      ownerType?: string;
      parentId: string;
      path: string;
      section?: string;
      size?: string;
      thumbPath: string;
      uploadedAt?: string;
      utype?: string;
    } & {
      featured: number;
      featuredPath: string | null;
    })[];
  }[];
  rooms?: Record<string, {
    adults: number;
    amount: number;
    bookedId: string[];
    kids: number;
    name: string;
    packageId?: string;
    packageName?: string;
    picture?: string;
    price?: number;
    rateId: string;
    roomId: string;
    unit?: string;
  }>;
  state?: string;
  total_tax?: number;
  widget_property?: number;
}

Events that the Booking Engine subscribes to

•  custom-payment-option-change 

This event is used for properties that want to use a Custom Payment Option to offer to their customers. 

type CustomPaymentOptionChangeEvent = {
 event: 'custom-payment-option-change';
 payload: {
   id: string;
   instructions?: string;
   name: string;
 };
};

Next Operational Step

Now that you understand how to configure and reference the Event System, continue to Add third-party payment gateways and gift cards to the Booking Engine for a practical example using custom payment options.