Contact

Embed Calendly in Elementor for WordPress: 3 Methods

In this blog post, we'll walk you through three straightforward methods to embed Calendly into your Elementor-powered website.

Calendly has become an essential tool for businesses and professionals to schedule appointments seamlessly. If you’re using Elementor for your WordPress website, integrating Calendly can enhance user experience and streamline appointment bookings. In this blog post, we’ll walk you through three straightforward methods to embed Calendly into your Elementor-powered website.

Method 1: Simple Link That Opens in a New Tab

This is the most basic way to integrate Calendly into your Elementor website. Here’s how you can do it:

  1. Log in to Calendly: Sign in to your Calendly account and navigate to the event type you want to embed.
  2. Copy the Link: On the event type page, find the “Share” button or section. You’ll see a link that you need to copy.
  3. Add the Link in Elementor: Open your WordPress dashboard, create or edit the page using Elementor. Add a text or button element to your page where you want to place the Calendly link.
  4. Paste the Link: In the text or button element settings, paste the Calendly link you copied earlier.
  5. Set Link Behavior: Configure the link to open in a new tab. This ensures that when users click the link, the Calendly scheduling page opens in a separate browser tab.

Method 2: Embed Directly into Your Site

For a more integrated approach, embedding Calendly directly into your site can enhance user engagement. Here’s how to do it:

  1. Log in to Calendly: Access your Calendly account and select the event type you want to embed.
  2. Copy the Embed Code: Look for the “Embed” button or section on the event type page. You’ll find an embed code snippet that you need to copy.
  3. Add an HTML Element in Elementor: In your Elementor-powered WordPress page, add an HTML element to the section where you want to display the Calendly scheduler.
  4. Paste the Embed Code: In the HTML element settings, paste the Calendly embed code you copied earlier.
  5. Preview and Adjust: Preview your page to see how the Calendly scheduler appears. Adjust the dimensions of the HTML element if necessary to ensure proper display.

Method 3: Open as a Popup on Your Site

Creating a popup for Calendly on your website can grab visitors’ attention and make scheduling even more convenient. Follow these steps to set up a Calendly popup:

  1. Choose a Popup Plugin: If you’re not already using a popup plugin, choose and install one from the WordPress plugin repository. Popular options include Popup Maker, Elementor Pro’s popup feature, and OptinMonster.
  2. Create a New Popup: Using your chosen popup plugin, create a new popup. Customize the design and layout according to your website’s aesthetics.
  3. Embed Calendly: Within the popup editor, add an HTML block or code widget. Paste the Calendly embed code you copied from your Calendly event type.
  4. Set Trigger and Display Rules: Configure the popup to trigger based on user actions like clicking a button or spending a certain amount of time on a page. Set display rules to control which pages the popup appears on.
  5. Test and Fine-Tune: Preview and test the popup to ensure that it opens and displays Calendly correctly. Adjust any settings or styles as needed.

By following these three methods, you can seamlessly integrate Calendly into your Elementor-powered WordPress website, making appointment scheduling a breeze for your clients or customers. Whether you choose a simple link, direct embedding, or a popup, your visitors will appreciate the convenience of scheduling appointments effortlessly.