How to Book More Meetings on Your Website Using Calendly Embed

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?

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.

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.

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:

• 

  How to Use Calendly for Better Team & Group Scheduling in 2021

  

  Andrew Childress

  30 Oct 2021
• 

  How to Manage Multi-Person Meeting Types for Team Members on Calendly

  

  Andrew Childress

  29 Dec 2021
• 

  How to Personalize Meeting Email & Text Notifications in Calendly

  

  Sarah Joy

  23 Oct 2021

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.

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.

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.

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.

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.

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!

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.

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.

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

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.

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!