Start Here 👋
The Zoho Forms integration will help you automatically send form entries from your Zoho Forms directly to Cometly as an event. Please follow the steps below step-by-step and ensure you have watched each setup video to ensure the integration was properly setup.
Important: The Cometly Pixel Helper will not work on your embedded Zoho form. At end of setup article, we will show you how to test your server event to ensure Cometly received data.
Step 1: Add Cometly base code pixel before </head> tag
Install the Cometly base pixel before the </head> tag on every page of your funnel or website.
Step 2: Add custom code before </body> tag on the page where Zoho form is embedded
On the web page where your Zoho form is embedded, please add the following code before the </body> tag. This code will ensure the hidden fields on your form in the following steps will be automatically passed into Zoho.
<script>
function waitForCometlyAndExecute(callback, maxAttempts = 10, interval = 500, delay = 2000) {
setTimeout(() => {
let attempts = 0;
const checkAndExecute = () => {
if (typeof cometFingerprint === "function" && typeof cometToken === "function") {
callback();
} else if (attempts < maxAttempts) {
attempts++;
setTimeout(checkAndExecute, interval);
} else {
console.error("Cometly functions not available after multiple attempts.");
}
};
checkAndExecute();
}, delay);
}
waitForCometlyAndExecute(() => {
cometFingerprint().then(function(fingerprint) {
var cometTokenValue = cometToken();
var iframe = document.querySelector("iframe[src*='zohopublic.com']");
if (iframe) {
var originalSrc = iframe.getAttribute('src');
var delimiter = originalSrc.includes('?') ? '&' : '?';
var newSrc = `${originalSrc}${delimiter}fingerprint=${encodeURIComponent(fingerprint)}&comet_token=${encodeURIComponent(cometTokenValue)}`;
iframe.setAttribute('src', newSrc);
} else {
console.error("Iframe not found.");
}
}).catch(function(error) {
console.error("Error obtaining Cometly fingerprint:", error);
});
});
</script>
Step 3: Add hidden form fields to your Zoho form
For Cometly to accurately track the Zoho form submission back to the correct source, create two hidden fields on your form.
Add two Multi Line fields to your Zoho form:
Hover over the first Multi Line field and click Properties
Edit the first Multi Line field label and rename it: fingerprint
Select Hide Field Label
Select Hide Field under Visibility section
Click Save
Edit the second Multi Line field label and rename it: comet_token
Select Hide Field Label
Select Hide Field under Visibility section
Click Save
Step 4: Setup Zoho Form to automatically prefill hidden field values
The script in Step 2 appends the fingerprint and comet_token to the iframe URL. Configure your Zoho Form settings so Zoho will automatically prefill the hidden fields on your form with the values for the fingerprint and comet_token.
Edit your form and click Settings
Under General on the left panel, click Field Alias - Prefill URL
Click Configure Now
Configure form to prefill the fingerprint and comet_token automatically
For the Field Label selection, choose fingerprint and in the Field Alias box type fingerprint.
Click the + sign.
On the second Field Label selection, choose comet_token and in the Field Alias box type comet_token.
Click Save
Step 5: Test your form to ensure fingerprint and comet_token included on your entries
Watch the video below to learn how to test your form to ensure the fingerprint and comet_token are included on your entries. You need to ensure your form has both prior to continuing to the next setup step.
Step 6: Configure sending of server event from Zoho Form to Cometly
In this step you are going to retrieve the Zoho webhook from within your Cometly account and add to your form settings in Zoho to send the form opt-in information directly to Cometly as an event of your choice.
Click Space Settings and navigate to the Integrations page in Space Settings and choose Zoho Forms as your integration:
Click Activate Zoho Forms
Copy the webhook URL
Login to your Zoho forms account, find the form you want to track, and select settings for that form:
Click Integrations and then click Webhooks
See the example setup and configure the webhook with the following steps:
Webhook Status: set to Enable
Webhook URL: paste the Cometly Zoho Forms webhook into this field
Content Type: select application/json
Authorization Type: set to General
Payload Parameters
On the left column, ensure you enter the forms exactly as they appear in the table below. Text is case sensitive, ensure it is exactly as it appears for your webhook:
ip | IP Address |
first_name | Name - First Name |
last_name | Name - Last Name |
phone | Phone |
fingerprint | fingerprint |
comet_token | comet_token |
URL Parameters
Enter the following in the URL Parameters section:
event_name
event_name | lead_generated |
Enter event_name on the left and the event you would like to send on the right
You can choose from the event list below and select what event you would like to send to Cometly. Only choose one event:
lead_generated
view_content
schedule
purchase
subscribe
add_to_cart
contact
initiate_checkout
add_payment_info
complete_registration
start_trial
sign_up
submit_application
webinar_registration
Scroll down to the bottom and click Save
Step 7: Test the integration and view the data in the Events Log
Click the Test Server Events resource below to learn how to test your Zoho form to ensure you are receiving the server event in the Events Log inside your Cometly space.
You have successfully setup your Zoho forms to send events to Cometly to accurately report the source of the form submission.