Embed Calendly in your website - blog - hero

Share

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

READ TIME: 5 MINUTES

Thad Thompson, April 20, 2022

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.

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.

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.

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.

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.)

Related reading: More than a scheduling link: Get more out of Calendly with multiple Event Types

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.

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.

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.

You can remove the Event Type description if it’s already included in your web page. (Source: MetroNova creative)

Related reading: Routing Forms: Screen and qualify people before they book with you

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.

Sign up FREE for Calendly

Thad Thompson biography
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.

Calendly + your CRM: How to connect them and why

READ TIME: 7 MINUTES

Sync Calendly with Salesforce, Hubspot, or any other CRM that you use.

How to automate your team’s scheduling

READ TIME: 3 MINUTES

A quick start guide to get your team set up using Calendly

5 ways Calendly gives your sales team superpowers

READ TIME: 3 MINUTES

Learn how Calendly saves sales reps about 15 minutes per meeting scheduled.

Try
Calendly free

Give Calendly a try with a free 14-day trial of our
Professional plan.

To learn about our Enterprise plans, click here.

STAY UPDATED

Subscribe to
the newsletter

Submit your email, and once a month we'll send you our best time-saving articles, videos and other resources.