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


Thank you!