The easy way to schedule more demos? Embed Calendly in your website.


Thad Thompson

Thad Thompson
Apr. 20, 2022

Embed Calendly in your website - blog - hero
Table of Contents

Embedding Calendly on your site is a great way to capture time with your visitors — whether they’re prospects, customers, candidates, students or others — when they’re most interested in what you have to offer, without directing them away from your most valuable content.

For example, Virtru uses Calendly to help its sales team keep up with a high volume of leads that come through its website. Once a prospect clicks on the “Request a demo” CTA and signs up, they are directed to a “thank you” page that gives them the opportunity to schedule immediately. The result? Virtru doubled demos scheduled among interested leads from 30% to 61% — within the first month of using Calendly.

The best part? Website embeds are free with all Calendly subscriptions, so anyone can use them right away. Read on and learn how to get started.

3 ways to embed Calendly seamlessly on your website

There are three easy ways to embed Calendly in your website:

1. Inline embed

To make your  appointment scheduling easily accessible, use the inline embed option. This embed places Calendly inline seamlessly within the body of a web page, giving customers and prospects direct access to your availability.

Embed Calendly in your website - blog - Emamo inline embed
Inline embeds integrate scheduling automation seamlessly into your online experience. Source: Emamo

Whether you want to show a single Event Type page or several Calendly events within a landing page, scheduling automation becomes an integrated experience within your website.

2. Pop-up widget

A pop-up widget keeps your scheduling options a click away no matter where a visitor is on your site. The widget makes a call-to-action button hover in a corner of your site. You can customize the button with messages such as “book a demo” or “schedule time with me.” When clicked, it opens Calendly in a pop-up window.

Embed Calendly in your website - blog - Dawn Monroe Training pop-up widget embed
Pop-up widgets always keep your scheduling options a click away. Source: Dawn Monroe Training

3. Pop-up text / call to action

If something more subtle is your speed, try adding a call to action in a site page’s body copy or in a button. Clicking either text option will open Calendly in a pop-up window.

Example showing how Atlassian embeds Calendly in its website
Atlassian embeds Calendly in its website linked to a CTA to let prospects book a personalized demo session of its Halp solution.

Want to see what a Calendly embed looks like from your site visitor’s perspective? Visit our demo site to explore and try booking a meeting through any of the embed options above. (Note: Scheduling time via the demo site will add a fake meeting to your calendar so you can see the full experience. We recommend deleting that meeting when you’re through.)

Calendly embed codes make integration easy

With just a few steps, you can create a personalized Calendly embed code that adds Calendly functionality to your website. It starts with choosing the type of scheduling page you’d like to share.

Step 1: Choose a landing page

Embed a single Event Type page

If you want a simple booking solution on your website, it’s easy to share a single Event Type on your scheduling page.

On the Event Types tab on your Calendly homepage, choose which Event Type you want to embed and select “Share.” In the pop-up, select “Add to website.” Then, choose your preferred embed type.

How to embed Calendly on your website
A landing page with a single Event Type provides a simple scheduling option for your website.

Embed a landing page with multiple Event Types

As your scheduling needs grow more complex, you’ll want to provide more options for you and your visitors — for example, demo sessions for different products or meetings with different team members. When you want to offer multiple types of connections to customers, it’s best to embed a landing page with multiple Event Types. (In fact, their added automation and flexibility are why many Calendly users upgrade to a paid subscription.)

Go to the Event Types tab on the homepage of your Calendly account. Find the scheduling page you'd like to share. Then, under “Account,” select “Share your link” under the dropdown. Select “Add to your website” in the pop-up and choose the type of embed.

Embed Calendly in your website - blog - Multiple Event Type landing page embed process GIF
Landing pages with multiple Event Types provide more flexibility and opportunities for scheduling automation.

Step 2: Customize your embed

Once you’ve chosen your landing page type and embed method, you can customize your landing page's appearance. Calendly lets you change color and button text in the pop-up widget embed and the text shown in the pop-up text embed. If you have a paid subscription, you can also change the scheduling page’s button, text, and background color to align with your brand.

Embed Calendly in your website - blog - custom color inline embed
You can change the color of your Calendly embed to match your website’s branding. Source: Hyros

If you already describe the purpose of your Calendly embed elsewhere in the page, you may want to remove the duplicate information in your Event Type. It’s easy — just check the “Hide event details” box. This option hides your profile picture as well as the Event Type name, event duration, location, and description. You also have an option to hide the cookie notification banner on your embed.

Embed Calendly in your website - blog - hide event details example
You can remove the Event Type description if it’s already included in your web page. (Source: MetroNova creative

3. Get the embed code

Once you’ve settled on the look and feel of your embed, select “Copy code” to grab the custom HTML. Paste the copied code into your site HTML editor, and you’re ready to go!

For more detailed information about using the Calendly embed code for specific platforms, visit our Help Center. You’ll find tutorials on using the Calendly embed code with platforms including Squarespace, Wordpress, Google sites, Weebly, Shopify, Wix, and Unbounce.

Schedule with invitees at the height of their interest

With just a few clicks, you can create an automated channel to immediately connect with high-interest website visitors, uncover new opportunities, and increase conversions. All it takes is adding a free Calendly embed code, and you have a great new tool to help grow your business.

Ready to use Calendly to make immediate connections with your website visitors? Sign up for free today.

Conversion Panel Background Shape

Get started with Calendly

Ready to make your scheduling process more efficient?

Thad Thompson

Thad Thompson

Thad is a Content Marketing Manager at Calendly. When not sharing scheduling and productivity insights, you’ll find him hiking trails with his family or thumping a bass with a power pop band.


Related Articles

Don't leave your prospects, customers, and candidates waiting

Calendly eliminates the scheduling back and forth and helps you hit goals faster. Get started in seconds.