7 days of PowerPoint templates, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Business
  2. Calendar

How to Book More Meetings on Your Website Using Calendly Embed

Scroll to top
Read Time: 11 mins

If you've got a website, you've got a source of traffic. That means you've got an audience. Why not make the most of your website by using it as a tool to book appointments?

Calendly embed introCalendly embed introCalendly embed intro
Learn how to embed Calendly on your website for seamless appointment setting. (Graphic source: Envato Elements.)

With Calendly embeds, you can do just that. It's easy to turn your website into an all-in-one booking page when you embed Calendly.

In this tutorial, you'll learn more about the power of Calendly embed options. No matter what type of website you have, you can easily integrate this powerful booking tool. There are even multiple options for how to show it on your website. You'll learn how to embed Calendly on your website with the help of our tutorial.

Use Calendly Embed to Book More Meetings on Your Website (QuickStart Video)

Would you like to use your website as a tool to book appointments? You can use Embed Calendly on your website for appointment scheduling. Here's a short video that'll show you just what to do:

For a more in-depth look a Calendly Embed, study the rest of the tutorial.

 What Is Calendly? (And Why Should You Embed It on Your Website?)

Do you schedule meetings? If so, you need Calendly. It eliminates so many of the frustrations that I'm sure you've found when booking a meeting.

Here's how too many potential bookings go off the rails before you have a chance to meet:

  • You and the recipient begin to compare available times. You'll likely hit mix-ups over time zones. Or they encroach on your thinking hours that you should have blocked off.
  • An email chain spirals out of control. You compare potential meeting times, navigating the frustrations of packed calendars.
  • You set a meeting, then reschedule it later on due. Calendars are always changing, and this creates conflicts. This restarts the frustrating loop of scheduling.
  • The meeting eventually frustrates everyone to the extent it doesn't happen. You might have just missed out on the next potential client or new hire.

This is too common, but it's fixable with Calendly. That's because Calendly totally reverses the normal flow of setting meetings. Instead of hashing out a common meeting time, let the recipient book a time from your available options.

Calendly screenshotCalendly screenshotCalendly screenshot
Calendly gives you an easy-to-share bookable page to set appointments (and it's even better when you embed it on your site!)

When you set up your Calendly account, you'll have plenty of options to set preferences. Those include your working hours, available hours for meeting times, and much more. You can define all the specifics of how and when you want to make yourself available.

Calendly set optionsCalendly set optionsCalendly set options
Set your event details to control the length of a meeting, the timeframe they can book, and what info they need to input.

Once those options are set, your Calendly booking page is good to go. It takes all your inputs, then shows the remaining available time. You can simply share this booking page and let a recipient select an open time that aligns.

As you can see, Calendly reverses the normal flow for setting a meeting. Instead of asking a recipient for working times, you give yours first, then let them choose from a list.

Calendly has plenty of other powerful features built-in. That includes advanced tools like reminders, calendar integration, and team collaboration. To learn more about the Calendly platform, check out our articles that cover so much more:

Why Should You Embed Calendly on Your Website?

You've already seen the power of Calendly. Now, it's time to learn why you should embed your booking options on a webpage.

Let's say that you own a website. You already have traffic. That means potential connections. Those connections lead to meetings, which can lead to growth in your business.

Embedded Calendly screenshotEmbedded Calendly screenshotEmbedded Calendly screenshot
Calendly embeds directly on a webpage for a seamless experience, leading to more bookings.

It's better to use your website as a booking tool of its own. If you've got eyeballs on your content, you've got potential meetings! The same traffic you already have on your website converts into more bookings when you embed Calendly. 

When a process has less friction, it's more likely to succeed. So, if you embed Calendly links on your site, you're sure to see an uptick in bookings. That can lead to more connections, more sales, and more people interested in what you do. Let's learn more.

Why Using Calendly's Routing Forms Is a Good Thing 

For meetings and appointments to be effective, they need to be with the right people. But it's not always easy to connect with the right people--unless you're using Calendly's new Routing Forms feature.

Calendly Routing Forms FeatireCalendly Routing Forms FeatireCalendly Routing Forms Featire
Routing forms to help you connect with the right people is one of the many advantages of using Calendly.

With Routing Forms, your Calendly admin can quickly create an intake form. Use it to screen prospects and other prospective contacts. (You can access this feature if you've got a Professional, Team, or Enterprise plan.)

With a few simple questions, you can determine whether a person meets your scheduling criteria. You can also send qualified contacts to the right person (or event) by using scheduling routes.

It just takes a few minutes to make sure that you're connecting to the right people. This is one of many timesaving Calendly features that'll help you be more effective.

Now let's get to our step-by-step details for how to embed Calendly on your website.

How to Embed Calendly on Your Website

You're ready to embed Calendly on your website for the simplest way to set meetings. Luckily, you don't have to be a seasoned programmer to add a Calendly embed to your website. Let's look at three unique options to add an embed to your website:

1. How to Add Calendly Inline

The first option we'll check out is embedding Calendly inline. The booking page will embed directly "inline" with the rest of your content. It feels like a natural part of your website and fits into an already-designed page.

It's ideal to use this option when you've already built a page that describes the purpose of a booking. Use the space on your webpage to introduce the type of event you offer and why someone should book it.

When you've set up your page, it's time to add the embed. Make sure you've already set up a Calendly event, which is a set of booking options that includes duration and other preferences. Log into your account, and you'll see your list of Events. If you haven't already created one, you can click on the Create button.

Now, click the Share link on the card of the event you wish to embed.

Share Calendly linkShare Calendly linkShare Calendly link
Log into your Calendly account, then find the Share button below the events you've already set up.

Now, you'll see a new pop-up window with several options. Click on Add to website to select a type of Calendly embed. For our first example, let's choose the Embed inline option.

Embedded Calendly optionsEmbedded Calendly optionsEmbedded Calendly options
Select the Add to website option, then select your desired embed type.

Now, you'll see a second window that shows you code to paste in your website. (You'll also see options to customize your embed, but we'll come back to that later.) If you're handy at all with HTML, you can simply paste this into your webpage and upload the saved file.

Code editor Calendly embedCode editor Calendly embedCode editor Calendly embed
Simply paste the generated HTML into a webpage to add your Calendly embed.

As you can see in the example below, the booking options appear perfectly inline with my existing website. The viewer can book a meeting with me directly, which triggers the normal notifications to my inbox - no booking friction required!

Embedded Calendly linkEmbedded Calendly linkEmbedded Calendly link
As an example, I embedded my Calendly directly on my simple, one-page website.

This option is easy to add. It fits into a web page like magic. If you aren't as handy with HTML, check out the other options for popular site building tools like Wix, Squarespace, and WordPress sites.

To see another example of an inline embed, check out Calendly's example page.

2. How to Add Calendly as Pop-Up Text

Now, let's look at another option to add Calendly embeds to your website. In this example, we're going to add what Calendly calls a pop-up text embed. You'll embed a clickable button that opens your booking options.

Again, follow the same steps to select an event with the Share button. You'll see the same menu that shows embed options and navigate to the Add to website options. This time, we'll choose the Text popup option.

Notice that there's an important option that you should set, titled Link Text. This embed option creates a clickable link. The text you set in this box appears on that button. So, make sure you set it.

Popup text optionsPopup text optionsPopup text options
Make sure to set your Link Text option that appears on your website.

Now, paste your new code into your website HTML and upload the saved file. You'll see a new text-based link on your website. When a visitor clicks it, a popover window appears with Calendly booking options.

Embed pop up textEmbed pop up textEmbed pop up text
A text-based link on your website launches a popover window with your calendar availability.

This option is perfect for when you want the calendar to feel like a separate experience. It's embedded in your site, so you get the benefit of your traffic clicking through, but you clearly differentiate the booking area.

Remember: this option also works well for some of the top "build it yourself" website tools. Calendly has platform-specific options for Wix, Squarespace, and WordPress sites.

To see an example of a pop-up text version of Calendly embed, check out Calendly's pop-up example and click on Register.

3. How to Add Calendly As a Pop-Up Widget

Rounding out our options is the pop-up widget. This option is ideal if you don't want your calendar to appear inline, but also don't want a text-based link to open your calendar.

For this option, return to the Share menu, and follow the same Add to website menu. This time, choose the Widget popup option. Make sure to again customize the Button Text option. Again, paste the HTML code into your website and upload the saved file.

Now, you'll see a new button in the corner of your page. Remember, the Button Text option controls what appears on this button, so make sure to set it before you upload your code. (Also, we'll cover how to customize the color of the button in the following section.)

Embed option updatedEmbed option updatedEmbed option updated
The pop-up widget option lives at the bottom of your website and opens the Calendly booking option as an overlay.

When a visitor clicks the button, a pop-up booking link flies in. This is the same booking page that helps them set a meeting.

Just like our other embed examples, you can follow Calendly's advanced documentation to add this type of embed. Check out the instructions for Wix, Squarespace, and WordPress sites.

To see an example of the pop-up widget Calendly embed, check out Calendy's pop-up widget example and click on Sign Up For an Event in the corner of the page.

Now that you've got your embed complete, you might be wondering: how do I customize it? Read on to find out more about the customization options.

How to Customize Your Calendly Embed

So far, you've seen three options that show you how to embed Calendly on your website. But there's more power that you can use to customize your embed. These options make an embedded booking link feel more "at home" with the rest of your website content.

On the Share pop-up on Calendly's website, check out the extra customization settings. These options vary by embed type, but they're extremely helpful.

In the case of an inline embed, you can really make your booking page feel like part of the page. Set the Background Color, Text Color, and Button & Link Color to colors that match your website. Then, paste the code.

Customize Calendly embedCustomize Calendly embedCustomize Calendly embed
Use the customization settings to help your Calendly embed fit perfectly on your website.

With these options set, your Calendly embed feels more at home than ever. Check the colors you use on your website, note them, and include them in your customization.

Add Your Calendly Embed Now

Remember: an embed helps you set more meetings. By embedding it in your site, you reduce the steps and increase the conversion rate. Calendly makes it easy to embed a bookable calendar on your site to help you do just that.

If you own a website, now it's your turn. Follow your preferred method to add a Calendly embed on your site. You might be surprised to watch your bookings grow with your website traffic!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Business tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.