Content:

• Overview and Key Notes
• Configure Your Form
  • • Add a Hidden Field to Capture the Log ID
• Add the BookIt Script to Your Form Page
• Configure Your Trigger Node
  • • Set Your Trigger Node Name
    • Add Your Field Mappings
    • Configure the Rest of Your Routing Graph
• Supporting Both Legacy and Current Embedded Forms

⚠️ Important:    Choose the Right Guide for Your HubSpot Form Type
This guide is for:

• • HubSpot forms (using the form editor) whether embedded on your website (an external webpage) or added to a HubSpot landing/website page
  • legacy HubSpot forms (using the legacy form editor) that are only used on HubSpot landing/website pages

If you're only working with legacy embedded HubSpot forms—added to a non-HubSpot page using an embed code—check out this guide instead.

 

Not sure if you're using a legacy embedded form?

Follow these steps to check whether your form was ever embedded using the legacy method. If so, you should use this guide instead.

1. Open your form in the HubSpot Form Editor
2. If you see an Embed button in the top right corner, your form was built using the legacy form builder.
3. Click on the Embed button and open theEmbed code. If you’ve ever copied and pasted the embed code from here into a non-HubSpot page (like your company website), that form is considered a legacy embedded form, and you should follow the legacy guide.

 

Using both legacy embedded and current embedded HubSpot forms?

If your external webpage includes legacy embedded forms (built with the Legacy Form Editor and manually embedded on external, non-HubSpot pages), and you’re now adding new embedded forms created with the current Form Editor, you'll need a slightly different setup to support both.

We recommend reading through the full guide first, then checking out the Supporting Both Legacy and Current Embedded Forms section at the end to make final adjustments specific to your setup.

Overview and Key Notes

This guide walks you through how to display the calendar as a modal on the same page as your HubSpot form. 

Configure Your Form

Add a Hidden Field to Capture the Log ID

First, make sure your HubSpot 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 HubSpot. This value will later be used to update the associated Lead or Contact in Salesforce.

Add the BookIt Script to Your Form Page

Add the following BookIt script to the footer of your HubSpot page or to the same page where your non-legacy HubSpot form is embedded. You will need to update the placeholder values (highlighted in yellow) in the LDBookItV2.initialize() function. 

Replace the placeholders with your values:

• <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 internal name of the hidden HubSpot property you created earlier to store the BookIt log ID.

<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>', { autoSubmit: true });
    LDBookItV2.setFormProvider('hubspot');
  });
  document.body.appendChild(_ld_scriptEl);
</script>

To add the code to the footer of your HubSpot page:

1. Open your page in the HubSpot page editor
2. Navigate to Settings (top right corner) 
3. Scroll down to the Advanced section
4. Paste the BookIt script into the Footer HTML section

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 in Hubspot. 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.

Supporting Both Legacy and Current Embedded Forms

If you're using both legacy embedded forms and newer embedded forms on your external site (i.e., you've copied and pasted embed codes for both form types into non-HubSpot pages), there are a few adjustments required to ensure BookIt works consistently across both.

What's Different?

To support both legacy and current embedded HubSpot forms on the same external site, you'll need to:

• Update the embed code for your legacy HubSpot forms to support form targeting

• Slightly modify the BookIt script you placed on your form page to handle both types of embeds correctly

Update the Embed Code on Legacy Form

Navigate to the Embed code of your legacy form and look for the hbspt.forms.create() function within the script.

You’ll need to modify your form embed code to include an onFormReady callback that tells BookIt which form to target.

Add the following line inside your hbspt.forms.create configuration:

onFormReady: ((form) => trySettingFormTarget(form, <formId> ))

Replace <formId> with the same formId already defined in the embed code. These values must match exactly.

Your final embed code should look like this:

<script>
  hbspt.forms.create({
     region:  "<keep what was already here>'
     portalId:  "keep what was already here>"
     formId:  "abc-123-def-456", //Your actual formId value
     onFormReady:  ((form) => trySettingFormTarget(form, "abc-123=def=456"))
});
<script>
 

Update the BookIt Script on Your Form Page

Adjust the BookIt script on your form page to below. Be sure to update the placeholder values (highlighted in yellow). 

<script>
function trySettingFormTarget(form, formId) {
  if (window['legacyHubspotForm'] && window['legacyHubspotForm'].setFormTarget) {
    legacyHubspotForm.setFormTarget(form.id ? form : form[0]);
    legacyHubspotForm.setFormId(formId);
  } else {
    window.setTimeout(() => trySettingFormTarget(form, formId), 2000);
  }
}
var _ld_scriptEl = document.createElement('script');
_ld_scriptEl.src = 'https://cdn.leandata.com/js-snippet/ld-book-v2.js';;
_ld_scriptEl.addEventListener('load', function () {
  // for legacy form
  LDBookItV2.initialize('<Org ID>', '<Trigger Node>', '<Hidden Field>', {
    autoSubmit: true,
    namespace: 'legacyHubspotForm'
  });
  legacyHubspotForm.setFormProvider('hubspot_embed');
  LDBookItV2.initialize('<Org ID>', '<Trigger Node>', '<Hidden Field>', { autoSubmit: true });
  LDBookItV2.setFormProvider('hubspot');
});
document.body.appendChild(_ld_scriptEl);
</script>