Heeet Docs
How to

How to Track Calendly Submissions

Learn how to track Calendly submissions using Heeet by creating a redirect confirmation page, capturing lead data, and sending it to your CRM.

How to Track Calendly with Heeet

This guide will show you how to track Calendly bookings using Heeet by capturing lead information after a booking and sending it to your CRM.

Overview

To track Calendly bookings with Heeet, you will:

  1. Create a redirect confirmation page that Calendly sends users to after booking, passing all relevant parameters in the URL.
  2. Add a hidden form and Heeet Javascript to this confirmation page, extracting lead information from the URL and populating the form.
  3. Send the form data to your CRM using a webhook or integration.

Step 1: Set Up a Redirect Confirmation Page in Calendly

  1. In your Calendly event settings, go to Scheduling > Confirmation Page.
  2. Set your redirection URL and check Pass event details to your redirected page..

Refer to Calendly documentation for available variables.

Step 2: Add a Hidden Form and Heeet Script to Your Confirmation Page

On your confirmation page, add a hidden form that will capture the lead information from the URL and send it to your CRM. Use the Heeet Javascript SDK to track the visit and form submission. And add the end, submit your form in the background

Example HTML:


<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" id="formHeeet" name="formHeeet" style="display:none;">
  <input name="oid" type="hidden" value="xxxxx">
  <input name="retURL" type="hidden" value="">
  <input id="company" maxlength="40" name="company" id="company" type="text">
  <input id="last_name" maxlength="80" name="last_name" type="text">
  <input id="email" maxlength="80" name="email" type="text">
  <input id="Demo_Date__c" maxlength="80" name="xxx" type="text">
  <input id="Heeet__Data__c" name="Heeet__Data__c" type="text">
</form>

<script>
 
const url = new URL(window.location.href).searchParams;

const company = url.get('answer_1');
const name = url.get('invitee_first_name') + ' ' + url.get('invitee_last_name');
const email = url.get('invitee_email');
const eventDate = url.get('event_start_time');
const action = url.get('action');

console.log(company, name, email, eventDate, action);

const compField = document.querySelector('input[id="company"]')
compField.setAttribute("value", company);

const nameField = document.querySelector('input[id="last_name"]')
nameField.setAttribute("value", name);

const emailField = document.querySelector('input[id="email"]')
emailField.setAttribute("value", email);

const date = new Date(eventDate)
const formattedDate = date.toLocaleDateString('fr-FR', {});
const formattedTime = date.toLocaleTimeString('fr-FR', {}).substr(0, 5);

const demoDate = document.querySelector('input[id="Demo_Date__c"]')
demoDate.setAttribute("value", `${formattedDate} ${formattedTime}`);

$('#formHeeet').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url : $(this).attr('action'),
        type: "POST",
        data: $(this).serialize(),
        success: function (data) {
            console.log('w2l Sent');
        },
        error: function (jXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
});

if(eventDate) {
    setTimeout(() => {
     $('#formHeeet').submit();
    }, "2000")
}

</script>

TikTok Ads

Learn how to integrate TikTok Ads with Heeet to track video campaigns and social media advertising in Salesforce.

How to Add Heeet Data to Your Salesforce Layouts

Learn how to display Heeet data on your Salesforce record pages by adding and configuring related lists in the Lightning App Builder.