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

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A Calendly account with at least one event type

Step 1: Get the Calendly Event Link

Open Calendly and find your event

Calendly dashboard showing event types with Copy link button for each booking event

Copy the event link

Click Copy on the event you want to embed.

Step 2: Install the Plugin and Add the Block

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button

Open your page in the block editor

Go to the page or post where you want the booking form. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.

Step 3: Embed Calendly in Gutenberg

Paste the Calendly event URL

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.

Set the height

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.

Click Update or Publish. Your Calendly booking calendar is now live on your WordPress site.

For all block settings, see the Set Up Custom iFrame in Gutenberg 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

No. Calendly's free plan supports embedding. Copy the event link from your event types page and paste it into the Source URL field.

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.

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.

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.

Also Available For

Embed Calendly in Elementor

Guide for the Elementor widget.

Embed Typeform in Gutenberg

Embed Typeform surveys and quizzes in Gutenberg.

Was this page helpful?

Last updated today

Built with Documentation.AI