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 </body> 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 & 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!