How to source track your Calendly embed with UTM parameters

Track UTM parameters with Calendly embeds to monitor traffic sources and measure the effectiveness of your campaigns. Learn how here.

If you've added the Calendly embed code to your private website, the embed code will automatically look for the following UTM parameters in the URL address on the parent web page:

  • utm_source
  • utm_medium
  • utm_campaign
  • utm_content
  • utm_term

NOTE: There is a 255 character limit for UTM values. Values that exceed this limit may not be passed.

Alternatively, you have a few other changes you can make to your embed code to track sources, outlined below. 

Map the UTM parameters and values to the URL inside the embed code

You can add UTM parameters directly by modifying Javascript calls. These UTMs will be tracked throughout the booking flow. The parameters manually set will overwrite those set in the parent window.

To achieve this, use the help of a web developer to dynamically pass parameters from a website URL into the objects of the advanced embed code.

Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK/30min',
utm: {
utmCampaign: "Spring Sale 2019",
utmSource: "Facebook",
utmMedium: "Ad",
utmContent: "Shoe and Shirts",
utmTerm: "Spring"
}
});

Add a dynamic query string

Another option is to add a dynamic query string within the embedded Calendly URL, and map the values dynamically from your site’s URL.  

<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_LINK/30min?
utm_source={source}"
style="min-width:320px;height:630px;"></div>

Hardcode a parameter to the embed code

You can hardcode a parameter to the embed code itself and have a different page view (and embed) render depending on where the click is coming.

<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_LINK/30min?
utm_source=facebook" style="min-width:320px;height:630px;"></div>