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.

Want to embed a different form tool? See the Embed Forms in Elementor overview.

Requirements

Custom iFrame plugin installed and active
Elementor installed
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.

Open your page in Elementor

Go to the page where you want the booking form. Click Edit with Elementor.

Drag the widget onto your page

Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.

Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor

Step 3: Embed Calendly in Elementor

Paste the Calendly event URL

In the Content tab, paste the Calendly event URL into the Source URL field. The booking calendar appears in the editor.

Custom iFrame widget in Elementor editor showing Calendly event URL in Source URL field with live Calendly booking calendar preview

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.

Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the Style Custom iFrame guide. Adjust dimensions, backgrounds, borders, and more.

Step 5: Save and Publish

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

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the Set Up Custom iFrame in Elementor 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

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 iFrame 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 Typeform in Elementor

Embed Typeform surveys and quizzes in Elementor.

Embed HubSpot Form in Elementor

Embed HubSpot forms in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI