How to raise UTM parameters with Calendly

Why raise UTM settings in Calendly?

Les UTM parameters are essential to follow The origin of your leads and understand which marketing campaigns are performing best.
However, Calendly does not retrieve UTMs automatically when you use its widget on your site.
‍

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

• Keep the UTMs even if the user changes pages.
• Remove UTMs from the URL for clean browsing.
• Force Calendly to take UTMs into account when booking

‍

How does it work?

• A JavaScript script retrieves and stores UTMs in the browser session as soon as the user arrives on the site.
• That same script Dynamically injects UTMs in the Calendly widget when loading the page.
• He Force reload of the widget to ensure that Calendly records UTMs

‍

1. Add the UTM tracking script in your footer

This script should be added in the footer of your site, just before </body>, so that it works on all pages.

<script type="text/javascript">
    (function() {
        const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];

        function storeUTMParams() {
            const params = new URLSearchParams(window.location.search);
            let hasUTMInURL = false;

            // 1️⃣ Stocker les UTM en sessionStorage si présents dans l'URL
            utmKeys.forEach(param => {
                if (params.has(param)) {
                    sessionStorage.setItem(param, params.get(param));
                    hasUTMInURL = true;
                }
            });

            // 2️⃣ Supprimer les UTM de l’URL pour une URL propre
            if (hasUTMInURL) {
                const newURL = window.location.origin + window.location.pathname;
                window.history.replaceState({}, document.title, newURL);
            }
        }

        function getUTMParams() {
            let utmParams = '';
            utmKeys.forEach(param => {
                const storedValue = sessionStorage.getItem(param);
                if (storedValue) {
                    utmParams += `&${param}=${storedValue}`;
                }
            });
            return utmParams;
        }

        function updateCalendlyWidget() {
            const calendlyDiv = document.querySelector(".calendly-inline-widget");
            if (calendlyDiv) { // Vérifier si le widget Calendly est présent sur la page
                const baseUrl = calendlyDiv.getAttribute("data-url");
                const newUrl = baseUrl + getUTMParams();

                // Supprimer l'ancien widget et en recréer un avec la nouvelle URL
                const newCalendlyDiv = document.createElement("div");
                newCalendlyDiv.className = "calendly-inline-widget";
                newCalendlyDiv.setAttribute("data-url", newUrl);
                newCalendlyDiv.style = "min-width:320px;height:700px;";

                calendlyDiv.replaceWith(newCalendlyDiv);

                // Recharger le script Calendly pour prendre en compte la nouvelle URL
                setTimeout(() => Calendly.initInlineWidgets(), 500);
            }
        }

        // 3️⃣ Exécuter les fonctions quand la page charge
        document.addEventListener("DOMContentLoaded", function () {
            storeUTMParams(); // Stocke les UTM au chargement
            updateCalendlyWidget(); // Applique les UTM uniquement si le widget est présent
        });
    })();
</script>

‍

How does this script work?

It gets the UTM parameters from the URL (utm_source, UTM_Medium, etc.).

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

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

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

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

‍

2. Add the Calendly widget to your page

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

<!-- Embed Calendly standard -->
<div class="calendly-inline-widget" 
     data-url="https://calendly.com/YOUR_LINK/30min" 
     style="min-width:320px;height:700px;">
</div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

Why not put UTMs directly here?

The script is loading automatically to add UTMs, so no need to insert them manually. This ensures that:

• The Calendly URL is always clean from the start.
• UTMs are dynamically added at the right time.
• Calendly charges properly with the correct settings.

‍

3. Test the solution by staging

Before deploying, test on an environment of Staging or locally.

‍

Test steps:

1. Visit your page with UTMs in the URL

https://ton-site.com/?utm_source=linkedin&utm_campaign=test

• Verify that The URL becomes clean again after loading (UTMs disappear).
• Open the console (F12 > Console) and type: SessionStorage.getItem (“utm_source”)
• Expected result : “Linkedin” (or the value you put in).

‍

2. Navigate to another page and then return to the Calendly page.

• Verify that UTMs are always stored (SessionStorage.getItem (“utm_source”)).
• Verify that The Calendly iframe does have UTMs.

‍

3. Make a reservation on Calendly.

• Open the Calendly confirmation email.
• Verify that UTMs are well recorded in the event.

‍

4. Publish in production

🎯 If everything works well in staging, deploy to production!

Once online, you can analyze the performance of your campaigns by retrieving these UTMs in:

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

‍‍

Conclusion

You have a clean and efficient system to track your leads with Calendly.‍

UTMs are retained even if the user changes pages.

Calendly retrieves data well without displaying a UTM in the URL.

You can analyze your conversions and optimize your marketing campaigns.

‍

If you want send these UTMs to Google Analytics, Facebook Ads, or a CRM, tell me, I can help you automate that! 🚀🔥