Contents:

• Overview and Things to Note
• Prerequisites
• Qualified Dashboard Setup
• Set Up BookIt AI Goal
• Add BookIt AI Goal To Your Experiences
• BookIt Script & Graph Setup
• Summary

 

Overview and Things to Note

• This guide will configure a calendar to display as a pop-up on a page after an AI SDR interaction with Qualified.
• The setup involves creating a visitor field in Qualified, configuring an AI Goal to collect lead data and trigger BookIt's calendar popup, adding the combined BookIt + Qualified script to your web page, and creating a trigger node in your BookIt for Forms router graph.

 

Prerequisites

Before starting, make sure you have the following:

• An active LeanData BookIt for Forms subscription.
• Access to a Qualified account with admin permissions.
• A Salesforce Org with a live (or test) BookIt for Forms router graph.
• Your 18-Digit SFDC Org ID.

 

Qualified Dashboard Setup

Create Required Visitor Field in Qualified

We'll need to create a visitor field to capture the BookIt Log ID for each prospect's meeting inquiry.

Step 1 - Add Field

Navigate to App Settings > Fields > + Add Field

Set the following:

• Name: LeanData BookIt Log ID
• API Name: leandata_bookit_log_id
• Type: text
• Hide field: checked

Step 2 - Connect Source Field

Now we need to connect this Qualified LeanData BookIt Log ID field with your MAP or SalesForce BookIt Log ID field.

Scroll down to Sources and click + to add your sources and select the correct Log ID field in your source.

Make sure to Keep the blank value.

Step 3 - Add SFDC/MAP Field Mapping

We'll need Qualified to push the BookIt Log ID to your MAP or SFDC (depending on your integration).

Navigate to the Integrations drop down and select your integration's mapping.

If you are directly integrating to SalesForce, you must add the field mapping to both Lead Mapping and Contact Mapping.

• Add your BookIt Log ID Field from your integration in the left column.
• Then select the LeanData BookIt Log ID Qualified field we've just created in the middle column.
• Leave the Default value blank.

 

Set Up BookIt AI Goal

Step 1 - Create AI Goal

First, we'll create an AI Goal in which your AI SDR will collect the lead data needed to route, then trigger BookIt's calendar popup.

Navigate to AI > Agent Studio > Goals > Create a Goal

• Feel free to name this goal. We recommend including "BookIt Popup" for easy recognition.
• Toggle this goal on.

Step 2 - Add AI Branch

Then click on the + sign and add an AI Branch.

Step 3 - Collect All Data Needed For BookIt Routing

This step is where you'll configure your AI to ask for lead information you need for BookIt's routing.

Step 4 - Add BookIt Trigger Event

Click the + sign under Match and add a Track Event. Then name the Event Trigger BookIt.

This step configures Qualified to pass the lead information to the BookIt script on your page and trigger BookIt's routing and calendar.

Step 5 - Add Visitor Guidance and other steps as needed

Your BookIt AI Goal is fully set up!

This is an optional step, but we highly recommend adding a Visitor guidance step so your prospects are aware of next steps. For example:

"Inform the visitor that you're checking for available meeting times and they might see a scheduler pop up. If there are no meeting times available, our team will be in touch with them as soon as possible."

Feel free to add other steps such as slack notifications and updating fields as needed.

 

Add BookIt AI Goal To Your Experiences

These next steps will guide you through adding a button to your chatbot that will start the BookIt Popup AI Goal we've just created. Please work with your Qualified CSM to also enable any rules you'd like your AI SDR to run this AI Goal.

• Navigate to Experiences > Automatic > Your Desired Experience
• Click on the Start AI SDR step
• Check your BookIt AI Goal and add a button. Provide a name - this is what your prospects will see.

 

BookIt Script & Graph Setup

BookIt & Qualified Script

We will need to add BookIt's script to your Qualified embed code. At the end of this step, you'll have a final script that combines your Qualified script with BookIt's script. Replace your current Qualified script with this final script.

You can place this final script globally in the footer or on each desired page's body or footer.

Step 1 - Find Your Qualified Embed Code

You should already have your Qualified-provided code, similar to below. Copy this code.

<!-- 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 src="<https://js.qualified.com/qualified.js?token=yourtoken>""></script>

 

Step 2 - Updated Qualified + BookIt Script

The script below is the final combined script you'll deploy. There are a few adjustments to make (in bold pink).

• You'll need to update the placeholder values with your Salesforce Org ID and a Trigger Node Name.

• Replace the placeholder Qualified code with your Qualified code.

<!-- BookIt Script -->
<script>
 function initBookItChat(){
   LDBookItV2.initialize('Salesforce Org ID', '<Trigger Node Name>', true, {
     loadingText: "Loading Scheduling Experience...",
     popupModalCloseURL: "#",
     namespace: 'LDBookItChat'
   });
  LDBookItChat.setChatProvider('qualified');
 }
 if (window.LDBookItV2) {
   console.log('BookIt already loaded. Proceeding to chat enablement');
   initBookItChat();
 } else {
   var _ld_scriptEl = document.createElement('script');
   _ld_scriptEl.src = '<https://cdn.leandata.com/js-snippet/ld-book-v2.js>';;
   _ld_scriptEl.addEventListener('load', function() {
     initBookItChat();
   });
   document.body.appendChild(_ld_scriptEl);
 }
</script>
<!-- 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 src="<https://js.qualified.com/qualified.js?token=yourtoken>"></script>;
<!-- BookIt + Qualified -->
<script>
 qualified('handleEvents', function(name, data) {
   switch (name) {
     case 'Trigger BookIt':
       if (LDBookItChat.isLastActiveTab()) {
         var leadData = data.field_values;
         var logId = LDBookItChat.getUniqueId();
         qualified('identify', { leandata_bookit_log_id: logId });
         leadData.leandata_bookit_log_id = logId;
         if (leadData.name && leadData.name.length) {
           var nameParts = leadData.name.split(' ');
           var firstName = nameParts[0];
           var lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
           if (firstName) leadData.first_name = firstName;
           if (lastName) leadData.last_name = lastName;
         }
         LDBookItChat.submit({ formData: leadData })
       }
       break;
   }
 });
</script>

 

Step 3 - Test the New Script & Collect Qualified's Field Names

Deploy the combined script and navigate to your page.

Before testing the flow, open up your browser's DevTools by:

• Right click on any empty space of the page.
• Select Inspect.
• Select Network.
• Type route in the search bar.

Then test your Qualified flow.

After your test, you'll notice a red routeFromFormInput in the Network tab you have open.

• Click on it and click the Payload tab.
• Click on the arrow next to formData.

 

Copy down the field names you see. These will be the text before the colon. For example, first_name is the field name.

We'll be adding these field names to your Trigger Node.

Step 4 - Create your Trigger Node in Your BookIt For Forms Graph

• Open your BookIt For Forms graph and add a new Chatbot Prospect Trigger Node.
• Name your node with the name you used for your BookIt script.
• Add the fields you collected in the previous step.

Deploy your graph and test your Qualified flow once again.

You're all set!

 

Summary

This guide covered how to configure BookIt for Forms to display a calendar as a pop-up on a page using Qualified AI SDR. You set up the required visitor fields in Qualified, configured an AI Goal to collect lead data and trigger BookIt's calendar popup, added the combined BookIt + Qualified script to your page, and created a trigger node in your router graph.

For questions or additional assistance, please contact LeanData Support.