1. LeanData Help Center
  2. BookIt
  3. BookIt For Forms - Custom Snippet Implementation Guides

BookIt for Forms - Customizable Snippet Options

Updated
Have more questions? Submit a request

Contents

 

Overview

This article outlines the optional parameters and functions you can pass into the options object—the fourth parameter of the initialize() function—to customize the behavior of BookIt for Forms on your webpage.

These configuration options allow for a more tailored integration, depending on your specific use case. If you need assistance implementing or troubleshooting any of these settings, please feel free to contact LeanData support.

To use these customizations, define an options object and pass it as the fourth argument in your LDBookItV2.initialize() call.

<script>
 var _ld_scriptEl = document.createElement('script');
 _ld_scriptEl.src = 'https://cdn.leandata.com/js-snippet/ld-book-v2.js';
 _ld_scriptEl.addEventListener('load', function () {
    let options = {
      exampleOption1: 'example1',
      exampleOption2: 'example2',
      /* define your options here */
    };

    LDBookItV2.initialize('<Org Id>', '<Node Name>', '<Hidden Field Name>', options);
    /* other BookIt code here... */
});

document.body.appendChild(_ld_scriptEl);
</script>
⚠️ Note:  In some implementations, you may receive multiple code snippets to place on different pages. To ensure consistent behavior, we recommend defining any desired options within each snippet individually.

 

General Calendar Experience Options

The options below let you control various aspects of the BookIt for Forms calendar behavior, including text customization, default language and timezone settings, loading screen behavior, and calendar timeout duration.

loadingText: string

    • Specify the text to display on the calendar loading modal. This defaults to ‘Loading Calendar’.

defaultLanguage: string

    • The calendar's default language is English. You can specify a different display language for the calendar using this setting. Must be a string with one of these supported language codes. If your preferred language is not listed, please contact LeanData Support.

        • 'es' (Spanish)

        • 'fr' (French)

        • 'zh' (Chinese)

        • 'ar' (Arabic)

        • 'de' (German)

        • 'ko' (Korean)

        • 'pt-PT' (Portuguese - Portugal)

        • 'pt-BR' (Portuguese - Brazil)

        • 'ja' (Japanese)

        • 'hi' (Hindi)

defaultTimezone: string

    • The calendar uses the prospect's system timezone by default. If you wish to override this behavior, you can specify a custom default timezone for the calendar. Must be a string using standard timezone names like: 'US/Pacific', 'US/Eastern', 'America/New_York', 'Europe/London', 'Asia/Tokyo'. For a complete list of supported timezones, refer to the IANA Time Zone Database (also known as tz database).

popupModalCloseURL: string

    • A URL you can send users to redirect to upon closing the popup calendar modal.

calendarTimeoutLength: number

    • If specified, this will close out the modal or iframe containing the calendar after x seconds.

postBookingTimeoutLength: number

    • How long (in seconds) you would like to wait after confirming a meeting to send the user to the redirect URL specified in your meeting type settings in LeanData. This defaults to 3 seconds.

hideLoadingScreen: boolean

    • If true, this will disable the default loading screen that appears immediately after a form is submitted and before a calendar is presented. This will also disable the “Successfully submitted!” messaging that appears if your BookIt graph decides not to show the prospect a calendar. This means that the user will not see anything other than a calendar if and only if you decide to display one.

skipSubmissionConfirmation: boolean

    • If true, this will disable the “Successfully submitted!” messaging that appears if your BookIt graph decides not to show the prospect a calendar.

loadingScreenDelay: number

    • How long (in milliseconds) you wish to keep the loading screen that is triggered immediately after form submission visible for before closing out the modal in the case that skipSubmissionConfirmation and you decide not to show the prospect a calendar. This is useful to ensure that the prospect has enough time to read the loading screen before it is closed so that it doesn’t appear as a random popup. This defaults to 2000 milliseconds.

timeoutDuration: number

    • Specify the maximum time (in milliseconds) to wait for the routing request to complete. Defaults to 30000 ms (30 seconds). We recommend maintaining this minimum for optimal performance. If the request exceeds this duration, it will timeout and the Thank You page will render. You can customize this page using the thankYouMessageHeader, thankYouMessageSubHeader, or thankYouPageHTML options.

      ⚠️ Note:  If you enabled skipSubmissionConfirmation, the Thank You page will not appear. In this case, we recommend creating a fallback experience by subscribing to the LD_ROUTING_TIMED_OUT event.

redirectLoadingText: string

    • Specify the text to display on the loading screen that appears before redirecting to a URL specified in the “Redirect to URL” node of your BookIt graph.

redirectDelay: number

    • How long (in milliseconds) you would like for the loading screen to display before redirecting to a URL specified in the “Redirect to URL” node of your BookIt graph.

iframeBorderRadius: string

thankYouMessageHeader: string

    • String containing the text you would like to replace the header of the “Successfully submitted!” messaging that appears if your BookIt graph determines not to show the prospect a calendar. This defaults to “Successfully submitted!”

thankYouMessageSubHeader: string

    • String containing the text you would like to replace the header of the “Successfully submitted!” messaging that appears if your BookIt graph determines not to show the prospect a calendar. This defaults to “We appreciate you reaching out to our team and will be in touch shortly.”

thankYouPageHTML: string

    • String containing HTML you would like to completely replace the “Successfully submitted!” messaging that appears if your BookIt graph decides not to show the prospect a calendar. This will override this screen on desktop devices only.
    • Example usage:
      thankYouPageHTML: '<div><h2>Hello World!</h2></div>';

 

Mobile Calendar Experience Options

These options allow you to customize how the BookIt for Forms calendar behaves specifically on mobile devices.

mobileThankYouPageHTML: string

    • String containing HTML you would like to replace the screen that displays when a calendar or redirect is not returned from routing. This will override this screen on mobile devices only.
    • Example usage:
       
      mobileThankYouPageHTML: '<div><h2>Hello World, but on mobile!</h2></div>';

mobileCalendarOptions: object

An object containing further options for customization to the mobile calendar experience. The options this object contains are the following.

    • calendarTimeoutLength: number
        • If specified, this will close out the modal or iframe containing the calendar after x seconds. This defaults to whatever is set in the regular calendarTimeoutLength option from the section above.
    • calendarTimeoutRedirectURL: string
        • The URL you wish to redirect to on mobile devices in the case that the calendar timeout specified with mobileCalendarOptions.calendarTimeoutLength is triggered. This is required in conjunction with specifying a mobileCalendarOptions.calendarTimeoutLength.
    • postBookingTimeoutLength: number
        • How long (in milliseconds) you would like to wait after confirming a meeting to send the user to the redirect URL specified in your meeting type settings in LeanData or what is specified in the mobileCalendarOptions.postBookingRedirectURL below. This defaults to 3000 milliseconds (3 seconds) or whatever is set in the regular postBookingTimeoutLength option from the section above.
    • postBookingRedirectURL: string
        • The URL you wish to redirect to on mobile devices once a meeting is confirmed. This will override the the redirect URL specified in your meeting type settings in LeanData and is not required, even with usage of mobileCalendarOptions.postBookingTimeoutLength.

 

Form Setup/Form Data Collection Options

These options allow you to customize how LeanData’s code detects, interacts with, and collects data from your forms, giving you more control over form handling and integration behavior.

 

hiddenFieldSetter(hiddenFieldName: string, uniqueId: string)

    • This optional function allows you to override the default logic LeanData uses to populate the hidden field with its unique ID.
    • By default, LeanData attempts to set the value of an input element based on the name attribute provided via the hiddenFieldName parameter in the LDBookItV2.initialize()call. If you want to customize how and where this value is set—such as targeting the id attribute instead—you can provide your own hiddenFieldSetter function.
    • This function can be used to override the default hidden field setting logic to populate it with LeanData's unique id. If this function is not specified, LeanData will default to attempting to set the input element with the name attribute specified by the hiddenFieldName parameter passed into the  function. This function MUST successfully set the hidden field on your form to have a value of uniqueId.
      ⚠️ Important:  This function is only used when ‘custom’ to LDBookItV2.setFormProvider().

      Be aware of timing issues:       if your form or hidden field hasn’t finished rendering, the function may run before the field is available. We recommend including a retry mechanism to handle this.
    • Example usage:
      In this example, the code looks for an element with an id matching hiddenFieldName and sets its value to uniqueId. If the field isn’t found, it retries after 1 second—helping avoid issues with delayed form rendering.
      hiddenFieldSetter: (hiddenFieldName, uniqueId) => {
  let hiddenField = document.querySelector(`#${hiddenFieldName}`);
  if (!hiddenField) {
    setTimeout(() => options.hiddenFieldSetter(hiddenFieldName, uniqueId), 1000);
  } else {
    hiddenField.value = uniqueId;
  }
};

 

 

formKeyGetter(elem: HTMLElement)

    • This function lets you customize how keys are assigned in the formData object during default form data collection. By default, LeanData uses the input element’s name attribute as the key. With formKeyGetter, you can specify a different attribute (e.g., id, data-*) or apply custom logic to generate keys.
    • This function must return a string that will be used as the key in theformData object for the given element.
      ⚠️ Important: These keys are what get used to map your form fields in the BookIt Trigger Node. Make sure the keys returned by this function match the field names you've configured in your LeanData Flow.

      Note:  This function is only used by the default form data collector. If you're using a custom formDataCollector(), key assignment should be handled within that function instead.
    • Example usage:
      In this example, each form field's id will be used as its key in the collected formData object.
      formKeyGetter: (elem) => {
       return elem.id; // use the element's id instead of name
      };

 

 

setTypeCase: { [inputType: string]: (element: HTMLElement) => any }

    • The setTypeCase object allows you to override how form input values are collected based on their input type (e.g., 'text', 'hidden', 'radio', 'select', etc.).
    • Each key represents a form input type, and each corresponding value is a function that receives the form input element and returns the value you want to collect. This is useful when you need custom logic for extracting values from specific input types.
      ⚠️ Note:  This customization only applies when using the default form data collection. If you're using a custom formDataCollector() function, you should handle this logic there instead and do not need to define setTypeCase.
    • Example usage:
      This example overrides the default behavior for inputs of type 'phone', returning only the numeric digits from the phone number.
      setTypeCase: {
       // override how phone input values are collected
       'phone': (elem) => {
         return elem.tel.replace(/[^\d]/g, '') // strip all non-numeric characters
       }
      }

 

 

formDataCollector(formTarget: HTMLFormElement): { [key: string]: any }

    • This option option allows you to define a completely custom method for collecting form data, rather than customizing individual input types via setTypeCase.
    • This function gives you full control over how form data is extracted. The only requirements are:
        • It must return a JSON object (formData) containing the data you want to send to LeanData.
        • It must call LDBookItV2.saveFormData() to persist the collected data to local storage.
    • Use this when the default form data collection does not meet your needs.
    • Example usage:
      formDataCollector: (formTarget) => {
  const elements = formTarget.elements;
  let formData = {};

  for (let i = 0; i < elements.length; i++) {
    let elem = elements[i];
    let key = elem.name;

    switch (elem.type) {
      case "text":
        formData[key] = elem.value;
        // Handle other cases for all element types in your form here...
    }
  }

  LDBookItV2.saveFormData(formData); // this is required
  return formData; // this is required
};

 

 

formDataCollectorTrigger(formTarget: HTMLFormElement)

    • This option allows you to define when and how form data should be collected by providing a custom trigger. The function receives the formTarget (set using LDBookItV2.setFormTarget()) and gives you full control over attaching an event listener to a form element or custom button.
      ⚠️ Important:  You must call LDBookItV2.collectFormData() within this function. This method initiates data collection using either BookIt’s default scraper or your custom formDataCollector() function, if one is defined.
    • If this option is not set, LeanData will automatically attach data collection to the form's native submit event.
    • Example usage:
      In this example, clicking the button with ID #my-button triggers form data collection. You can define your own custom events or conditions depending on your form's structure and behavior.
      formDataCollectorTrigger: (formTarget) => {
       const myButton = document.querySelector("#my-button");
       myButton.addEventListener("click", function () {
         LDBookItV2.collectFormData(); // Required: triggers default or custom data collection
       });
      };

 

Google Analytics

You can enable Google Analytics tracking by including a googleAnalytics property in the options object.

googleAnalytics: string

This should be a string in the format "G-XXXXXXX", where XXXXXXX is your Google Tag ID—the unique alphanumeric identifier provided by Google. This ID is used to associate form activity with your Google Analytics account via your configured Google tag.

 

Code Example

Below is an example of LeanData’s code with a customized options object passed into the LDBookItV2.initialize() function.

<script>
 var _ld_scriptEl = document.createElement('script');
 _ld_scriptEl.src = 'https://cdn.leandata.com/js-snippet/ld-book-v2.js';
 _ld_scriptEl.addEventListener('load', function () {
   let options = {
     hiddenFieldSetter: (hiddenFieldName, uniqueId) => {
       // look for field with id of hiddenFieldName instead of default of name
       document.querySelector(`#${hiddenFieldName}`).value = uniqueId;
     },
     formKeyGetter: (elem) => {
       // use ids on form field elements to use as keys
       // in JSON of scraped data instead of default of name
       return elem.id;
     },
     loadingText: 'Loading...',
     popupModalCloseURL: 'https://example-close-modal.com',
     calendarTimeoutLength: 5 * 60, // 5 minute timeout
     mobileCalendarOptions: {
       calendarTimeoutRedirectURL: 'https://example-timeout-redirect-modal.com',
       postBookingRedirectURL: 'https://example-post-booking-redirect-modal.com',
     },
     thankYouPageHTML: '<div>Thank you!</div>',
     mobileThankYouPageHTML: '<div>Thank you (on mobile)!</div>',
     skipSubmissionConfirmation: true,
     autoSubmit: true,
     googleAnalytics: 'G-XXXXXXX',
   };
   let formElement = document.querySelector('form'); // update this to select your form

   LDBookItV2.initialize('<Org Id>', '<Node Name>', '<Hidden Field Name>', options);
   LDBookItV2.setFormProvider('custom');
   LDBookItV2.setFormTarget(formElement);
 });
 document.body.appendChild(_ld_scriptEl);
</script>

 

Articles in this section

Was this article helpful?
0 out of 0 found this helpful
Share