1. LeanData Help Center
  2. BookIt
  3. BookIt-Hubspot Implementation Guides

[Legacy] BookIt For Forms - Embedded HubSpot Form Implementation - Display Calendar on a Thank You Page

Updated
Have more questions? Submit a request

Content:

⚠️  Legacy Notice:  This article applies to older versions of HubSpot’s embedded forms. For newer behavior (including HubSpot Landing Pages or embedded forms), see this guide.
LegacyHubspotFormBuilder
How to check if you're using a legacy embedded form:
  1. Open your form in the Hubspot Form Editor
  2. If you see an Embed button in the top right corner, you're likely using the legacy form builder.
  3. Click on the Embed button to confirm-- if you see the Embed code, then your form is a legacy embedded form.
ConfirmingHubspotLegacyForm

 

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 a calendar as a pop-up on a thank you page, triggered after a user submits a HubSpot form and is redirected to that page.

⚠️  This method applies only if you’re embedding your HubSpot form using the embed code on an external webpage (not using HubSpot’s landing page builder).

If you're using a HubSpot landing page or a newer embedded form, refer to this guide instead.

 

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.

Update Embed Code to Configure Form Targeting

Since you're using HubSpot’s embed code, look for the hbspt.forms.create() function within the script in the Embed code.

HubspotLegacyEmbedFormCode

You’ll need to modify this function to include an onFormReady callback that tells LeanData which form to target. Add the following line inside your hbspt.forms.create configuration:

onFormReady: ((form) => trySettingFormTarget(form))

Your final embed code should look something like this: 

<script>
 hbspt.forms.create({
   region: "<keep what was already here>",
   portalId: "<keep what was already here>",
   formId: "<keep what was already here>",
   onFormReady: ((form) => trySettingFormTarget(form))
 });
</script>
⚠️ Note: If you have multiple forms on the same page, you can repeat this step for each form.

If you only want to target specific forms (not all), this requires additional customization. Please contact LeanData Professional Services for assistance.

 

Add the BookIt Script to Your Form Page

Below is the BookIt script you will add to the same page as your embedded HubSpot form. 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.

🛠️  Important:  Be sure to remove the<>angle brackets when inserting your actual values.
<script>
  function trySettingFormTarget(form) {
    if (window['LDBookItV2'] && window['LDBookItV2'].setFormTarget) {
      LDBookItV2.setFormTarget(form.id ? form : form[0]);
    } else {
      window.setTimeout(() => trySettingFormTarget(form), 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 () {
    LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', '<Hidden Field Name>');
    LDBookItV2.setFormProvider('hubspot_embed');
  });

  document.body.appendChild(_ld_scriptEl);
</script>

 

Add the BookIt Script to Your Thank You Page

To trigger the calendar pop-up on a thank you page, first make sure your HubSpot form is configured to redirect to a page on the same domain as the form page after submission.

On that thank you page, add the following script. This will load the LeanData BookIt library and trigger the calendar once the page loads.

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.

🛠️  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>', true);
    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 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.

📘 Note: We recommend first reading through this full guide to understand the standard setup. Then, return to this section to make the necessary final adjustments for dual-form support.

⚠️ Important: If you have multiple legacy forms on the same page and only want to target specific forms (not all), this requires additional customization. Please contact LeanData Professional Services for assistance.

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 on your form page to handle both types of embeds correctly

  • Slightly modify the BookIt script on your thank you page

Update the Embed Code on Legacy Form

You’ll need to modify your form embed code to below.

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>
⚠️ Make sure your formId is copied exactly — including the quotation marks — in both places.

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>', { namespace: 'legacyHubspotForm' });
  legacyHubspotForm.setFormProvider('hubspot_embed');

  LDBookItV2.initialize('<Org ID>', '<Trigger Node>', '<Hidden Field>');
  LDBookItV2.setFormProvider('hubspot');
});

document.body.appendChild(_ld_scriptEl);
</script>

Update the BookIt Script on Your Thank You Page

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

<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>', true, { namespace: 'legacyHubspotForm' });
    LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', true);
    
    if (window.localStorage.getItem('LDBookItV2_savedFormData')) { 
        LDBookItV2.submit(); 
    } else { 
       legacyHubspotForm.submit(); 
    }
  });
  document.body.appendChild(_ld_scriptEl);
</script>

Articles in this section

Was this article helpful?
0 out of 0 found this helpful
Share