How to add Calendly to your website
Calendly is the default scheduling tool for consultants, coaches, and anyone who books calls. Here's how to put it on your own website properly, and which of the three embed styles to use.
Quick answer
In Calendly, select the three dots next to the event type you want to share, choose 'Add to website', pick your embed style, and copy the code. There are three: inline embed shows the calendar directly in your page, pop-up text opens it from a link, and pop-up widget adds a floating button. Paste the code into an HTML block. Inline on a dedicated booking page converts best.
Step-by-step
- 1
Get your embed code
In Calendly, click the three dots next to the event type or landing page you want to embed, then select 'Add to website'. Choose how you want it to appear and click 'Copy code'. Each event type has its own code, so grab the one matching the meeting you actually want people booking.
- 2
Choose the right embed style
Inline embed displays your scheduling page directly within the page — best on a dedicated 'Book a call' page where booking is the only job. Pop-up text opens the scheduler when someone clicks a link, which suits a sentence like 'book a free 20-minute call'. Pop-up widget adds a floating button that follows the visitor down the page.
- 3
Paste it into your site
Add a custom HTML block where you want it and paste the code, then publish. On Adviita, ask the AI editor to add a booking button linking to your Calendly link. Calendly publishes platform-specific guides for Wix, Squarespace, WordPress and Webflow if your builder needs particular handling.
- 4
Embed the specific event, not your whole calendar
The most common mistake is embedding a generic scheduling link that offers every meeting type. On a page about one service, embed the event type for that service. Fewer decisions at the point of booking means more bookings completed.
- 5
Test it on a phone
Book yourself a slot from mobile. Check the duration, timezone handling, and any questions you've added to the booking form. Timezone problems are the most common Calendly complaint and they're much easier to spot before a client hits them.
Tips & best practices
- ▸Inline embed on a dedicated booking page outperforms a floating widget for high-intent visitors.
- ▸The floating pop-up widget is best on content pages where booking isn't the primary purpose.
- ▸Keep the booking form short — every extra required question loses bookings.
- ▸Set clear availability and buffers in Calendly rather than declining bookings afterwards.
Common questions
How do I embed Calendly on my website?
+−
Click the three dots next to your event type, choose 'Add to website', select an embed style, and copy the code. Paste it into a custom HTML block on your page. In WordPress that's a Custom HTML block; most other builders have an equivalent embed element.
What are the three Calendly embed options?
+−
Inline embed puts the scheduler directly in your page. Pop-up text opens it when a link is clicked. Pop-up widget adds a floating button that opens the scheduler. Inline suits dedicated booking pages; the floating widget suits everything else.
Which Calendly embed converts best?
+−
For a page whose only job is booking, inline — there's nothing between the visitor and the calendar. On general pages, pop-up text within a relevant sentence tends to beat a floating widget, because it appears exactly where the reader is already thinking about it.
Can I use Calendly with Wix or Squarespace?
+−
Yes. Calendly publishes setup guides for Wix, Squarespace, WordPress and Webflow. In each case you're pasting the embed code into that platform's HTML or embed element.