> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Calendly in Elementor

Step-by-step guide to embed Calendly in Elementor using the Custom iFrame WordPress plugin. Let visitors book meetings on your site. No coding required.


## Overview

Custom iFrame lets you embed Calendly in Elementor by pasting any Calendly event link into the widget. Let visitors book meetings, demos, and consultations directly on your WordPress page without any redirects or coding.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A Calendly account with at least one event type

## Step 1: Get the Calendly Event Link

<Steps>
  <Step title="Open Calendly and find your event" icon="calendar" title-type="p">
    Log in to [calendly.com](https://calendly.com) and go to your event types.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776954696/elementor/forms/calendly/calendly-event-link.webp"
      alt="Calendly dashboard showing event types with Copy link button for each booking event"
      width="1024"
      height="482" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Copy the event link" icon="link" title-type="p">
    Click **Copy** on the event you want to embed.
  </Step>
</Steps>

## Step 2: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the booking form. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Calendly in Elementor

<Steps>
  <Step title="Paste the Calendly event URL" icon="clipboard" title-type="p">
    In the Content tab, paste the Calendly event URL into the **Source URL** field. The booking calendar appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776954699/elementor/forms/calendly/paste-calendly-url.webp"
      alt="Custom iFrame widget in Elementor editor showing Calendly event URL in Source URL field with live Calendly booking calendar preview"
      width="1024"
      height="486"
    />
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 600px to show the full calendar and time slots. Enable **Auto Height** to let it resize as the month view changes.
  </Step>
</Steps>

## Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

<Callout kind="success">
  Click **Update** or **Publish**. Your Calendly booking calendar is now live on your WordPress site.
</Callout>

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed Calendly in Elementor using the Custom iFrame plugin. From copying the event link to pasting the URL and publishing, the whole setup runs through the Elementor editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need a paid Calendly plan to embed a booking page?" default-open="false">
    No. Calendly's free plan supports embedding. Copy the event link from your event types page and paste it into the Source URL field.
  </Expandable>
  <Expandable title="Will bookings still go through to my Calendly account?" default-open="false">
    Yes. The booking form runs inside an iFrame and submits directly to Calendly. All bookings and notifications work exactly as they would on your Calendly page.
  </Expandable>
  <Expandable title="What height should I set for a Calendly booking page?" default-open="false">
    Set height to at least 600px to show the date picker and time slots together. Enable Auto Height to let the iFrame resize as the visitor navigates months.
  </Expandable>
  <Expandable title="Can I embed a specific event type or my full scheduling page?" default-open="false">
    Both work. Copy the link for a specific event type to embed that booking page, or copy your main Calendly profile link to show all event types.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Typeform in Elementor" href="/elementor/forms/embed-typeform" icon="layout" horizontal={false}>
    Embed Typeform surveys and quizzes in Elementor.
  </Card>
  <Card title="Embed HubSpot Form in Elementor" href="/elementor/forms/embed-hubspot" icon="layout" horizontal={false}>
    Embed HubSpot forms in Elementor.
  </Card>
</Columns>

## Related Guides

- [Embed Forms in Elementor - Overview](/elementor/embed-forms)
- [Embed Typeform in Elementor](/elementor/forms/embed-typeform)
- [Embed HubSpot Form in Elementor](/elementor/forms/embed-hubspot)
- [Embed JotForm in Elementor](/elementor/forms/embed-jotform)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)