• • Overview
  • Set Up Qualified
    • • Create Required Visitor Fields in Qualified
      • Design Your Experience Flow
        • • Set First Name and Last Name
          • Set LeanData BookIt Chat Fields
          • Add Track Event to Trigger BookIt
  • New Chat Prospect Trigger Node
  • Add the BookIt Script to Your Page

Overview

The following guide will walk through the process of setting up your Qualified chatbot to popup a calendar over the page containing the chatbot.

If any questions arise, please reach out to LeanData support.

 

Set Up Qualified

Create Required Visitor Fields in Qualiifed

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 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.

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 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

 

Add Track Event to Trigger BookIt

Insert a Track Event step to notify BookIt when to trigger the popup.

• Event Name: Send LeanData BookIt URL

This step collects the visitor data you’ve configured and passes it to BookIt for processing. More details are provided in the Add the BookIt Script to Your Page section below. 

 

 

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 thef 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 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:

 

<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>;

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()
          };
          qualified('identify', fieldValues);
          LDBookItChat.startChatRouting(null, encodedURLParams);
        }
        break;
    }
  });
<script>

You should have something that looks like the following:

<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()
          };
          qualified('identify', fieldValues);
          LDBookItChat.startChatRouting(null, encodedURLParams);
        }
        break;
    }
  });
<script>

 

Additionally, 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. 

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

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>

For additional assistance please submit a ticket with LeanData Support .