BookIt for Forms - Events API

Contents

• Overview
• Events
• Usage Example

Overview

This article outlines the custom events that are triggered on your webpage during the LeanData BookIt calendaring experience. These events can be used to integrate with other tools or trigger additional actions. If you need help implementing or responding to these events, feel free to contact LeanData Support.

Events

LeanData fires a few events during its process that your code can listen to:

LD_ROUTING_RESPONSE

• • Fired as soon as the API request to your routing graph resolves. This event helps you understand the final decision made by your routing graph — whether to show a calendar, redirect the user, or handle a fallback scenario if no response is returned.
  • This event contains the responseData of the API request:
    • • calendarLink: string

        • • If it starts with https://app.leandata.com, the graph returned a calendar (reached a Schedule Node).

          • If it contains another URL, the graph triggered a Redirect to URL Node.

          • If calendarLink is undefined, the graph did not return a response, which may indicate an error or an unsupported path — in this case, the default fallback experience (e.g., “Successfully Submitted” screen) will be shown.

            💡 Tip:  This event will be useful if you opted to skipSubmissionConfirmation and want to create your own fallback experience.
      • formInput: object containing the form data sent over to your routing graph in the payload of the API request
      • status: string : containing the status of the API request

LD_ROUTING_TIMED_OUT

• • Fired when the API request to your routing graph times out. The default timeout duration is set to 30000 milliseconds (30 seconds), but this can be customized using the timeoutDuration option. 
    
    💡 Tip:  This event will be useful if you opted to skipSubmissionConfirmation and want to create your own fallback experience.

LD_POST_BOOKING_IMMEDIATE

• • Fired immediately after a meeting is successfully scheduled. This event contains data that can be used for post-booking processes, such as analytics tracking, CRM updates, or UI updates. It is recommended to delay execution slightly using setTimeout() so that the user can view the confirmation screen.
    
    • • schedulingInfoFormData: object mapping “Scheduling Information” form field labels to user-submitted values.
        
        
        
      • meeting: object containing metadata about the booked meeting:
        • • name: string — the name of the meeting type (e.g., “Test”)
          • duration: { unit: string, value: number } — time unit and total duration of the meeting.
          • time: { startTime: number, endTime: number, timezone: string } — timestamps in Unix ms and a timezone string in IANA format.
          • description: string — text description of the meeting.
          • calendarEventName: string — the title of the calendar event that will be created.
          • host: string — name(s) of the meeting host(s).
          • selectedLanguage: string — the two-letter language code used during booking

LD_POPUP_CLOSED

• • Fired when the user closes the popup modal — either by clicking the ‘X’ button OR when the calendar times out on non-mobile devices (if the calendarTimeoutLength option is set).
    
    ⚠️ Note:  This event is triggered any time the modal is closed, including:
             ●  Manual closure via the close button
             ●  Inactivity timeouts
             ●  After a successful booking

Usage Example

You can listen for LeanData BookIt events using the standard window.addEventListener("message") approach. These events provide insight into the user's booking journey and allow you to trigger custom behaviors at key moments, such as when a calendar is displayed, a booking is completed, or the popup is closed.

window.addEventListener("message", function (e) {
 switch (e.data.message) {
   case "LD_ROUTING_RESPONSE":
     let routingResponseData = e.data.responseData;
     let calendarLink = routingResponseData?.calendarLink;

     if (calendarLink) {
       // if a link was returned, we either display a calendar or we redirect, 
       // depending on the decision node of the graph

       if (calendarLink.toLowerCase().startsWith("https://app.leandata.com")) {
           // we got back a calendar from the graph (reached the "Schedule" Node in the graph)
       } else {
           // redirecting the user (reached "Redirect to URL" Node in the graph)
       }
     } else {
       // The graph determined to not provide a calendar (did not reach the Schedule Node)
       // Our default fallback experience will render ("Successfully Submitted" page)
     }
     break;
   case "LD_POPUP_CLOSED":
     // This fires any time the popup modal is closed,
     // whether due to user closing it, inactivity timeout, or successful booking
     break;
   case "LD_POST_BOOKING_IMMEDIATE":
     let postBookingData = e.data.data;

     // recommended to use a setTimeout here so user can see confirmation screen
     // if you wish to implement frontend actions here

     setTimeout(() => {
       // run post booking actions here
     }, 3000);
     break;
   case "LD_ROUTING_TIMED_OUT":
     // create your own fallback experience
     break;
 }
});