Skip to main content
This topic has been closed for replies.
Best answer by Kelsi

Hey there @Adenjhon21308 - thanks for your topic! Firstly, check out our New User Guide - it’ll def prove helpful as you get used to the platform!

With the way WordPress is designed to work, you will have to follow the steps to embed your Calendly booking page - and this will require some coding. 

We have easy to follow articles in our Help Center that go over the step-by-step to make this happen! 

Here is the first article you should check out. Please notice some of the callouts in this Help Center article, such as the below:

Note

The Calendly embed code requires the use of JavaScript. If you have applied a theme to your Wordpress.org website, the theme may not support JavaScript or may impact the appearance of the embed code. 

There are several versions of WordPress that a user like you might be attempting to use Calendly with. All versions are covered in this article.

Click to expand the below to see more from the article: 

How to embed Calendly in WordPress.org

To embed Calendly on a single page of your site:

  1. Sign in to WordPress and visit the admin area.
  2. Go to Pages and decide which one you would like to edit, then select the + to add a new block.
  3. Choose a Custom HTML from the Formatting drop-down list, and paste your Calendly embed code. 
  4. Preview Changes to ensure the embed cooperates with your website's theme before selecting Update to save.

wpembed1.1.png

To apply the pop-up widget embed across your entire site:

  1. Navigate to the Appearance section and open the Editor.
  2. Locate the Theme Files sidebar to the right of the page and scroll to find the Theme Footer.
  3. Locate the </body> tag at the bottom of the footer. Just above the tag, paste the pop-up widget code from your Calendly account.

wordpress4.gif

How to embed Calendly in WordPress.com

While Calendly's embedded widgets are not compatible with Wordpress.com, you can add a hyperlink to your scheduling page directly on a WordPress.com site. This way, you can direct guests to your Calendly booking page. 

Add a Hyperlink to your Wordpress.com page: 

  1. While editing one of your pages, highlight any text and select the Insert/edit link button from the toolbar.
  2. Paste the URL to your personal scheduling page, an event type page, or a team page. For an image, select the image and follow the same steps.

How to embed Calendly using Wordpress Elementor 

Elementor is a third party plug-in that allows you to build a custom theme for your Wordpress site. Using Elementor, you can add the Calendly embed code to any Wordpress page. 

When using Elementor to embed Calendly, copy the embed code from your Calendly account. Then, paste the full embed code into the Elementor Shortcode Widget. 

You can use this video link for a step-by-step guide to adding the Calendly embed code with Elementor.

I hope this helps!

3 replies

Kelsi
KelsiAnswer
CalPal Emeritus
February 19, 2024

Hey there @Adenjhon21308 - thanks for your topic! Firstly, check out our New User Guide - it’ll def prove helpful as you get used to the platform!

With the way WordPress is designed to work, you will have to follow the steps to embed your Calendly booking page - and this will require some coding. 

We have easy to follow articles in our Help Center that go over the step-by-step to make this happen! 

Here is the first article you should check out. Please notice some of the callouts in this Help Center article, such as the below:

Note

The Calendly embed code requires the use of JavaScript. If you have applied a theme to your Wordpress.org website, the theme may not support JavaScript or may impact the appearance of the embed code. 

There are several versions of WordPress that a user like you might be attempting to use Calendly with. All versions are covered in this article.

Click to expand the below to see more from the article: 

How to embed Calendly in WordPress.org

To embed Calendly on a single page of your site:

  1. Sign in to WordPress and visit the admin area.
  2. Go to Pages and decide which one you would like to edit, then select the + to add a new block.
  3. Choose a Custom HTML from the Formatting drop-down list, and paste your Calendly embed code. 
  4. Preview Changes to ensure the embed cooperates with your website's theme before selecting Update to save.

wpembed1.1.png

To apply the pop-up widget embed across your entire site:

  1. Navigate to the Appearance section and open the Editor.
  2. Locate the Theme Files sidebar to the right of the page and scroll to find the Theme Footer.
  3. Locate the </body> tag at the bottom of the footer. Just above the tag, paste the pop-up widget code from your Calendly account.

wordpress4.gif

How to embed Calendly in WordPress.com

While Calendly's embedded widgets are not compatible with Wordpress.com, you can add a hyperlink to your scheduling page directly on a WordPress.com site. This way, you can direct guests to your Calendly booking page. 

Add a Hyperlink to your Wordpress.com page: 

  1. While editing one of your pages, highlight any text and select the Insert/edit link button from the toolbar.
  2. Paste the URL to your personal scheduling page, an event type page, or a team page. For an image, select the image and follow the same steps.

How to embed Calendly using Wordpress Elementor 

Elementor is a third party plug-in that allows you to build a custom theme for your Wordpress site. Using Elementor, you can add the Calendly embed code to any Wordpress page. 

When using Elementor to embed Calendly, copy the embed code from your Calendly account. Then, paste the full embed code into the Elementor Shortcode Widget. 

You can use this video link for a step-by-step guide to adding the Calendly embed code with Elementor.

I hope this helps!

Kelsi - Calendly Community
    A
    Adenjhon21308Author
    Community Member
    February 19, 2024

    Hi, Kelsi at Calendly

    Thanks it’s really helpful to me.

     

      Kelsi
      Kelsi
      CalPal Emeritus
      February 19, 2024

      Hi, Kelsi at Calendly

      Thanks it’s really helpful to me.

       

      I am so glad to have helped, friend! 

      Kelsi - Calendly Community
      Terms & ConditionsAccessibility statement