Pass UTM parameters to Calendly

calendly-inline-widget.js

<div class="calendly-inline-widget" id="calendly-inline-widget" style="min-width:320px;height:820px;" data-auto-load="false"></div>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>

<script>
	const queryString = window.location.search;
	const urlParams = new URLSearchParams(queryString);
	const utm_source = urlParams.get('utm_source');
	const utm_medium = urlParams.get('utm_medium');
	const utm_campaign = urlParams.get('utm_campaign');

	if (queryString) {
		localStorage.setItem('utm_source', utm_source);
		localStorage.setItem('utm_medium', utm_medium);
		localStorage.setItem('utm_campaign', utm_campaign);
	}

	const utm_source_local = localStorage.getItem('utm_source');
	const utm_medium_local = localStorage.getItem('utm_medium');
	const utm_campaign_local = localStorage.getItem('utm_campaign');

  Calendly.initInlineWidget({
		url: 'https://calendly.com/xxxxxx/xxxxxx?hide_gdpr_banner=1',
		parentElement: document.getElementById('calendly-inline-widget'),
		utm: {
			utmSource: utm_source_local,
			utmMedium: utm_medium_local,
			utmCampaign: utm_campaign_local,
			utmContent: ''
		},
		prefill: {
			customAnswers: {
				a4: ''
			}
		}
	});
</script>