Implement BookIt For Forms with Typeform

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

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

This guide walks you through how to display a calendar as a pop-up on a thank you page, triggered after a user submits your Typeform form and is redirected to that page. 

Configure Your Typeform Form

Add a Hidden Field to Capture the Log ID

First, make sure your Typeform form includes a hidden field to store the BookIt Log ID. If you haven't already done this, follow our guide on Adding a Hidden Field in Typeform. This value will later be used to update the associated Lead or Contact in Salesforce.

Add the BookIt Script To Your Form Page

Next, add LeanData’s code to your form page.

This guide assumes your Typeform is already embedded on your webpage. If it isn’t, go to Share → Embed in webpage in Typeform and follow the embed instructions there.

Once embedded, you should see an HTML element similar to the example below in your page’s code. Depending on your implementation, this may be a form container or a button that launches the Typeform

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

You’ll need to make two updates to this Typeform embed code. 

First, add the following HTML attribute to your element: ld-name="typeform"

Your embed should now look similar to this:

<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 the Typeform-provided script tag:

Be sure to replace the highlighted placeholder values in the script below:

• <Org ID> — Your 18-digit Salesforce Org ID. This should match the org where your live BookIt router graph resides (or the sandbox you’re testing in).

• <Hidden Field Name> — The name of the hidden field you created earlier to store the BookIt log ID.

🛠️  Important:  Be sure to remove the<>angle brackets when inserting your actual values.

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

💡 Note:  If you need to pass additional hidden fields to Typeform, you can include them in the same data-tf-hidden attribute. Add each field as a comma-separated key/value pair. For example:

form.setAttribute('data-tf-hidden', `${hiddenFieldName}=${hiddenUID},hiddenField2=hiddenFieldValue2`, ...`);

Be sure to follow the same fieldName=value format for each additional hidden field.

After you've made the adjustments, your final embed code should look similar to the following:

<div ld-name="typeform" data-tf-live="01FBHBEJKQ3NFWQI5FWIQ"></div>

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

<script src="//embed.typeform.com/next/embed.js"></script>

Add the BookIt Script to Your Thank You Page

Add the following script to the body or footer of your Thank You page.

Be sure to replace the highlighted placeholder values in the LDBookItV2.initialize() function:

• <Org ID> — Your 18-digit Salesforce Org ID. This should match the org where your live BookIt router graph resides (or the sandbox you’re testing in).

• <Trigger Node Name> — The name of the trigger node in your BookIt router graph. Use something descriptive like "Demo Request". You’ll configure this in a later step.

• <Hidden Field Name> — The name of the hidden field you created earlier to store the BookIt log ID.

🛠️  Important:  Be sure to remove the<>angle brackets when inserting your actual values.

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

Configure Your Trigger Node

Set Your Trigger Node Name

In your LeanData BookIt for Forms routing graph:

• Double-click on the Trigger Node to open the editor

• Update the Node Name to match the <Trigger Node Name> you defined earlier in your embed script

Add Your Field Mappings

To map values from your form into variables used in the routing logic, follow the steps in Setting Up Form Field Mappings for a Typeform Form. This will ensure that data entered into the form can be referenced and routed appropriately in your graph.

Configure the Rest of Your Routing Graph

Now that your trigger node and form field mappings are in place, you can continue building and customizing your routing logic.

Need help? Our LeanData Professional Services team is happy to assist with advanced configuration, best practices, or validation of your setup.