BookIt for Forms - Chatbot Integration with Qualified - Landing Page

Updated August 30, 2025 00:04

Overview
Setup with Qualified
- - Create Required Visitor Fields in Qualified
  - Design your Experience Flow
New Chat Prospect Trigger Node
Add the BookIt Script to Your Pages
- Add the BookIt Script to Your Chatbot Page
- Add the BookIt Script to Your Landing Page

Overview

This guide explains how to configure your Qualified chatbot to share a booking link with prospects directly in a chat message. The link will direct users to a webpage of your choice where they can complete their booking. If you have any questions during setup, please contact LeanData Support.

Setup with Qualified

Create Visitor Fields

To use BookIt for Forms with your Qualified chatbot, you’ll need to create a few Visitor Fields to capture the necessary data.

From within Qualified, navigate to: App Settings > Visitor Fields

Add the following Visitor Fields:

First Name
- API Name: first_name
- Type: Text
- If you already have this field, no need to create it again.
Last Name
- API Name: last_name
- Type: Text
- If you already have this field, no need to create it again.
LeanData BookIt Landing Page URL
- API Name: leandata_bookit_landing_page_url
- Type: Text
- This field will contain the URL of the page where you want your chatbot to direct users when displaying the calendar.
LeanData BookIt Log ID
- API Name: leandata_bookit_log_id
- Type: Text
- This stores the BookIt Log ID, which can be passed to your marketing automation platform to tie the record back to the chat submission.
LeanData BookIt Chat Fields
- API Name: leandata_bookit_chat_fields
- Type: Text
- This will contain mappings that associate your Visitor Fields with the form fields used in your BookIt routing logic.
LeanData BookIt Routing Link
- API Name: leandata_bookit_routing_link
- Type: Text
- This will store the Smart Booking Link that’s generated by BookIt.

These are required in addition to any other fields you’d like to capture during the chat flow.

Design your Experience Flow

Now that your Visitor Fields are set up, the next step is to configure your chatbot Experience.

From within Qualified, go to: App Settings > Experiences, and either create a new Experience or edit an existing one.

You’ll need to add the following steps to your Experience — in addition to any other custom steps you may already use:

Set First Name and Last Name

Use the Set a Value step to populate your Visitor Fields:

First Name → {{visitor.first_name}}
Last Name → {{visitor.last_name}}

These will later be passed to LeanData to pre-fill form fields and route intelligently.

Set LeanData BookIt Landing Page URL

Next, you'll need to add a step to set your LeanData BookIt Landing Page URL.

Use a Set a Value step to set your LeanData BookIt Landing Page URL Visitor Field to your desired landing page URL

Set LeanData BookIt Chat Fields

Next, you’ll need to map your Qualified Visitor Field API Names to your BookIt Flowbuilder's Form Field API Names in the Trigger Node (see below). This allows you to pass values from your chatbot into variables that can be used in your graph’s routing logic.

Use a Set a Value step to populate the LeanData BookIt Chat Fields Visitor Field with a comma-separated list of mappings in the following format:

visitor_field_api1:flowbuilder_api1,visitor_field_api2:flowbuilder_api2,etc

⚠️ No spaces in the mapping string.
📌 Be sure to include all fields you plan to use in your BookIt for Forms graph.

Add Track Event to Send LeanData BookIt URL

Insert a Track Event step to trigger the BookIt Smart Booking Link generation.

Event Name: Send LeanData BookIt URL

This step collects the visitor data you've set and passes it to LeanData to generate the Smart Booking Link. More information will be explained in the Add The BookIt Script to Your Page section below.

After this step, you can now use these updated visitor fields in the rest of your flow.

Send Visitors a Message with the Booking Link

Once the BookIt link is generated, send it back to the prospect in a chat message.

Add a Send a Message step that includes the {{visitor.leandata_bookit_routing_link}} merge tag.
Add a short delay (recommended: 2 seconds) before this message step to allow time for the routing link to be generated and available in the Visitor Field.

New Chat Prospect Trigger Node

You will need to set up a New Chat Prospect Trigger Node to map the fields collected from your chatbot to your BookIt Flowbuilder graph.

From the Node Bar, drag in a New Chat Prospect Trigger Node and open it.

In the Form Field Mapping section, set up the mappings between your Form Fields to the Variables they will correspond to in your FlowBuilder graph. The Form Field API names should be taken from the mappings you created in the LeanData BookIt Chat Fields Visitor Field within Qualified.

After creating your mappings, in the Trigger Edge section, direct the Insert edge of New Chat Prospect Trigger Node to the next step in your graph or you can do so visually from within the FlowBuilder interface.

Be sure to note the name you give to this node as you will be using it in a later step!

Add the BookIt Script to Your Pages

Add the BookIt Script to Your Chatbot Page

You will need to add code snippets onto the HTML of the web page that hosts your chatbot.

You should have some Qualified provided code on your webpage that looks something like the following:

<!-- Qualified -->
<script>
  (function(w, q) {
    w['QualifiedObject'] = q;
    w[q] = w[q] || function() {
      (w[q].q = w[q].q || []).push(arguments)
    }
  })(window, 'qualified');
</script>
<script async src="https://js.qualified.com/qualified.js?token=yourtoken"></script>
<!-- End Qualified -->

Directly above the line that says  (highlighted above), add the following code:

<script>
  qualified('handleEvents', function(name, data) {
    switch (name) {
      case 'Send LeanData BookIt URL':
        if (LDBookItChat.isLastActiveTab()) {
          const encodedURLParams = LDBookItChat.generateEncodedURLParamsQualified(data.field_values, data.field_values.leandata_bookit_chat_fields);
          const fieldValues = {
            leandata_bookit_log_id: LDBookItChat.getUniqueId(),
            leandata_bookit_routing_link: LDBookItChat.generateLandingPageURLWithEncodedParams(data.field_values.leandata_bookit_landing_page_url, encodedURLParams)
          };
          qualified('identify', fieldValues);
        }
        break;
    }
  });
</script>

You should have something that looks like the following:

<!-- Qualified -->
<script>
  (function(w, q) {
    w['QualifiedObject'] = q;
    w[q] = w[q] || function() {
      (w[q].q = w[q].q || []).push(arguments)
    }
  })(window, 'qualified');
</script>
<script async src="https://js.qualified.com/qualified.js?token=yourtoken"></script>

<script>
  qualified('handleEvents', function(name, data) {
    switch (name) {
      case 'Send LeanData BookIt URL':
        if (LDBookItChat.isLastActiveTab()) {
          const encodedURLParams = LDBookItChat.generateEncodedURLParamsQualified(data.field_values, data.field_values.leandata_bookit_chat_fields);
          const fieldValues = {
            leandata_bookit_log_id: LDBookItChat.getUniqueId(),
            leandata_bookit_routing_link: LDBookItChat.generateLandingPageURLWithEncodedParams(data.field_values.leandata_bookit_landing_page_url, encodedURLParams)
          };
          qualified('identify', fieldValues);
        }
        break;
    }
  });
</script>
<!-- End Qualified -->

Additionally, add the following code to the body of your page that contains the chatbot. You will need to update the placeholder values (highlighted in yellow) in the LDBookItV2.initialize() function.

Replace the placeholders with your values:

<LeanData Org ID> — This is your “BookIt Org ID”, which LeanData uses to identify your organization. You can find this in your LeanData product under:
BookIt > Settings > General > Scroll down to BookIt Org ID.
<Trigger Node Name> — The name you gave to the New Chat Prospect Trigger Node on your live BookIt router graph that you would like to enter the graph through that you created in an earlier step

🛠️ Important: Be sure to remove the<>angle brackets when inserting your actual values.

<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() {
    LDBookItV2.initialize('<LeanData Org Id>', '<Trigger Node Name>', true, {
      loadingText: "Loading Scheduling Experience...",
      popupModalCloseURL: "#",
      namespace: 'LDBookItChat'
    });
    LDBookItChat.setChatProvider('qualified');
  });
  document.body.appendChild(_ld_scriptEl);
</script>

Add the BookIt Script to Your Landing Page

Now, update the body of the landing page you’ll be redirecting to (the page where the calendar will display):

Add a <div> with the class bookit-content-container. This will serve as the placeholder. LeanData will automatically detect this container and insert the calendar iFrame into it:

<div class="bookit-content-container"></div>

Finally, add the following code to the body of your page. You will need to update the placeholder values (highlighted in yellow) in the LDBookItV2.initialize() function.