Content:
- Overview and Things to Note
- Configuring Your Form
- Adding Your Hidden Field
- Configuring Your Form Page
- Configuring Your Thank You Page
- Creating Your Router Graph
- Configuring your Trigger Node
- Adding Your Field Mappings
- Configuring Your Router Graph
Overview and Things to Note
- This tutorial will configure the calendar to display as a modal on the page your form redirects to upon submission
Configuring Your Form
Adding Your Hidden Field
To start, please follow the instructions in Adding a Hidden Field in Eloqua to add a hidden field to your form to capture the log id to send over to your created leads/contacts.
Configuring Your Form Page
Add the following code to the page containing your 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 () {
LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', '<Hidden Field Name>');
LDBookItV2.setFormProvider('eloqua');
});
document.body.appendChild(_ld_scriptEl);
</script>
You’ll need to configure this snippet by changing the parts of this code to the following (remember to remove the ‘<>’ brackets):
- <Org Id> - Your 18 digit Salesforce Org ID. This will be for the Salesforce Org that has your live BookIt router graph or the one you would like to test on.
- <Trigger Node Name> - 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, so for now just enter a name that describes the purpose of your form, like “Demo Request”.
- <Hidden Field Label> - The value you specified for the “HTML Name” of the hidden field you created in an earlier step (”ldBookItLogID” in our example).
Configuring Your Thank You Page
Add the following code to the page your form redirects to upon submission:
<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.submit();
});
document.body.appendChild(_ld_scriptEl);
</script>
You’ll need to configure this snippet by changing the parts of this code to the following:
- <Org Id> - Your 18 digit Salesforce Org ID. This will be for the Salesforce Org that has your live BookIt router graph or the one you would like to test on.
- <Trigger Node Name> - The name of the trigger node on your live BookIt router graph that you would like to enter the graph through.
- <Hidden Field Name> - The name you gave your hidden field in an earlier step (”ld_bookit_log_id” in the example)
Creating Your Router Graph
Configuring Your Trigger Node
In your LeanData BookIt For Forms routing graph, double click on your trigger node.
Update the “Node Name” to the <Trigger Node Name> you defined in an earlier step.
Adding Your Field Mappings
You will be able to define field mappings in the trigger node of your BookIt For Forms graph as shown below. This will allow you to map values from entries in your form to variables that can be used in logic in your graph.
Here, the “Form Field API Names” are the “HTML Name” attributes for each field you’re using in your form that you’d like to send over.
In each mapping you can either select a mapping to one of our default variable options if available, or define your own variable name and type otherwise.
Configuring Your Router Graph
From here you can configure your routing graph and the rest of your LeanData BookIt instance with the help of our professional services team!