This article contains a list of optional parameters/functions that can be passed into the options parameter of the initialize() function of your code snippet to enable a customized setup of the BookIt for Forms experience on your webpage.
The purpose of this article is to outline the options available to you. Please do not hesitate to reach out to LeanData support for assistance in configuring these.
Usage of these custom options requires defining an options object and passing it as the fourth parameter of the initialize() of your BookIt for Forms 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 () {
let options = {
exampleOption1: 'example1',
exampleOption2: 'example2',
/* define your options here */
};
LDBookItV2.initialize('<Org Id>', '<Node Name>', '<Hidden Field Name>', options);
/* other BookIt code here... */
});
document.body.appendChild(_ld_scriptEl);
</script>
Note: In some cases, you will be provided with multiple snippets that go on different pages. We recommend defining any options you wish to use for each snippet for consistency.
General Calendar Experience Options
The following are options that enable customizations that can be made to the BookIt for Forms calendar experience on your webpage.
loadingText: String
- Specify the text to display on the calendar loading modal. This defaults to ‘Loading Calendar’.
popupModalCloseURL: String
- A URL you can send users to redirect to upon closing the popup calendar modal.
calendarTimeoutLength: Number
- If specified, this will close out the modal or iframe containing the calendar after x seconds.
postBookingTimeoutLength: Number
- How long (in seconds) you would like to wait after confirming a meeting to send the user to the redirect URL specified in your meeting type settings in LeanData. This defaults to 3 seconds.
hideLoadingScreen: Boolean
- If true, this will disable the default loading screen that appears immediately after a form is submitted and before a calendar is presented. This will also disable the “Successfully submitted!” messaging that appears if your BookIt graph decides not to show the prospect a calendar. This means that the user will not see anything other than a calendar if and only if you decide to display one.
skipSubmissionConfirmation: Boolean
- If true, this will disable the “Successfully submitted!” messaging that appears if your BookIt graph decides not to show the prospect a calendar.
loadingScreenDelay: Number
- How long (in milliseconds) you wish to keep the loading screen that is triggered immediately after form submission visible for before closing out the modal in the case that skipSubmissionConfirmation and you decide not to show the prospect a calendar. This is useful to ensure that the prospect has enough time to read the loading screen before it is closed so that it doesn’t appear as a random popup. This defaults to 2000 milliseconds.
redirectLoadingText: String
- Specify the text to display on the loading screen that appears before redirecting to a URL specified in the “Redirect to URL” node of your BookIt graph.
redirectDelay: Number
- How long (in milliseconds) you would like for the loading screen to display before redirecting to a URL specified in the “Redirect to URL” node of your BookIt graph.
iframeBorderRadius: String
- Apply a border radius style to the iframe containing the calendar (for iframe implementations only, see this article for more details).
thankYouMessageHeader: String
- String containing the text you would like to replace the header of the “Successfully submitted!” messaging that appears if your BookIt graph determines not to show the prospect a calendar. This defaults to “Successfully submitted!”
thankYouMessageSubHeader: String
- String containing the text you would like to replace the header of the “Successfully submitted!” messaging that appears if your BookIt graph determines not to show the prospect a calendar. This defaults to “We appreciate you reaching out to our team and will be in touch shortly.”
thankYouPageHTML: String
- String containing HTML you would like to completely replace the “Successfully submitted!” messaging that appears if your BookIt graph decides not to show the prospect a calendar. This will override this screen on desktop devices only.
Example usage:
thankYouPageHTML: '<div><h1>Hello World!</h1></div>';
Mobile Calendar Experience Options
The following are options that enable customizations that can be made to the BookIt for Forms calendar experience on your webpage that are specific to mobile devices.
mobileThankYouPageHTML: String
- String containing HTML you would like to replace the screen that displays when a calendar or redirect is not returned from routing. This will override this screen on mobile devices only.
Example usage:
mobileThankYouPageHTML: '<div><h1>Hello World, but on mobile!</h1></div>';
mobileCalendarOptions: any
An object containing further options for customization to the mobile calendar experience. The options this object contains are the following.
-
calendarTimeoutLength: Number
- If specified, this will close out the modal or iframe containing the calendar after x seconds. This defaults to whatever is set in the regular calendarTimeoutLength option from the section above.
- If specified, this will close out the modal or iframe containing the calendar after x seconds. This defaults to whatever is set in the regular calendarTimeoutLength option from the section above.
-
calendarTimeoutRedirectURL: String
- The URL you wish to redirect to on mobile devices in the case that the calendar timeout specified with calendarTimeoutLength is triggered. This is required in conjunction with specifying a calendarTimeoutLength.
- The URL you wish to redirect to on mobile devices in the case that the calendar timeout specified with calendarTimeoutLength is triggered. This is required in conjunction with specifying a calendarTimeoutLength.
-
postBookingTimeoutLength: Number
- How long (in milliseconds) you would like to wait after confirming a meeting to send the user to the redirect URL specified in your meeting type settings in LeanData or what is specified in the postBookingRedirectURL below. This defaults to 3000 milliseconds (3 seconds) or whatever is set in the regular postBookingTimeoutLength option from the section above.
- How long (in milliseconds) you would like to wait after confirming a meeting to send the user to the redirect URL specified in your meeting type settings in LeanData or what is specified in the postBookingRedirectURL below. This defaults to 3000 milliseconds (3 seconds) or whatever is set in the regular postBookingTimeoutLength option from the section above.
-
postBookingRedirectURL: String
- The URL you wish to redirect to on mobile devices once a meeting is confirmed. This will override the the redirect URL specified in your meeting type settings in LeanData and is not required, even with usage of postBookingTimeoutLength.
- The URL you wish to redirect to on mobile devices once a meeting is confirmed. This will override the the redirect URL specified in your meeting type settings in LeanData and is not required, even with usage of postBookingTimeoutLength.
Form setup/form data collection options:
The following are options that enable customizations that can be made to the process and functionality of how LeanData's code interacts with your forms.
hiddenFieldSetter(hiddenFieldName: String, uniqueId: String)
- This function can be used to override the default hidden field setting logic to populate it with LeanData's unique id. If this function is not specified, LeanData will default to attempting to set the input element with the name attribute specified by the hiddenFieldName parameter passed into the LDBookItV2.initialize() function. This function MUST successfully set the hidden field on your form to have a value of uniqueId.
A common pitfall here is that the form may take some time to load into the page, and if this code runs before that, unexpected behavior will occur. We recommend checking if the hidden field exists and retrying the function if not. This will only execute if you pass in ‘custom’ to setFormProvider().
Example usage:
hiddenFieldSetter: (hiddenFieldName, uniqueId) => {
let hiddenField = document.querySelector(`#${hiddenFieldName}`);
if (!hiddenField) {
setTimeout(() => options.hiddenFieldSetter(), 1000);
} else {
hiddenField.value = uniqueId;
}
};
This usage will use the hiddenFieldName you specify in LDBookItV2.initialize() as the id attribute to look for when query selecting your hidden field instead of the name attribute as is done by default. It will also retry setting the hidden field every 1 second until the hidden field is set successfully to avoid timing issues around loading.
formDataCollector()
- This option will allow you to specify an entire form data collection function instead of just being limited to handling one specific input type case as in the setTypeCase option. You have freedom to scrape and collect data from your form as you wish here, the only requirement is that the function returns a formData JSON object of the data you would like to send over to LeanData's process and saves it to local storage using saveFormData().
Example usage:
formDataCollector: (formTarget) => {
const elements = formTarget.elements;
let formData = {};
for (let i = 0; i < elements.length; i++) {
let elem = elements[i];
let key = elem.name;
switch (elem.type) {
case "text":
formData[key] = elem.value;
// Handle other cases for all element types in your form here...
}
}
LDBookItV2.saveFormData(formData); // this is required
return formData; // this is required
};
formDataCollectorTrigger(formTarget: any)
- This option allows you to specify a function that takes in the formTarget you specify in LDBookItV2.setFormTarget() as a parameter to define how you would like to attach to your form or on what event you would like to trigger data collection. If this is not defined, LeanData will attempt to attach the form data collection to the submit event on your formTarget by default.
Example usage:
formDataCollectorTrigger: (formTarget) => {
let myButton = document.querySelector("#my-button");
myButton.addEventListener("click", function () {
LDBookItV2.collectFormData();
});
};
This usage will set the formDataCollector() to run on click of a button.
formKeyGetter(elem: HTMLElement)
- This function will allow you to define how you would like the default data collector to grab JSON keys in the collected formData object from your form input elements. If this function is not specified, LeanData will use elem.name as keys in the formData object, but this function will allow you to change the attribute of a given input element elem to use as a key or allow you to add even more complex logic if desired. This function MUST successfully return a string representing a key to be used in the formData object for the given elem.
Since this function is only used within the default form data collection process, there is no need to define this if you are overriding the default with your own formDataCollector(), since this can be handled in that function.
Example usage:
formKeyGetter: (elem) => {
return elem.id;
};
This usage will make it such that LeanData uses the id attributes of input elements as keys in the collected formData instead of name attributes.
setTypeCase: any
- This object will take in functions with key values of form input element types (‘text’, ‘hidden’, ‘radio’, ‘select’ etc.) and values being functions that take in a form input element as a parameter that determine how to override the default data collector for that element type.
Since this function is only used within the default form data collection process, there is no need to define this if you are overriding the default with your own formDataCollector(), since this can be handled in that function.
Example usage:
setTypeCase: {
// override the 'phone' case in our default formDataCollector
'phone': (elem) => {
return elem.tel.replace(/[^\d]/g, '') // remove all non numerical digits
}
}
This usage will override the default form data collector for radio inputs to return the input’s textContent instead of its value.
Google Analytics:
Enable the inclusion of Google Analytics tracking code by adding it to the options object.
googleAnalytics: string
This string should be in the format of "G-XXXXXXX"where “XXXXXXX” is the designated alphanumeric code provided by Google. This is also referred to as the Google tag ID and used in your Google tag.
Example
Below is what LeanData's code looks like with a loaded customization of options defined in the initialize() function.
<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 = {
hiddenFieldSetter: (hiddenFieldName, uniqueId) => {
// look for field with id of hiddenFieldName instead of default of name
document.querySelector(`#${hiddenFieldName}`).value = uniqueId;
},
formKeyGetter: (elem) => {
// use ids on form field elements to use as keys
// in JSON of scraped data instead of default of name
return elem.id;
},
loadingText: 'Loading...',
popupModalCloseURL: 'https://example-close-modal.com',
calendarTimeoutLength: 5 * 60 * 1000, // 5 minute timeout
mobileCalendarOptions: {
calendarTimeoutRedirectURL: 'https://example-timeout-redirect-modal.com',
postBookingRedirectURL: 'https://example-post-booking-redirect-modal.com',
},
thankYouPageHTML: '<div>Thank you!</div>',
mobileThankYouPageHTML: '<div>Thank you (on mobile)!</div>',
skipSubmissionConfirmation: true,
autoSubmit: true,
googleAnalytics: 'G-XXXXXXX',
};
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>