> 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 Gutenberg

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


## Overview

Custom iFrame lets you embed Calendly in Gutenberg by pasting any Calendly event link into the block. 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.

Using Elementor instead? Follow the [Embed Calendly in Elementor](/elementor/forms/embed-calendly) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- 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: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the booking form. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Calendly in Gutenberg

<Steps>
  <Step title="Paste the Calendly event URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the right panel, paste the Calendly event URL into the **Source URL** field. The booking calendar appears inside the block in the editor.
  </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>

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

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) guide.

This guide showed you how to embed Calendly in Gutenberg using the Custom iFrame plugin. From copying the event link to pasting the URL and publishing, the whole setup runs through the block 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 block 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 Calendly in Elementor" href="/elementor/forms/embed-calendly" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Typeform in Gutenberg" href="/gutenberg/forms/embed-typeform" icon="help-circle" horizontal={false}>
    Embed Typeform surveys and quizzes in Gutenberg.
  </Card>
</Columns>

## Related Guides

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