BookIt for Forms - Chatbot Integration with Qualified - Popup Implementation

• Overview
• Setup with Qualified
• Create Visitor Fields
• Design your Experience Flow
• 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 Visitor Fields

In order to use BookIt for Forms with your chatbot provider, you will need to ensure you capture the necessary information into Visitor Fields. 

To create Visitor Fields, 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 a Visitor Field for First Name, you do not need to create another one.
• Last Name (API Name: last_name) (Type: Text)
  • If you already have a Visitor Field for Last Name, you do not need to create another one.
• LeanData BookIt Log ID (API Name: leandata_bookit_log_id) (Type: Text)
  • This will be the field where LeanData stores its BookIt log id. This ID can be used in your marketing automation to associate the new record with the chatbot submission.
• LeanData BookIt Chat Fields (API Name: leandata_bookit_chat_fields) (Type: Text)
  • This will contain mappings to associate your Visitor Fields with LeanData BookIt Form Fields.

These fields will be needed in addition to any other information you wish to capture in your chatbot flow.

Design your Experience Flow

Next you will need to incorporate certain steps into your Experience flow. From within Qualified, navigate to App Settings > Experiences and either create a new Experience or modify an existing Experience.

You will need to add the following steps into your Experience. These steps will be in addition to any other steps you may wish to incorporate into your Experience.

Set First Name and Last Name

• Set your First Name Visitor Field to {{visitor.first_name}}.
• Set your Last Name Visitor Field to {{visitor.last_name}}.

Set LeanData BookIt Chat Fields

You will need to set up the mappings between your Qualified Visitor Field API Names to your Flowbuilder Form Field API Names used in your New Chat Prospect Trigger Node field mapping (see below).

• Set your LeanData BookIt Chat Fields Visitor Field to a comma separated list of these mappings, following the form (no spaces):

  visitor_field_api1:flowbuilder_api1,visitor_field_api2:flowbuilder_api2,etc

• Make sure you include mappings for all the fields you will want to use in your BookIt for Forms FlowBuilder 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.