BookIt For Forms - Hubspot Implementation - Display Calendar on the Form Page (Using Hubspot Landing Pages)

Updated February 05, 2024 21:51

Content:

Overview and Things to Note

This tutorial will configure the calendar to display as a modal on the same page as your form
This tutorial will only work if you are using Hubspot forms via direct integration with Hubspot Landing Pages and are not using Hubspot’s embed code.
- Please refer here for a guide on how to implement LeanData's code using Hubspot’s form embed code to insert your form on your webpage.

Configuring Your Form

Adding Your Hidden Field

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

Configuring Your Form Page

Add the following code to the footer of your landing 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>', { autoSubmit: true });
   LDBookItV2.setFormProvider('hubspot');
 });
 document.body.appendChild(_ld_scriptEl);
</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.
<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 Label> - The value you specified for the name of the hidden field property you created in an earlier step.

Creating Your Router Graph

Setting your Trigger Node Name

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.

Adding Your Field Mappings

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

Configuring Your Router 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!