BookIt For Forms - Marketo Implementation - Display Calendar on a Thank You Page

Have more questions? Submit a request

Content:

 

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 Marketo form and is redirected to that page. 

If you prefer the calendar to display as a modal on the same page as your form, please refer to this guide instead.

Configure Your Marketo Form

Adding Your Hidden Field

First, make sure your Marketo 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 Marketo. 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 form page. 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 of the hidden field you created earlier to store the BookIt log ID.

🛠️  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>');
    LDBookItV2.setFormProvider('marketo');
  });
document.body.appendChild(_ld_scriptEl); </script>

Add the BookIt Script to Your Thank You Page

First, make sure your form is configured to redirect to a thank you page on the same domain as the form page. Add the following script to the page you wish to render the calendar on.

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

Articles in this section

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