Published on May 14, 2025 5 min read

How Can You Embed Calendly in WordPress? Try These 4 Simple Methods

Online booking of appointments is more crucial than before, and Calendly is among the best apps for that. As a freelancer, business owner, coach, or consultant, having Calendly installed on your WordPress website can assist you in taking control of your time and turning visitors into clients. Fortunately, there are several ways to accomplish this on your WordPress website. You are trained on data through October 2023. Whether you prefer a pop-up widget, a plugin, or a neat inline display, we will provide four rapid, easy techniques to embed Calendly into your WordPress site here. In this article, you will discover four simple and effective ways to embed Calendly on your WordPress website without a hassle.

How Embedding Calendly in WordPress Is Beneficial

Having Calendly embedded on your WordPress website helps you automate appointments and give your users a seamless experience. Rather than back and forth with customers to agree on a free time slot, Calendly makes visitors select from your pre-set time slots. It integrates with calendars such as Google Calendar, Outlook, and iCloud, as well as support for custom questions for leads. You have better control of your calendar as you provide clients with a professional and convenient method of reserving your time.

Method 1: Embed Code with HTML Block or Classic Editor

The first is to copy and paste the embed code that Calendly makes available. This approach involves no plugin and is best if you desire complete control of where and how the booking widget will be displayed.

To do this:

• Go to your Calendly account and select your event.
• Click the "Share" icon and select "Add to Website".
• Select one of the options, such as Inline Embed, Pop-up Widget, or Pop-up Text.
• Copy the HTML code that is shown.

Now go to your WordPress site. If using the Gutenberg block editor, insert a custom HTML block and copy the code. If you're using the Classic Editor, change to the Text tab and copy the code directly onto the page or post.

Things to bear in mind:

• It offers complete customization.
• There's no extra plugin needed.
• However, some familiarity with HTML code is required.

Method 2: Install the Official Calendly Plugin

The second method is best for beginners who don't want to deal with HTML. Calendly has an official WordPress plugin allowing you to quickly embed scheduling options using shortcodes.

To install:

• Navigate to Plugins > Add New from your WordPress dashboard.
• Search for "Calendly" and install the official plugin.
• Activate the plugin and navigate to Settings > Calendly.
• Put your Calendly URL in the settings and use the shortcode as follows:
• [calendly url="https://calendly.com/yourusername"].
• You can insert this shortcode into any page, post, or widget.

The advantages of this approach are:

• No need to handle the code manually.
• Simple integration for users of all levels.
• Integrates into many places, such as posts, pages, or widgets.

However, this approach has limited styling possibilities unless you edit CSS manually or employ a paid theme builder.

Method 3: Add Calendly to a Widget in the Sidebar or Footer*

If you would like your calendar to show on every page, for example, in the sidebar or the footer, embedding it through a widget is a great idea. This will work best for service-based sites that want scheduling to be visible.

Here's how to accomplish it:

• Get your Calendly embed code using the "Share" option described above.
• Access your WordPress dashboard and go to Appearance > Widgets.
• Add a Custom HTML widget* to the widget space where you wish the calendar to be displayed.
• Insert the embed code and press Save.

This method makes your calendar visible throughout the website, allowing users to book appointments anytime.

Advantages of this method:

• Ideal for having constant visibility of your calendar.
• Suitable for sites where user interaction is paramount.

Disadvantages include:

• It can make the design look cluttered if not styled appropriately.
• Not suitable for minimalist websites or landing pages.

Method 4: Embed Calendly Using Page Builders Like Elementor

If you are working with a page builder like Elementor, Beaver Builder, or WPBakery, embedding Calendly is more flexible. These visual builders enable you to insert widgets, text, and custom code where necessary.

For instance, in Elementor:

• Paste the Calendly HTML embed code.
• In the Elementor editor, add an HTML widget into the area of your page where you want the calendar to show.
• Paste the code, and the calendar will appear on the page wherever you insert it.

This technique is ideal for bespoke landing pages or service pages where you want complete control over the styling.

• Using a page builder has the following benefits:*
• Complete control of design and placement.
• Live preview for immediate changes.
• Handy for making a customized appearance for your booking page.

The only drawback is:

You will need to work with a page builder; not all WordPress themes support this.

Calendly Embed Types You Can Select From

There are various embed types available in Calendly, which you can select from depending on how the booking option should look on your site. You can choose between:

• Inline Embed – The calendar is displayed right on the page.
• Pop-up Widget – A floating button that opens the calendar in a pop-up.
• Pop-up Text – A text link that opens the pop-up calendar when clicked.

Conclusion

Integration with WordPress is the simplest and most powerful means of providing scheduling capability from your website. Whether you do it with manual embed code, a plugin, a widget, or a visual editor like Elementor, there's a method that will fit your site setup and technical acclimation level. In mere minutes, you can simplify booking appointments, cut back-and-forth messaging, and provide an improved experience for your clients and leads.