LeanData BookIt for Forms Custom Code Snippet Events Follow
The purpose of this article is to outline the events that will be fired on your webpage during the LeanData BookIt calendaring experience. Please do not hesitate to reach out to LeanData support for assistance in making use of these.
LeanData fires a few events during its process that your code can listen to:
- LD_POPUP_CLOSED - Fired when the user clicks on the ‘X’ button to close out the popup modal at any point OR when the calendar times out on non-mobile devices (if using the calendarTimeoutLength option)
- LD_POST_BOOKING_IMMEDIATE - Fired after the user schedules a meeting. This event contains some post booking related data:
- schedulingInfoFormData: object containing “Scheduling Information” form field data with the labels as keys and values as the values filled in by the user.
- meeting: object containing the following fields:
- name: string containing the name of the meeting type (”Test” in the below example)
- duration: string containing the duration of the meeting
- time: object containing the startTime and endTime timestamps as well as the timezone of the meeting
- description: string containing the meeting description
- calendarEventName: string containing the name of the calendar event that will be created
- host: string containing the host(s) of the meeting
-
- selectedLanguage: string containing the two letter language code of the selected language on the scheduling page
- LD_ROUTING_RESPONSE - Fired as soon as the api request to your routing graph resolves. This event contains the responseData of the api request:
- calendarLink: link to the calendar returned by your graph (if a schedule node is hit) or a redirect url (if a “Redirect to URL” node is hit)
- formInput: the form data sent over to your routing graph in the payload of the api request
- status: the status of the api request
Example usage:
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 we hit this point, we either display a calendar or we hit a redirect
if (calendarLink.toLowerCase().startsWith("https://app.leandata.com")) {
// we got back a calendar from the graph (schedule node hit)
} else {
// we hit a "Redirect to URL" node in the graph
}
} else {
// we did not get back a calendar from the graph (no schedule node hit)
}
break;
case "LD_POPUP_CLOSED":
// run actions after popup modal is closed here
// IMPORTANT NOTE: this will be triggered any time the modal is closed (including timeouts and after 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;
}
});