How to Capture UTM Parameters with Calendly

Why send UTM parameters to Calendly?

The UTM parameters are essential for tracking where your leads come from and understanding which marketing campaigns perform best.
However, Calendly doesn’t automatically capture UTMs when you use its widget on your website.
‍

In this tutorial, the Gemeos Webflow agency  shows you how to:

• Keep UTMs even if the user changes pages.
• Remove UTMs from the URL for cleaner navigation.
• Force Calendly to take UTMs into account at booking time.

‍

How does it work?

• A JavaScript script captures and stores the UTMs in the browser session as soon as the user lands on the site.
• That same script dynamically injects the UTMs into the Calendly widget when the page loads.
• It forces the widget to reload so Calendly actually saves the UTMs

‍

1. Add the UTM tracking script to your footer

This script must be added to the footer of your site, right before </body>, so it works on every page.

‍

How does this script work?

It grabs the UTM parameters from the URL (utm_source, utm_medium, etc.).

‍It stores them in the browser session (sessionStorage).

It immediately removes the UTMs from the URL to keep the URL clean.

‍It checks whether a Calendly widget is present on the page.

It updates the widget URL with the UTMs and forces Calendly to save them.

‍

2. Add the Calendly widget to your page

On the page where you display Calendly, use this standard embed without changing the URL (the script takes care of adding the UTMs dynamically):

Why not add the UTMs here directly?

The script automatically adds the UTMs, so there’s no need to insert them manually. That guarantees:

• The Calendly URL is always clean at the start.
• The UTMs are added dynamically at the right moment.
• Calendly reloads correctly with the right parameters.

‍

3. Test the solution in staging

Before you deploy, run a test in a staging environment or locally.

‍

Test steps:

1. Visit your page with UTMs in the URL

• Check that the URL becomes clean again after loading (the UTMs disappear).
• Open the console (F12 > Console) and type: sessionStorage.getItem("utm_source")
• Expected result: "linkedin" (or the value you entered).

‍

2. Go to another page, then come back to the Calendly page.

• Check that the UTMs are still stored (sessionStorage.getItem("utm_source")).
• Check that the Calendly iframe has the UTMs.

‍

3. Make a booking on Calendly.

• Open the Calendly confirmation email.
• Check that the UTMs are properly saved in the event.

‍

4. Publish to production

🎯 If everything works in staging, deploy to production!

Once you’re live, you can analyze your campaign performance by pulling these UTMs into:

• Google Analytics (GA4)
• Facebook Ads
• Your CRM via Zapier or Make

‍‍

Conclusion

You now have a clean, efficient system for tracking your leads with Calendly.‍

UTMs stay in place even if the user changes pages.

Calendly captures the data without showing UTMs in the URL.

You can analyze your conversions and optimize your marketing campaigns.

‍

If you want to send these UTMs to Google Analytics, Facebook Ads, or a CRM, let us know — we can help you automate it!