Content:
- Overview and Key Notes
- Configure Your Gravity Form
- Add the BookIt Script to Your Thank You Page
- Configure Your Trigger Node
Overview and Key Notes
This guide walks through how to configure BookIt to display a calendar as a pop-up on a thank you page, triggered after a user submits your Gravity Form and is redirected to that page.
Configure Your Gravity Form
Add a Hidden Field to Capture the Log ID
First, make sure your Gravity 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 Gravity Forms. This value will later be used to update the associated Lead or Contact in Salesforce.
Add the BookIt Script to Your Form
To add the BookIt script, open your form in the Gravity Forms builder and add an HTML field. This field won’t be visible to users on the live form, so feel free to name it however you'd like.
Next, paste the following BookIt snippet into the Content section of the HTML field. This is where the script will run to enable scheduling functionality on your 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 Field Label of the hidden field you created earlier to store the BookIt log ID.
<>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('gravityforms'); });
document.body.appendChild(_ld_scriptEl); </script>
Configure Your Submission Confirmation
In the Gravity Forms builder, navigate to your form’s Confirmation settings:
Set the Confirmation Type to Redirect and Redirect URL to your Thank You page.
From here we will need to configure the Redirect Pass Field Data via Query String option, following the example Gravity Forms provides. We will utilize this to define which form fields and values we want to send over to the LeanData BookIt graph to use in routing logic.
On the left side of an equals sign, enter a name you would like to give to each field you would like to send over to your LeanData BookIt graph.
- spaces
- ampersands
- equal signs
On the right side of the equals signs, enter the merge tags for the value of the corresponding field name.
You can chain these together with multiple ampersands to include all of the form field names and values you would like to send over.
Add the BookIt Script to Your Thank You 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.
<>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);
if (LDBookItV2.validateTempUID()) {
LDBookItV2.saveFormDataFromURLParams();
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
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 names on the left hand side of the equals sign you specified for each form field when defining the redirect query string in an earlier step.
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.