Content:

• Overview and Key Notes
• Configure Your Typeform Form
  • • Add a Hidden Field to Capture the Log ID
• Add the BookIt Script To Your Form Page
• Add the BookIt Script to Your Thank You Page
• Configure Your Trigger Node
  • • Set Your Trigger Node Name
    • Add Your Field Mappings
    • Configure the Rest of Your Routing Graph

 

Overview and Key Notes

To use BookIt for Forms with Typeform, your form must end with a Redirect to URL configuration.

This guide walks through how to configure your calendar to appear as a modal on the thank you page, which the user is redirected to after submitting the form.

 

Configure Your Typeform Form

Add a Hidden Field to Capture the Log ID

To start, please follow the instructions in Add a Hidden Field in Typeform to add a hidden field to your form to capture the log id to send over to your created leads/contacts.

Add the BookIt Script To Your Form Page

The next step is to add LeanData's code to your form page.

Assuming you already have your Typeform form embedded in your webpage (if you don’t, you’ll need to go to Share → “Embed in webpage” and follow the instructions there), you’ll have something similar to the following HTML element in your code. Note that this could also be a button.

<div data-tf-live="01FBHBEJKQ3NFWQI5FWIQ"></div>
<script src="//embed.typeform.com/next/embed.js"></script>;

 

We’re going to have you make a few modifications to this. First, add the following HTML attribute to your element: ld-name="typeform"

Your code should look like this now:

<div ld-name="typeform" data-tf-live="01FBHBEJKQ3NFWQI5FWIQ"></div>
<script src="//embed.typeform.com/next/embed.js"></script>;

   

Next, add the following script tag between the div and Typeform provided script tag.

<script>
 //TODO: Define this...
 var orgId = '<Org Id>';
 var hiddenFieldName = '<Hidden Field Name>';

 (function (orgId, hiddenFieldName) {
   let hiddenUID = `${orgId}_${Date.now()}_${Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)}`;
   let form = document.querySelector('[ld-name="typeform"]');
   form.setAttribute('data-tf-hidden', `${hiddenFieldName}=${hiddenUID}`);
   window.localStorage.setItem('LDBookItV2_tempSavedUID', hiddenUID);
 })(orgId, hiddenFieldName)
</script>

 

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

• <Org Id> - Your 18 digit Salesforce Org ID. This will be for the Salesforce Org that has your live BookIt router graph or the one you would like to test on.
• <Hidden Field Name> - The name you gave your hidden field in an earlier step (”ld_bookit_log_id” in the example)

Note: if you have additional hidden fields you are sending over to Typeform, you can add those in this line form.setAttribute('data-tf-hidden', ${hiddenFieldName}=${hiddenUID}); in the same format separated by commas (e.g. form.setAttribute('data-tf-hidden', ${hiddenFieldName}=${hiddenUID},hiddenField2=hiddenFieldValue2,...);)


Add the BookIt Script to Your Thank You Page
Add the following code anywhere in the HTML of your thank you 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('<Org Id>', '<Trigger Node Name>', '<Hidden Field Name>');
   LDBookItV2.setFormProvider('typeform');
   if (LDBookItV2.validateTempUID()) {
     LDBookItV2.saveFormDataFromURLParams();
     LDBookItV2.submit();
   }
 });
 document.body.appendChild(_ld_scriptEl);
</script>

 

You’ll need to configure this snippet by changing the parts of this code to the following:

• <Org Id> - Your 18 digit Salesforce Org ID. This will be for the Salesforce Org that has your live BookIt router graph or the one you would like to test on.
• <Trigger Node Name> - The name of the trigger node on your live BookIt router graph that you would like to enter the graph through. There will be instructions for the configuration of this in a later step, so for now just enter a name that describes the purpose of your form, like “Demo Request”.
• <Hidden Field Name> - The name you gave your hidden field in an earlier step (”ld_bookit_log_id” in the example)

 

Configure Your Trigger Node

Configuring Your Trigger Node

In your LeanData BookIt For Forms routing graph, double click on your trigger node.

Update the “Node Name” to the <Trigger Node Name> you defined in an earlier step.

 

Add Your Field Mappings

Next, please follow the guide Setting Up Form Field Mappings for a Typeform Form to map values from entries in your form to variables that can be used in logic in your graph.

 

Configure the Rest of Your Routing Graph

From here you can configure your routing graph and the rest of your LeanData BookIt instance with the help of LeanData's professional services team!