Contents:
- Overview and Things to Note
- Add a Hidden Field to Your Form
- Add LeanData's Code to Your Form Page
- Initialization Function
- Data Storage Functions
- Submission Functions
- Additional Options
- General Usage
- Example Code
- Debugging
- Add Form Field Mappings to Your LeanData Booklt for Forms Routing Trigger Node
Overview and Things to Note
This document contains all of the technical details behind the code snippets that allow BookIt to connect to your forms.
- While this document provides guidance to construct your own code snippet, some may prefer assistance from LeanData’s support team. Please do not hesitate to reach out to LeanData support for additional assistance.
This document contains information on implementations without out-of-the-box support. If you are using Pardot, Hubspot, Marketo, Gravity Forms, Unbounce, Typeform, or Eloqua forms, please look through these out-of-the-box implementation guides to find one that suits your use case.
At a very high level, the general flow for implementing LeanData BookIt for Forms is the following:
- Add a hidden field to your form that can ingest LeanData's unique id so that it can be added as a field on your lead/contact upon form submission via your lead/contact creation process.
- Add LeanData's code to your form page and possibly your thank you page (this is where all of the code configuration takes place).
Add form field mappings to your LeanData BookIt for Forms routing trigger node to have access to form field values in your routing graph and build out your graph.
Add a Hidden Field to Your Form
LeanData requires that your form contains a hidden field that maps to a field on the lead/contact that gets created from a form submission.
LeanData's code will insert a unique id into this hidden field that will be used to associate a BookIt submission with the lead/contact that was created from the form submission.
Ideally, this field should be given a name attribute. The value of this name attribute will be passed in as a parameter to the code so that LeanData can find it and insert the unique id into it.
Add LeanData's Code to Your Form Page
As a prerequisite, you must be able to insert HTML or vanilla JavaScript into the page containing your form.
Before outlining how the code snippet configuration works, please note that configuring the required code snippet entirely on your own is not recommended. Please reach out to LeanData support for assistance with this.
LeanData's code will be imported with the following snippet:
<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 () {
// Add LeanData specific code that should be kicked off right away here
});
document.body.appendChild(_ld_scriptEl);
</script>
This snippet will import LeanData script and register an event listener to run some of the initialization code. Within the load event listener, you will have access to several methods on the LDBookItV2 class:
Initialization Function:
LDBookItV2.initialize(orgId: String, nodeName: String, hiddenFieldName: String, options: any)
This function will initialize LeanData's process. This function is required and must be the first function you call.
Parameters:
- orgId: This is the 18 digit Salesforce Org ID for the Salesforce org that contains your live BookIt router graph or the one you would like to test on.
- nodeName: 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.
- hiddenFieldName: This is the value of the name attribute that you gave to your hidden field in an earlier step.
- options (optional): LeanData can pass additional setup info and configure customizations here. Please refer to the documentation on these options for more info.
LDBookItV2.setFormProvider(formProvider: String)
This function will set the provider of the form on your webpage so that LeanData can collect and process data accordingly. This function should be the second function you call if you need to attach to a form.
Parameters:
- formProvider: The provider of the forms you are using. Unless instructed to in an implementation guide or by a member of the LeanData team, this value should be ‘custom’. These will allow us to use default behavior specific to those form providers to perform certain actions. If this function is not called, LeanData will attempt the default behavior.
LDBookItV2.setFormTarget(formHandle: any)
This function will set the target of the form you would like LeanData's process to attach to. Once this is set, LeanData will scrape the data from your form upon form submission and store it in local storage to be picked up by the process via a later call to the submission function. This function should only be used if the formProvider parameter is set to ‘custom’ in LDBookItV2.setFormProvider() and it is required in this case.
Parameters:
formHandle: The HTML element of the form you would like LeanData's process to attach to (obtained via a querySelector())
Data Storage Function:
LDBookItV2.collectFormData()
This function will scrape the data from your form and store it in local storage for LeanData's process to pick up via a later call to the submission function. If you are using a custom formDataCollector() specified in the options of your initialize() function (see this article for more info), this will trigger that function. Otherwise, this will collect data using the default form scraper. This function should only be used within the formDataCollectorTrigger() option (see this article for more info).
LDBookItV2.saveFormData(formData: any)
If you already have JSON formatted formData, this function will store the formData in local storage for the process to pick up via a later call to the submission function.
Parameters:
- formData: A JSON object of the data you would like to send over to LeanData's process.
Submission Function:
LDBookItV2.submit({ cb: any, formData: any }):
This function will kick off LeanData's process and trigger the popup modal. This is typically called after submission of the form. This requires that there is data stored in local storage already, either by using LDBookItV2.saveFormData() or from the automatic collection that results from attaching to your form with LDBookItV2.setFormTarget().
Parameters:
- options (optional): object containing the following parameters
- cb (optional): a callback function to be executed before showing the popup calendar modal. The only use for this at the moment is to pass in the callback function returned by LDBookItV2.getIframeFn() for implementations where the calendar is displayed in an iframe on the page instead of in a popup modal (see this article for more info).
formData (optional): If you haven’t saved the form data you would like to pass over to LeanData's process in local storage, you can pass that in here.
Additional Options
You can find a list of optional parameters/functions that can be passed into the options parameter of the initialize() function for even further customization here.
General Usage:
Usage of these functions is pretty flexible. The general usage is as follows for custom implementations:
- initialize() must be called as a first step
- Set your form target using setFormTarget()
Define additional options to ensure that LeanData are able to attach to your form properly, to ensure that LeanData is able to collect the necessary data from your form, and to customize the calendaring experience on your webpage.
Example Code:
Starter code:
The following is baseline code that should work in most cases to display a calendar on the same page as the form immediately upon submission. It is recommended to try this out first and then add additional customizations only if necessary.
<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 () {
let options = {
autoSubmit: true,
/* define more options here if desired for further customization */
}
let formElement = document.querySelector('form'); // update this to select your form
LDBookItV2.initialize('<Org Id>', '<Node Name>', '<Hidden Field Name>', options);
LDBookItV2.setFormProvider('custom');
LDBookItV2.setFormTarget(formElement);
});
document.body.appendChild(_ld_scriptEl);
</script>
Displaying the calendar on a thank you page:
If you would like to display the calendar on a “thank you page” (within the same domain as the page containing the form) that gets redirected to upon form submission, you can hold off on the call to submit until the page gets redirected.
The following code can go on the page containing the form:
<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 () {
let options = {
/* define more options here if desired for further customization */
}
let formElement = document.querySelector('form'); // update this to select your form
LDBookItV2.initialize('<Org Id>', '<Node Name>', '<Hidden Field Name>', options);
LDBookItV2.setFormProvider('custom');
LDBookItV2.setFormTarget(formElement);
});
document.body.appendChild(_ld_scriptEl);
</script>
And the following code can go on the thank you page that gets redirected to:
<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>', '<Node Name>', '<Hidden Field Name>');
LDBookItV2.submit();
});
document.body.appendChild(_ld_scriptEl);
</script>
The code on the form page should collect the data from your form as desired and store it in local storage (using the provided data storage functions). Your form will then redirect as it would without LeanData's script to the thank you page. The thank you page will then submit to LeanData's routing process, picking up the data from local storage. Note that LeanData must run initialize() before calling any other LDBookItV2 function. Since the thank you page code has no use for the '<Hidden Field Name>', this can technically be any value.
Already have access to data:
If you already have access to the data you would like to send over to BookIt routing without LeanData scraping your form, you can bypass a lot of LeanData's function calls as seen below
<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>', '<Node Name>', true);
// add this as a field on your lead/contact in salesforce
let ld_bookit_log_id = LDBookItV2.getUniqueId();
// run the following when you wish to trigger routing
LDBookItV2.submit({
formData: data // pass in your JSON data here
})
});
document.body.appendChild(_ld_scriptEl);
</script>
What to do if your form is iframed into your page:
If your form is iframed into your page, the parent page does not have direct access to the form, and you would like to display the calendar from the parent page, you can make use of the LDBookItV2.startRouting() function. This function will invoke a submit() call to the parent to display the calendar.
This will be imported from https://cdn.leandata.com/snippet-misc/ld-v2-iframe-emitter.js
If you would like to invoke routing immediately, we recommend using import code similar to the following to avoid race conditions and timing issues:
<script>
var _ld_scriptEl = document.createElement('script');
_ld_scriptEl.src = 'https://cdn.leandata.com/snippet-misc/ld-v2-iframe-emitter.js';
_ld_scriptEl.addEventListener('load', function () {
LDBookItV2.startRouting();
});
document.body.appendChild(_ld_scriptEl);
</script>
Otherwise, feel free to use a more basic <script src=”<https://cdn.leandata.com/snippet-misc/ld-v2-iframe-emitter.js>"/> import.
Within your iframe, you can run all of LeanData's normal function calls up until the submit step.
Doing this requires that the parent has initialized code on its 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>', '<Node Name>', '<Hidden Field Name>');
});
document.body.appendChild(_ld_scriptEl);
</script>
Events
LeanData fires a few events during the process that you can listen to in other places on your webpage. A full list of those events as well as the data those contain can be found here.
Debugging:
While implementing LeanData's code on your page, it may be a good idea to verify that you are successfully attaching LeanData's process to your form, collecting all of the desired data from your form, etc.
This can be done by entering the following line into your console: window.localStorage.setItem('_LD_debugOn', true);
This will give some insight into what is happening during the process for debugging purposes.
Add Form Field Mappings to Your LeanData BookIt for Forms Routing Trigger Node
At this point, you should be successfully seeing a calendar on your website with the desired experience (modal or iframe) in the desired location (form page or thank you page)
The last step that typically requires web developer effort is to gather the keys on your formData object and map them to variables in your BookIt trigger node.
This is very straightforward if you decided to pass in your own formData.
If you decide to use the default form data scraper, you can find the formData collected by checking the payload of the call to /routeFromFormInput in your network tab that is triggered when your form is submitted with BookIt properly attached.
This is also where you can specify the “Node Name” that must be passed in to the initialize() function.