Content:

• Overview and Key Notes
• Configure Your Form
  • • Add a Hidden Field to Capture the Log ID
    • Update Embed Code to Configure Form Targeting
• 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

⚠️  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.

 

 

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.

 

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.

Update the 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.

You’ll need to modify this function 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))

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>

Add the BookIt Script to Your Form Page

• <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>  
     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>', { autoSubmit: true });  
       LDBookItV2.setFormProvider('hubspot_embed');  

});  

document.body.appendChild(_ld_scriptEl); 

</script>

Configure Your Trigger Node

Set your Trigger Node Name

• 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

Configure the Rest of Your Routing Graph

Supporting Both Legacy and Current Embedded Forms

What's Different?

• 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

Update the Embed Code on Legacy Form

<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

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