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

BookIt for Forms - Custom Snippet Implementation Guide

Updated
Have more questions? Submit a request

Contents:

    •  

 

Overview and Key Notes

 

This guide explains how to create a custom integration for BookIt for Forms. If you prefer to build your own snippet instead of using the default implementation, follow the steps below to integrate BookIt with your form.

Although this document walks you through building a custom snippet, you can always reach out to LeanData Support if you'd like assistance.

⚠️ Note: This guide covers implementations without out-of-the-box support. If you are using Pardot, Hubspot, Marketo, Gravity Forms, Unbounce, Typeform, or Eloqua forms, please look through prebuilt integration guides to find the best match for your use case. 

 

High-Level Implementation Flow

To implement LeanData's BookIt For Forms, these are the general steps. 

  1. Add a hidden field to your form to receive LeanData's unique id (aka BookIt Log ID). This ID will need to be added as a field on your lead/contact upon form submission via your lead/contact creation process.
  2. Add LeanData's BookIt snippet to your form page—and potentially on your thank-you page. This is where the integration logic lives.
  3. Map form fields in your BookIt for Forms routing trigger node, so values from the form can be used in your LeanData routing graph.

 

Step 1: Add a Hidden Field to Your Form

LeanData requires a hidden form field that maps to a field on the resulting lead/contact record created from the submission.

  • LeanData's code will populate this field with a unique ID (aka BookIt Log ID) to link the form submission to the appropriate lead/contact.

  • This field's input element should have a name attribute, which you'll reference when configuring the snippet. LeanData uses this name to locate and populate the field with the ID.

 

Step 2: Add the BookIt Snippet to Your Form Page

You must have the ability to insert HTML or vanilla JavaScript into the page where your form is hosted.

⚠️  Important:  While this guide outlines how the code snippet works, we do not recommend configuring it entirely on your own unless you're comfortable with custom code. For the best results and to avoid issues, please contact LeanData Support for assistance.

LeanData's code will be imported with the following snippet:

<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 () {

   // Add LeanData specific code that should be kicked off right away here

 });
 document.body.appendChild(_ld_scriptEl);
</script>

This snippet will import LeanData's BookIt script and register an event listener to run some of the initialization code. 

 

Step 3: Configure Your BookIt Snippet

Once you have added the BookIt script to your form page, you will have access to several methods on the LDBookItV2 class. You will use these methods to configure the integration as follows:

  1. Initialize BookIt and attach it to your form target.
  2. Set Up Form Data Collection for capturing prospect information.
  3. Persist Data Temporarily in Local Storageto maintain prospect information across any form submission behaviors or page redirects. 
  4. Submit Form Data to BookIt and Trigger the Calendar Popup at the appropriate time.

Each step is detailed below:

 

Initialization

Initialization is the first step in setting up BookIt on your form. The following three functions are required to properly attach BookIt to your desired form:

Through these functions, you will:

  • Identify the Target Form Element: Specify the HTML form element that BookIt should monitor and interact with.

  • Define the Hidden Field for the BookIt Log ID: Indicate the name of the hidden field where BookIt will automatically populate the generated Log ID.

  • Connect BookIt to the Form: BookIt will query the form for the specified hidden field and handle inserting the Log ID during the form interaction process. BookIt will also attach the form data collection function.

⚠️ Note:   If BookIt is not properly initialized, you will not be able to submit form data to BookIt or trigger the calendar popup.

 

LDBookItV2.initialize(orgId: string, nodeName: string, hiddenFieldName: string, options?: object)

    • This function will initialize LeanData's process. This function is required and must be the first function you call.
    • Parameters:
        • orgId: This is the 18 digit Salesforce Org ID for the Salesforce org that contains your live BookIt router graph or the one you would like to test on.
        • nodeName: The name of the trigger node on your live BookIt router graph that you would like to enter the graph through. There will be instructions for the configuration of this in a later step.
        • hiddenFieldName: This is the value of the name attribute that you gave to your hidden field in an earlier step.
        • options(optional): LeanData can pass additional setup info and configure customizations here. Please refer to the documentation on these options for more info.

LDBookItV2.setFormProvider(formProvider: string)

    • This function will set the provider of the form on your webpage so that LeanData can collect and process data accordingly. This function should be the second function you call if you need to attach to a form.
    • Parameters:
        • formProvider: The provider of the forms you are using. Unless instructed to in an implementation guide or by a member of the LeanData team, this value should be ‘custom’. These will allow us to use default behavior specific to those form providers to perform certain actions. If this function is not called, LeanData will attempt the default behavior.

LDBookItV2.setFormTarget(formHandle: HTMLElement)

    • This function explicitly sets the form element that LeanData's BookIt process should attach to. It is required when using a custom form integration and have explicitly set LDBookItV2.setFormProvider('custom');
    • Once the form target is set:
        • LeanData will locate the specified hidden field and automatically insert the BookIt Log ID.
        • Upon form submission, LeanData will scrape the form field data and store it in localStorage, making it available for use during the later submission step.
    • Parameters:
        • formHandle: The HTML form element you want BookIt to attach to. This is typically obtained using document.querySelector() or a similar DOM method

Data Collection & Storage

BookIt needs access to prospect form data in order to trigger the calendar flow and route records correctly. This section explains how to configure BookIt to collect and temporarily store that data on your form page. 

BookIt provides flexible options depending on how much control you want over the data collection process. 

Choose Your Data Collection Approach

You have 3 options for how BookIt collects and stores prospect data:

    • Option 1: Use the Default Form Scraper

        • BookIt’s built-in form scraper will automatically collect field values from your form.

        • No extra configuration needed

    • Option 2: Use a Custom Data Collection Method

        • If you have non-standard forms, complex input elements, or need additional validation logic, you can opt out of the default scraper and define your own custom formDataCollector() specified in the options of your initialize() function.

        • BookIt will then automatically store the output of your custom collector in local storage.
    • Option 3: Manually Pass Pre-Collected Form Data
        • If you already have the form data (from another source or process), you can directly pass the form data directly to BookIt as a JSON-formatted object using saveFormData() without scraping at all.
💡 Tip:  Options 2 and 3 are ideal for non-standard forms, dynamic fields, and API pre-fills.

Choose When to Collect Form Data

By default, BookIt will automatically attach the data collection process to the submit event of the HTML form element you specify via setFormTarget().

However, if you need more control over when data collection occurs (e.g., after validation, on a different event, or outside the form flow), BookIt provides 2 flexible options:

  • Option 1: Use formDataCollectorTrigger() to Control Timing

    • formDataCollectorTrigger: (formElement) => {
  formElement.querySelector('#customButton').addEventListener('click', () => {
    LDBookItV2.collectFormData();
  });
}

  • Option 2: Handle Data Collection Manually

        • If you don’t want BookIt to attach data collection to the form at all, you can pass an empty function to formDataCollectorTrigger() to prevent any automatic binding.

          Then, simply call LDBookItV2.collectFormData() yourself whenever you want to collect and store the form data.

        • Example:
      formDataCollectorTrigger: () => {} // prevents automatic binding

// Later in your flow
LDBookItV2.collectFormData();

Using the Provided Functions

Depending on which option you choose, you will use one of the following methods to collect and store data:

LDBookItV2.collectFormData()

    • This function will run the form data collection process (either with BookIt's default scraper or your custom formDataCollector() if one is defined) and automatically save the collected data into local storage.

LDBookItV2.saveFormData(formData: object)

    • If you already have JSON formatted formData (from another source or process), this function will store the formData in local storage for the process to pick up via a later call to the submission function.
    • Parameters:
        • formData: A JSON object of the data you would like to send over to LeanData's process.

 

Submission

To trigger the BookIt routing process and display the calendar, use the submit() function. You can call this after form submission or at any point in your flow. The function requires prospect data—either previously stored in local storage or passed in directly at the time of submission.

 

LDBookItV2.submit({ formData?: object, cb?: () = void) }) 

    • This function initiates LeanData’s routing process and triggers the calendar popup modal. It’s typically called after your form is submitted.
    • For BookIt to work properly, the form data must already be available—either saved to local storage (using any of the methods outlined in the Data Collection & Storage section) or passed directly in as formData.
    • Parameters (optional object):
        • formData (optional): If you haven't stored form data in local storage via our storage functions, you can pass it directly here as a JSON object.
        • cb (optional): A callback function to run before the popup modal displays. Currently, this is primarily used to pass in the iframe function returned by LDBookItV2.getIframeFn() when displaying the calendar inside an iframe instead of a modal. See this article for more information.

 

Additional Configuration Options

BookIt supports several optional parameters that can be passed into the options object within the initialize() function. These allow you to customize behavior and tailor the user experience to meet your specific needs—such as controlling calendar appearance, auto-launch behavior, or routing logic.

Here’s an example structure:

LDBookItV2.initialize('<Org Id>', '<Node Name>', '<Hidden Field Name>', {
   autoSubmit: true,
   googleAnalytics: 'G-XXXXXXX',
   loadingText: 'Loading...',
   popupModalCloseURL: 'https://example-close-modal.com',
   calendarTimeoutLength: 5 * 60 * 1000, // 5 minute timeout
});

For a complete list of available configuration options and details on how to use them, refer to the documentation here:
👉  BookIt For Forms - Customizable Snippet Options.

Usage Scenarios and Examples

BookIt is designed to be flexible and work across a variety of form setups and page flows. This section provides boilerplate examples for common use cases to help you implement BookIt in the way that best fits your form and calendar experience.

Each example includes:

  • Core setup steps using initialize() , setFormTarget(), and other required functions

  • Customizations for specific page flows (e.g., form pages vs. thank you pages)

  • Notes for handling special cases like iFramed forms or pre-existing prospect data

Use these examples as starting points and adjust them to match your form structure and routing logic.

 

Displaying The Calendar on a Form Page

Use the following baseline code to display the calendar on the same page as the form, triggered immediately after form submission. This is the most common implementation pattern and is a great starting point before applying any additional customizations.

<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 = {
    autoSubmit: true,
    /* define more options here if desired for further customization */
  };
  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>

 

Displaying The Calendar on a Thank You Page

⚠️ Important:  For this implementation, your Thank You page must share the same domain as your form page, as LeanData persists form data in local storage between redirects.

To display the calendar on a Thank You page after form submission, you’ll need two separate snippets:

  1. Form Page Snippet:
    This snippet collects and stores form data in local storage using LeanData’s provided storage functions. It does not modify the form submission behavior or redirect flow. After submission, the form will redirect to the Thank You page as usual (without any interference from LeanData's BookIt script).
    <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 = {
    /* define more options here if desired for further customization */
  };
  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>

     

  2. Thank You Page Snippet:

    On the Thank You page, this snippet retrieves the form data from local storage and submits it to LeanData's routing process.

    ⚠️ Note:  The initialize() function must be called before any other LDBookItV2 functions.
    Assuming that your Thank You page does not have a form and, therefore, no hidden field, you can pass a truthy value (e.g., true) for the '<Hidden Field Name>' parameter in the 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 = {
         /* define more options here if desired for further customization */
       };

       LDBookItV2.initialize('<Org Id>', '<Node Name>', true, options);
       LDBookItV2.submit();
     });
     document.body.appendChild(_ld_scriptEl);
    </script>

 

Displaying the Calendar Without a Form - Pre-Existing Prospect Data

In some scenarios, you may already know who the prospect is before presenting the calendar—for example, if they're a logged-in user in your app, or if you've already captured their details earlier in your flow.

In these cases, you can bypass the typical form scraping process and submit the data directly to LeanData. This approach is ideal when you have pre-collected data available and simply want to trigger routing and calendar display.

Initialization and BookIt Log ID Retrieval

This snippet initializes the BookIt script and generates a unique Log ID for the session. This Log ID allows LeanData to associate scheduled meetings and audit logs with the appropriate Salesforce record.

⚠️ Important:   BookIt does not update the Salesforce Lead or Contact record directly. It is the customer's responsibility to ensure the Log ID is written to the appropriate record. Typically, this happens automatically when BookIt is embedded in a form that syncs with your marketing automation platform. However, since you are bypassing a form in this implementation, you will need to handle this manually.

To retrieve the Log ID, use theLDBookItV2.getUniqueId() after initializing BookIt.

 

Note:  The BookIt Log ID is unique for each individual BookIt submission. Even if the prospect already has a BookIt Log ID stored from a previous submission, this value must be updated on the SFDC record each time they go through the booking process. Failing to update the Log ID could result in the new booking not being properly linked to their Salesforce record or included in BookIt reporting.

 

⚠️ Required: You must update the corresponding Salesforce Lead or Contact with the generated Log ID as soon as it becomes available. This is critical for enabling downstream functionality like BookIt audit logs and meeting association.

<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 = {
    /* define more options here if desired for further customization */
   };

   LDBookItV2.initialize('<Org Id>', '<Node Name>', true, options);

   // Retrieve the BookIt Log ID from the snippet
   let bookItLogID = LDBookItV2.getUniqueId();

   // 👉 Immediately send this Log ID to Salesforce or your MAP 
   // (e.g., via API callout, hidden form post, etc.)
 });
 document.body.appendChild(_ld_scriptEl);
</script> 

Trigger Submission Separately

Call this function at the appropriate point in your application flow— such as a button click, after a user action, or post-authentication— to trigger BookIt's routing process and calendar.

 LDBookItV2.submit({
   formData: data // replace with your pre-collected JSON data
 });

 

What To Do If Your Form Is Embedded in an iFrame

If your form is embedded in an iFrame and you want the BookIt calendar to display on the parent page, additional configuration is required. Because the parent page cannot directly access the form's DOM, both the parent page and the iFramed form must include specific code to enable communication and proper routing behavior. This setup allows the calendar to be launched from the parent while the form logic and submission occur inside the iFrame.

On the Parent Page

The parent page must initialize BookIt so it’s ready to display the calendar when routing is triggered.

<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 = {
    /* define any calendar customization options here */
  };

   LDBookItV2.initialize('<Org Id>', '<Node Name>', true, options);
 });
 document.body.appendChild(_ld_scriptEl);
</script>
⚠️ Note:  Any calendar-specific customizations should be passed as part of the initialize() options object on the parent page.

Inside the iFramed Form

The iFramed form handles all data collection and must trigger routing once the form is successfully submitted and stored. 2 scripts will be needed in the form:

  1. Initialize BookIt & Data Collection Functions
    Use LeanData’s functions to populate the hidden field with the unique ID and handle any form-specific logic up to the submit() step. 
    <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 = {
    /* define any  */
  };
  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>
    ⚠️ Note:  Add any form-related customizations (such as form setup or data collection) here in the iFramed form, not on the parent page.
  2. Load the iFrame Emitter and Trigger Routing
    Once the form has been submitted and data storage is confirmed, load the emitter script and trigger routing to display the calendar on the parent page: 
    <script>
     var _ld_scriptEl = document.createElement('script');
     _ld_scriptEl.src = 'https://cdn.leandata.com/snippet-misc/ld-v2-iframe-emitter.js';
     _ld_scriptEl.addEventListener('load', function () {
       LDBookItV2.startRouting();
     });
     document.body.appendChild(_ld_scriptEl);
    </script>
    ⚠️ Important:  Only call LDBookItV2.startRouting() after the form data has been fully collected and saved. 

    If this step is triggered before the form data is stored in local storage, BookIt will not launch the calendar, and the routing attempt will silently fail.

 

Troubleshooting & Debugging Tips

When implementing LeanData’s code, it's helpful to confirm that:

  • The LeanData process is correctly attached to your form

  • All expected data is being collected and passed properly

  • The BookIt calendar is being triggered as intended

To enable debugging and view LeanData logs in your browser console, run the following line in the JavaScript console:

window.localStorage.setItem('_LD_debugOn', true);

Once enabled, detailed logs will appear in the browser console to provide visibility into the LeanData BookIt flow—including ID injection, data storage, and routing behavior.

💡 Tip: Keep the console open as you interact with your form to watch the process in real time.

 

BookIt For Forms - Events API

BookIt emits several custom events throughout the submission and routing process. These events can be used to hook into key moments (e.g., when routing completes or the calendar modal is closed) and trigger additional behavior on your page.

You can listen to these events using standard JavaScript event listeners.

A full list of available events and their associated payloads can be found here:

👉 LeanData BookIt for Forms Events API Documentation

 

Step 4: Map Form Fields In Your BookIt for Forms' Routing Trigger Node

At this stage, you should be seeing the BookIt calendar appear on your site in the expected format (modal or iframe) and location (form page or thank you page).

The final step—often requiring a developer—is to map form fields from your form submission to variables in your BookIt routing trigger node within LeanData. This enables routing decisions based on user input.

Mapping Form Fields

You’ll need to gather the keys from your formData object and create corresponding variable mappings in your routing trigger node.

  • If you're passing in your own formData object via the JavaScript snippet:
    Mapping is straightforward, as you control the exact keys and values being sent.

  • If you're using the default form scraper (LeanData automatically collects input field values):
    You can inspect the collected formData by checking the Network tab in your browser's developer tools.

    Look for a request to: /routeFromFormInput
    The payload of this request will include the formData object that was captured at submission time. Use the keys in that object when setting up mappings in the trigger node.

Reminder: Node Name

While configuring this setup, ensure that you're passing the correct "Node Name" into the initialize() function. This name determines which routing trigger node will be activated during the process.

Articles in this section

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