Calendly

❗️
Prerequisites:
You will need to send Ruler your AP-KEY in order for this integration to be complete, you can send this over to us at Support Team
If you can't locate your API key please refer to Calendly Help
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>

📘
If you require any assistance, have any questions or need to send us your API-KEY please contact our Support Team
If you can't locate your AP-KEY please refer to Calendly Help