How to add Calendly to a WordPress site

Before you begin 

1. You will need to know if you are using WordPress.com or WordPress.org. If you are unsure, follow these steps to verify: 
   • Log in to the WordPress admin dashboard for your site
   • Hover over the WordPress logo in the top left corner of the page:

1. • • • WordPress.org users will see a drop-down menu appear with options
       • WordPress.com will not see a menu
2. You will need to generate your Calendly embed code. As a reminder, the embed code can be generated for either a single event type, or your account's booking page
   • WordPress.org supports all three of Calendly's embed options:
     • Inline
     • Pop-up text
     • Pop-up widget

Embed Calendly on WordPress.org

With WordPress.org, you have the ability to add Calendly to a single page, or as a widget across your whole site.

Option 1: Embed Calendly on a single page

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

Option 2: Apply the pop-up widget across your entire site

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

Embed Calendly on WordPress.com

With WordPress.com, you have the ability to add Calendly regardless if you have a plan that allows you to install plugins, or a plan that does not.

Calendly's embedded widgets are only compatible with WordPress.com plans that allow you to add plugins. If you do not have the ability to add plugins, you can add a hyperlink to your scheduling page directly so you can direct guests to your Calendly booking page.

• Plugin enabled plans

  1. 1. 1. Navigate to the page you want to add the Calendly embed code
        2. To add the Custom HTML block, select the + Block Inserter icon and search for “HTML”
           
           

        3. Once you’ve added the block, paste your Calendly embed code

        4. Preview Changes to ensure the embed cooperates with your website's theme before selecting Update to save

  Non plugin enabled plans

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

Embed Calendly using Elementor

With Elementor, adding Calendly to any WordPress site is simple. It does not matter if you are on Wordpress.com or WordPress.org.

Elementor is a third party page builder that allows you to easily customize your WordPress site. It is compatible with both WordPress.com as well as WordPress.org. Using Elementor, you can add the Calendly embed code to any WordPress page.

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

1. Add the Shortcode widget to the canvas. For more information, see Add elements to a page
2. In the Content tab, under the Shortcode section, enter the full Calendly embed code in the textbox area provided