How to embed Calendly in Wordpress

How to Embed Calendly in WordPress? 3 Easy Ways!

Are you looking for the easiest way to integrate Calendly onto your website and make the most of your appointment management tool? Then you’ve come to the right place. In this guide, you’ll learn how to embed Calendly in WordPress using 3 different methods.

What’s Calendly?

One of the most popular tools a lot of businesses use for their client services these days is an appointment scheduling tool. Whether you’re running clinics, consultancies, or other types of business, a little appointment calendar tool can go a long way to helping you run everything smoothly. Calendly, in particular, is one of the most famous tools available out there. It provides users with an easy way to schedule appointments directly without using emails. Simply set up a few rules for your meetings and events and embed them onto your website. Your users can easily view this scheduling calendar, sign up for your services directly, and even check when you’re next available.

Managing your appointment calendar has never been easier. The appointment scheduler is extremely flexible, and you can even add cool functions like buffer times, secret events, and even disable last-minute appointments. Additionally, you can integrate them with your cloud tools like Google, Outlook, iCloud, and Office 365 and even enable team-based operations on your scheduler. Calendly also comes with fantastic integration options with other popular software such as Zoom, PayPal, Google Analytics, and many others.

Why embed Calendly in WordPress?

embed calendly in wordpress - calendly main image

With a Calendly WordPress embed, you get the most out of both your website and Calendly. Your users can view your services and directly sign up with no hassle. Allow your website’s leads to work perfectly with your services by adding little pop-up embeds on your pages/posts or even add a Calendly embed on your sidebar. You can also add an appointment calendar and additional information regarding your schedules. With an embed, your website visitors can sign up for important meetings or events directly as well. Change your website’s leads and make dealing with business partners, customers, or consultees much easier with a more integrated scheduler for your site.

But that’s not all. Calendly comes with a seamless integration option that works perfectly with WordPress too. You can easily try three different types of embeds, each with their fair share of advantages. And all the embeds are fully customizable! You can edit everything from the text to embed color options to give it the look and feel of your site.

So, let’s go ahead and check out how you can embed Calendly in WordPress.

Embed Calendly on your WordPress site

Calendly allows you to embed your appointment calendars in 3 different ways:

  • Inline Embed
  • Pop-up widget
  • Pop-up text

However, the ways to embed them onto your WordPress website are identical.

First, you’ll need to log in to your Calendly account and open the event types page. Hover over the event that you want to embed, click on the Settings icon, and then Add to the website.

embed calendly in wordpress - events type

embed calendly in wordpress - add to website

Now, you’ll be given three different options to embed Calendly onto your WordPress website. You can choose between an Inline Embed, a Pop-up widget, and a simple Popup text. Each one of these has some pros and cons.

1) Inline Embed

Using the Inline widget, you can show your entire appointment calendar that shows your available days. This embed works exceptionally well using widgets too. Display your Calendly widget on your sidebar, and you can easily show what days you’re available and your available events all over your website.

2) Pop-up Widget

The Pop-up box widget adds a little customizable button on the bottom on your webpage that’s very minimal. Clicking on the button gives you a pop-up that shows your appointment calendar in a little lightbox. This is a great option if you want to add a little pop-up on your entire website or specific pages/posts.

3) Pop-up Text

The Popup text widget simply gives you a little customizable text that opens your appointment calendar using a pop-up. This widget is the most minimal and flexible option, but also the least noticeable. Try it out as a little link to various posts or pages just to give your viewers information regarding your availability and much more.

Once you click on Continue, you’ll see the code that you can copy to embed the widgets on your website. You’ll also see the option to customize the widget on the left. Click on the Copy Code button to copy the code to your clipboard.

Now, we’ll be showing you how to embed Calendly in WordPress pages/posts and the sidebar. Each one works for different purposes, whether you want to display your Calendly embed in specific pages/posts, on your sidebar, or all over your website. So let’s get right into the tutorial.

1) Embed Calendly in WordPress Pages/Posts

The simplest way to Embed Calendly on your WordPress pages/posts is to use the Embed block. To do this, first, choose your embed widget type and customize it selecting the background, text, and button color. Then click the Copy code button.

embed calendly in wordpress - code code for widget

After that, open the page/post where you want to embed Calendly. Then, click on the Add new block button and search for the Custom HTML block. Click on it and then simply paste the embed code onto the HTML block.

Once you save/publish your post, the Embed should show up with the rest of the post’s content.

2) Embed Calendly in WordPress Sidebar

To embed Calendly in your WordPress website’s sidebar, you’ll need to use the Custom HTML widget. For that, get the Embed code from your Calendly account. To do that, click on Add to Website on the event’s setting, and customize the background, text, and button color. Then click on Copy code to copy the HTML code to your clipboard.

Now, open your widget customizer by clicking on Appearance > Widgets. Then, press the Custom HTML widget under Display the customer shopping cart. Choose the sidebar as your widget location, and it’ll be added to the sidebar column on the right.

After that, click on the Custom HTML widget that you just added to the sidebar. Change the Title of the widget and paste the embed HTML that you just copied. Then click Save, and the widget will show up on your sidebar.

embed calendly in wordpress - calendly sidebar

3) Add Calendly to the whole website

Finally, let’s have a look at how to embed Calendly sitewide. For this demo, we’ll add the pop-up widget on the whole site. So, first, log in to your Calendly account, open the event types page, go to Settings > Add to the website, and copy the pop-up widget code.

After that, go to your WordPress dashboard > Appearance and open the Editor. Then, go to the Theme Files sidebar and open the Theme Footer. Once you open it, you’ll see a big HTML code. Scroll down until you find the </body> tag at the bottom and paste the pop-up widget code that you’ve just copied.

Embed Calendly in WordPress

Then, update the file and that’s it! You’ve just added Calendly sitewide.

Bonus: Customize Calendly on your site

Embedding Calendly to your site is just the first step. To take it to the next level, you can customize the embed to give it the look and feel of your site. Let’s have a look at how to do that.

The three embed types that we’ve seen (Inline, pop-up widget, and pop-up text) allow you to hide some of the event details such as your avatar, event type name and details, and the location to avoid duplicating content you might have already mentioned on your website.

Additionally, you can edit the color and button text in the pop-up widget as well as change the text the pop-up text displays. Once you finish all the customizations, save the changes, and copy the new code to add it to your web page in the embed option that you prefer.

Finally, if you want to customize the background color, text color, button, and link color, you need to purchase the Pro plan that stars at 12 USD per month.

Calendly Best Practices

After you embed Calendly in your WordPress site and customize it, it’s time to start using it! Here, we’ll share with you some tips and best practices so you can make the most of it.

  • Similarly to Google Calendar, Calendly allows you to set up the days and times that you’re available for meetings. This is very useful so your teammates and clients know beforehand when you’re available so you don’t have to reschedule meetings
  • One of the most useful features that Calendly offers is the possibility to create different event types. This way, you can create face-to-face meetings, Zoom meetings, phone calls, and one-to-ones events
  • Always include a short description that tells the participants what the purpose of the meeting is and any other information that they should know beforehand. For example, if you’re going to discuss ideas on how to improve the performance of paid marketing, give participants context and information about what your business is currently doing and their outcomes.
  • One of Calendly’s best features is the ability to create and automate reminders for the participants. You can choose how to remind the attendees (text or email), how long in advance you send the reminders as well as include rescheduling options.

Conclusion

All in all, Calendly is an excellent alternative to Google Calendar if you want an appointment scheduling tool. On top of that, it integrates smoothly with Zoom, PayPal, Google Analytics, and many other services.

In our tutorial on how to embed Calendly in WordPress, we’ve shown you three different methods to add the calendar in posts/pages, the sidebar, or sitewide. The idea behind each method is identical, so you just need to follow these steps:

  • Copy your Widget embed code from your Calendly account
  • Paste the code onto a Custom HTML block for your posts/pages or the Custom HTML widget if you want to add it as a widget

Additionally, you can customize the embed and make sure you’re making the most of Calendly following some of the best practices we shared above.

If you run into any issues during the whole embedding process, let us know, and we’ll get right onto it. Moreover, if this article helped you out, let us know! We’re always happy to hear from you.

Finally, if you’re looking for ways to make the most of your business, we recommend you check out the following guides: