Calendly - Widget Tracking

❗️
Prerequisites:
The instructions below are a two part setup. Step One involves adding Script to the website, and Step Two involves setting up a Webhook from your Calendly account to send the data to Ruler Analytics.
Make sure you have the below script in the headers of your site.

<script type=“text/javascript” src=“https://assets.calendly.com/assets/external/widget.js”></script>

Calendly offers three variations of embedding a form into your site, we can integrate with each of these methods, by following the below:

🚧
For each method, you are required to have the correct URL for the form you wish to integrate with Ruler, this will become clearer further on. If you aren't sure how to find your URL link please visit [Calendly Help] (https://help.calendly.com/hc/en-us/articles/223193448-Sharing-your-scheduling-link).
Once you have your URL you can go ahead and change the URL key to have the value of your URL.
You are also required to change the parentElement, we have this preset to look for a ID element but you can change this to be a class name, you would need to replace the "ID NAME" with the actual name of your ID or Class.

Inline widget

<script type="text/javascript">
	window.addEventListener("load", function () {
		function rulerToCalendly() {
			try {
				if (!RulerAnalyticsVisitorId)
					throw "Ruler Analytics is not set";
				Calendly.initInlineWidget({
					url: "URL TO EMBED CALENDLY FORM",
					parentElement: document.getElementByID("ID NAME")[0],
					utm: {
						utmContent: RulerAnalyticsVisitorId,
					},
				});
			} catch (error) {
				setTimeout(function () {
					rulerToCalendly();
					console.log(error);
				}, 500);
			}
		}
		rulerToCalendly();
	});
</script>

Popup Text Widget

There are two options a button tag or the a tag, you will only need to select one of them to place the Popup Widget on to your site. Ensuring you change the URL to match the one to your form.

<!-- BUTTON EXAMPLE -->
<button onclick="Calendly.initPopupWidget({
   url: 'URL TO EMBED CALENDLY FORM',
   utm: {
       utmContent: RulerAnalyticsVisitorId
   }
   });return false;"
   class="sqs-block-button-element--medium sqs-block-button-element">
   Register
</button>
 
<!-- A TAG EXAMPLE -->
<a href="" onclick="Calendly.initPopupWidget({
   url: 'URL TO EMBED CALENDLY FORM',
   utm: {
       utmContent: RulerAnalyticsVisitorId
   }
   });return false;"
   class="sqs-block-button-element--medium sqs-block-button-element">
   Register
</a>

Popup Badge Widget

There are is an additional script and link that we need from Calendly for the Popup Badge to work, these are included in the example below.

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"/>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>

<script type="text/javascript">
	function CheckRulerExists() {
		try {
			if (!RulerAnalyticsVisitorId) throw "Ruler Analytics is not set";
			Calendly.initBadgeWidget({
				url: "URL TO EMBED CALENDLY FORM",
				utm: {
					utmContent: RulerAnalyticsVisitorId,
				},
			});
		} catch (error) {
			setTimeout(function () {
				console.error(error);
				CheckRulerExists();
			}, 300);
		}
	}
	window.addEventListener("load", CheckRulerExists);
</script>

Step Two - Setting up the Webhook from Calendly

Once you have added the relevant Script to your website, you will need to setup a webhook to send the events to Ruler Analytics via a Webhook to a Ruler provided endpoint.

Guides on setting up a new Invitee webhook can be found here.

The event type should be "Invitee Created Events"

The URL to send the data to can be provided during Onboarding by the Ruler Analytics team.