Cal.com UTM Tracking Integration
Capture UTM parameters in Cal.com bookings with HandL UTM Grabber so source, medium, campaign, click ID, and referrer data follow every scheduled conversion.

How to Track UTMs in Cal.com
UTM attribution overview 
 This guide explains How to Track UTMs in Cal.com with HandL UTM Grabber. It helps you capture UTM source, medium, campaign, term, content, click IDs, referrer, and landing page data and keep the marketing context needed for accurate reporting across forms, bookings, signups, and sales. 

 It's quite straightforward to track UTMs in Cal.com, but it does require some JavaScript knowledge. Now, let's get started. 

 Adding Hidden Fields to Your Form 

 Firstly, insert some hidden fields into your form under the "Advanced" section. 

 In this tutorial, we've included utm_campaign , utm_source , utm_medium , traffic_source , and handl_url . You can further expand this by using the names exactly as they appear from this link: Native WP Shortcodes 

 

 Ensure the Fields Are Hidden 

 Make sure that the fields are hidden by toggling off, as depicted in the following image.

 

 Alter the Embed Code 

 The original code appears as follows... 

 <!-- Cal inline embed code begins -->

<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>

<script type="text/javascript">

 (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");

Cal("init", "15min", {origin:"https://cal.com"});

 Cal.ns["15min"]("inline", {

	elementOrSelector:"#my-cal-inline",

	calLink: "haktansuren/15min",

	layout: "month_view"

 });

 

 Cal.ns["15min"]("ui", {"styles":{"branding":{"brandColor":"#000000"}},"hideEventTypeDetails":false,"layout":"month_view"});

 </script>

 <!-- Cal inline embed code ends -->

 

 We will revise it as follows: There was no configuration object in the JavaScript; we have now added it. 

 config: {

 "utm-campaign": Cookies.get("utm_campaign"),

 "utm-medium": Cookies.get("utm_medium"),

 "utm-source": Cookies.get("utm_source"),

 "traffic-source": Cookies.get("traffic_source"),

 "handl-url": Cookies.get("handl_url")

}

 

 Insert it right after the layout line. So, the final code will look like this: 

 <!-- Cal inline embed code begins -->

<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>

<script type="text/javascript">

(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");

Cal("init", "15min", {origin:"https://cal.com"});

Cal.ns["15min"]("inline", {

 elementOrSelector:"#my-cal-inline",

 calLink: "haktansuren/15min",

 layout: "month_view",

 config: {

 	"utm-campaign": Cookies.get("utm_campaign"),

 	"utm-medium": Cookies.get("utm_medium"),

 "utm-source": Cookies.get("utm_source"),

 "traffic-source": Cookies.get("traffic_source"),

 "handl-url": Cookies.get("handl_url")

 }

});

Cal.ns["15min"]("ui", {"styles":{"branding":{"brandColor":"#000000"}},"hideEventTypeDetails":false,"layout":"month_view"});

</script>

<!-- Cal inline embed code ends -->

 

 After that, test it and voila! You will have all the UTMs in your booking as shown below.

Track UTMs via Thank-You Page Webhook
UTM attribution overview Send full HandL UTM Grabber attribution from Cal.com UTM Tracking Integration bookings to Zapier, Make, or your CRM using a custom confirmation page and webhook. Primary setup: How to Track UTMs in Cal.com Custom confirmation redirect Point your booking tool at a WordPress thank-you page after the appointment is confirmed. Include the customer email in the redirect URL when the tool supports it. Webhook script on thank-you page Use the merge script from Triggering Zapier on Thank you Page to combine URL parameters with handl_utm and send the full payload to your webhook. Verify the payload Book a test appointment from a page with ?utm_source=booking-test . Check that utm_source, gclid, and email (if passed) arrive in Zapier or Make.