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 or Form Tracking Testing 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: Send event data from Zoho Forms or Zoho CRM
There are two methods for sending event data from Zoho to Cometly. Please see sections of our Zoho Integration article below depending how you would like to send events to Cometly.