BookIt for Forms - Chatbot Integration with Qualified - Popup Implementation

• Overview
• Setup with 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 send LeanData BookIt URL
        • Send Visitors a Message with the Booking Link
• New Chat Prospect Trigger Node
• Add Website Snippets
• Required Snippets

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.

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

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

You will need to add a Track Event step into your Experience to notify us when to trigger the popup.

This event is what will send the collected information from Qualified to BookIt for processing. 

More information will be explained in the Add Website Snippets section below. 

• Add a Track Event step and enter Send LeanData BookIt URL as the Event Name.

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

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

Required Snippets

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 <!-- End Qualified -->, 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:

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

Additionally, add the following code to the body of your page:

<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'
  });
});
document.body.appendChild(_ld_scriptEl);
</script>

You’ll need to configure this snippet by changing the parts of this code to the following (remember to remove the ‘<>’ brackets):

• <LeanData Org ID> - The Org ID given under the “Org ID for Chatbot Compatibility” setting in the BookIt for Forms tab of your BookIt settings in LeanData.
• <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

For additional assistance please submit a ticket to LeanData Support.