Articles on: Widgets and integrations

How to embed Calendly

In this guide, I'll show you how to embed Calendly on your website.

Calendly is an efficient appointment scheduling service that takes the hassle out of emailing. Calendly makes scheduling easy by only suggesting times that work for your availability across all your calendars.

Unicorn Platform allows you to embed Calendly on your website in a few minutes ūüôā


To embed Calendly on your site, you should create an event there. You may choose the type of event that suits you.


Creating an event on Calendly

Then, to embed the schedule, you should use the sharing option.

Sharing option on Calendly


There are three ways to embed Calendly on your site: add a schedule on a page of a site, add a floating button that opens a popup and add a text link that opens a popup.

Options for adding Calendly on a page of a site


Embed inline




Once you have chosen the embed type, you can customize the appearance of the schedule. And also you will find an embed code that you have to copy.



Appearance settings and code for inline embed on the page

Then you have to insert a Custom HTML component where you want your Calendly schedule to appear.


Component for Custom HTML adding


Next, in the editor of this component, you should paste the embed code.



Inserting code to embed in custom HTML component

Make sure you save your changes and that's it! Calendly schedule is embedded on your website!


Inline –°alendly on a website page


Widget popup



There is a floating button on the page. When it's clicked, a pop-up window with the schedule appears.


Popup widget button by Calendly


To embed the popup widget on your site, you should select this option and copy the provided embed code.


Code for embedding a popup widget on a website


Paste the copied code into </body> custom HTML code on Site settings > Custom code


Inserting the embed code on &lt;/body&gt; custom HTML code


And that's all. A floating button will appear on your site.



The floating button by Calendly on the website

Text popup




To embed text popup on your page, you should select this option and copy the part of the code as highlighted in the picture:


Embed code for text popup

Next, paste this part of code into the General settings > </body> custom HTML code



Then copy the other part of the code which is highlighted in the picture. It starts with onclick and ends with false;"

The second part of the code


Now pick the button that should trigger the pop up when clicked. Open Edit component and click on a "gear" icon:


Editing the button


Then on the Settings tab paste the code into the Attributes field:


Button actions, integrations &amp; settings


Here we are! Now when you click on this button, a scheduling form will appear.


Text popup widget by Calendly on the page

Updated on: 15/12/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!