Use this step-by-step guide to embed Calendly on your WordPress site. Whether you use WordPress.com, WordPress.org, or Elementor, you’ll find the right method below. Add event types or booking pages using inline embeds, pop-ups, and more.
Before you begin
Check which version of WordPress you’re using
If you’re not sure whether your site uses WordPress.com or WordPress.org:
- Log in to your WordPress dashboard.
- Hover over the WordPress logo in the top left corner.
- If a drop-down menu appears, you’re using WordPress.org.
- If no menu appears, you’re using WordPress.com.
Get your Calendly embed code
You’ll need to copy your embed code from your Calendly account. You can generate a code for:
- A single event type
- Your booking page
Add Calendly to WordPress.org
WordPress.org gives you full access to embed Calendly on one page or across your entire site.
- Note: Calendly's embed code requires JavaScript. Some WordPress themes may not support JavaScript or may affect how the embed looks.
Option 1 – Add Calendly to a single page
- Sign in to WordPress and go to your admin dashboard.
- Select Pages, then choose a page to edit.
- Select the + icon to add a new block.
- Choose Custom HTML from the formatting options.
- Paste your Calendly embed code.
- Select Preview to check the layout.
- Select Update to save your changes.
Option 2 – Add the pop-up widget to every page
- In the admin dashboard, go to Appearance > Editor.
- In the right sidebar under Theme Files, find Theme Footer.
- Scroll to the bottom of the file and locate the
</body>tag. - Paste your Calendly pop-up widget code just above that tag.
- Save and preview your site.
Add Calendly to WordPress.com
You can add Calendly to WordPress.com, whether or not your plan includes plugin support.
- Note: Calendly’s embedded widgets only work with WordPress.com plans that support custom plugins or HTML blocks. If your plan doesn’t support these, you can still add a clickable link to your Calendly page.
Option 1 – For plugin-enabled plans
- Go to the page where you want to add Calendly.
- Select the + Block Inserter icon.
- Search for and insert the Custom HTML block.
- Paste your Calendly embed code.
- Preview the changes and select Update to save.
Option 2 – For plans without plugin support
You can still link to your Calendly page from text or images.
- While editing your page, highlight the text and select the Insert/edit link button.
- Paste the URL to your scheduling page, an event type, or a team page.
- To link an image, select the image and follow the same steps.
Add Calendly using Elementor
Elementor works with both WordPress.org and WordPress.com. It gives you more control over page design.
- Open your page in the Elementor editor.
- Add a Shortcode widget to the canvas.
- In the Content tab, paste your full Calendly embed code.
For a visual walkthrough, watch our Elementor video guide: Add Calendly with Elementor.
Troubleshooting scrolling issue on Elementor
We have seen that Elementor will automatically overflow-y:auto add as an inline style. The addition of this style can create an extra scrolling element.
To correct this, make sure that the overflow or overflow-y is set to hidden. For example:
<style>
.calendly-inline-widget { overflow-y: hidden !important; }
</style>