This document will outline the process of integrating Contact State lead claiming into your Databowl lead generation process when using Databowl landing pages.
Our guide is in part based on Contact States own guide which can be found here:
Please Note: that this guide goes through some aspects of web development so a basic understanding of HTML and JavaScript will be required.
Step 1. Add the Contacts Sate base script
When setting up a Landing Page/Site through Contact State, they will provide you with a Javascript code similar to the one below. Grab it from Contact State and add it to your site in Databowl.
For most users, the best method is to add it to your site-layout.html as this will be used on all pages.
Example code (please get your version from Contact State)
<!-- Embed this code on every page of your website -->
<script>
(function (w,d,s,o,f,js,fjs) {
w['ContactStateCertify']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'cscertify', 'https://js.contactstate.com/certify-latest.js'));
cscertify('init', { landing_page_id: 'REPLACE_ME_WITH_YOUR_LANDING_PAGE_ID' });
</script>
Step 2. Setup your Form
Setup some hidden form fields for your landing page form. These fields will store the information for Contact State's lead claiming process.
One form field is for the CONTACTSTATE_CLAIMURL
The claim URL is dynamically generated by contact state our Javascript will collect this and add it to this field.
Add the field to your landing page campaign.
Then, under field definitions search for each field and set them up as hidden fields.
Go to your campaign integration document to find the field IDs or toggle the fields onto your landing page form and sync your HTML (make a backup of your HTML before pressing sync!!)
Step 3. Add our custom JS to speak to Contact State
Add the Databowls JQuery code (which can be found below).
This code is required to ensure all form fields are validated before generating a Contact State certificate URL.
This can be added as a partial into your HTML and yielded in on the site-layout just before the closing body tag. Or include this in your form page script.
The code contains values that will need your attention, so please be sure to check and change these:
var FORM_ID = 'mainform';
The mainform here is the ID of your form, when Databowl produces LPs, we tend to always use this, but yours might be something different, so check and change accordingly.
F_522_CONTACTSTATE_CLAIMURL
This is a form field ID, it appears a couple of times in the code, it needs to be replaced with the id of your own field as this will be different per Databowl instance.
You can get your field ID from your integration document, or from the id of the field yield in your HTML.
NB: Be sure to yield the form field in UPPERCASE
var FORM_ID = 'mainform';
$(document).ready(function () {
//this remaps the enter key to click submit.
$(document).keypress(function (event) {
if (event.which === "13") {
event.preventDefault();
$("#" + FORM_ID + " input[type=submit]").click();
}
});
//on click of the submit button
$("#" + FORM_ID + " input[type=submit]").click(function (e) {
e.preventDefault();
var formID = FORM_ID; //get the form id this input belongs to
var form = sbf.getForm(formID); //get form
var validated = true; //assume validatd
//loop through all the fielset fields
$("fieldset div[data-field]").each(function () {
console.log("testing field");
//force validation to run
form.getField($(this).data("field")).handleValueChanged();
//if we're still running validation
if (validated) {
//if field doesn't have valid class
if (!$(this).hasClass("field-valid")) {
console.log("field failed validation");
//blur field for an extra check
$(":input", this).blur();
if (!$(this).hasClass("field-valid")) {
validated = false;
}
} else {
//if still valid
console.log("field passed validation");
}
} else {
console.log("section failed validation");
}
});
//if all fields are valid
if (validated) {
//trigger contact state functions
cscertify("send", {
form_id: formID,
loading: function () {
console.log("contactstate loading");
$(":submit").attr("disabled", "disabled").val("Processing...");
},
success: function (claim_url) {
//add value to the form field
form.addData({ 'F_522_CONTACTSTATE_CLAIMURL': claim_url });
console.log(claim_url);
//submit the form
$("#" + formID).submit();
},
failure: function () {
//add error to the form field
form.addData({ 'F_522_CONTACTSTATE_CLAIMURL': "failure" });
console.log("failure");
//submit the form
$("#" + formID).submit();
},
});
}
});
});
You should now be able to generate a test lead on your landing page and confirm it comes with a Contact State Claim URL.
Claim the Lead
Your next step is to claim the lead for your contact state account or buyer.
However, if you are exporting the data from Databowl instead of forwarding, then you can follow these simple steps:
Set up a forwarder on your Contact State campaign.
The URL we'll be using is:
https://www.contactstate.com/webhooks/static/claim
This URL allows Databowl to claim the leads.
Type will be POST
And you'll want to map the following fields
secret_key | this is provided to you by contact state |
claim_url | This is the field we created previously so in the example above we have CONTACTSTATE_CLAIMURL |
In the response, you should get back a cert_url.
This is the confirmation from Contact State that the process has worked successfully.
🚀 Need More assistance?
If you're stuck or if this isn't something you or your team is comfortable with, then please open a new chat/ticket (chat icon in the bottom right of the screen) or email support@databowl.com.
We're here to assist with any questions you have, and if required we can quote on actioning work like this for as part of our Marketing Services.