BookIt For Forms - Unbounce Implementation - Display Calendar on the Form Page

Content:

• Overview and Key Notes
• Configure Your Unbounce Form
  • • Add a Hidden Field to Capture the Log ID
    • Configure Your Submission Confirmation
• 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

Overview and Key Notes

• This tutorial will configure a calendar to display as a pop-up on the form page after submission of an Unbounce Form.

Configure Your Unbounce Form

Add a Hidden Field to Capture the Log ID

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

Configure Your Submission Confirmation

Ensure your form’s Confirmation Type is set to Open URL in lightbox. Be sure to leave the URL field blank.

If your form redirects to another URL, you’ll need to implement the calendar on that destination page instead (see our separate implementation guide for that setup).

For any other confirmation types, please contact LeanData Professional Services for additional support.

Add the BookIt Script to Your Form Page

In the Unbounce form builder, navigate to the Javascripts and click +Add New JavaScript.

Update the Script Name to BookIt Script and paste the following code. 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 Field Name and ID of the hidden field you created

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

  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

You can define field mappings directly in the Trigger Node. This allows you to pass values from your form into variables that can be used in your graph’s routing logic.

When specifying Form Field API Names, you'll use the Field Name and ID values for each field on your form.

When adding field mappings in your Trigger Node:

• If available, select from the list of default variable options.

• Otherwise, define your own variable name and specify its type (e.g., string, email, phone).

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.