View Categories

How to Embed Calendly Event in Elementor?

Table of Contents

With Custom iFrame, you can embed Calendly event in Elementor easily. Let visitors book meetings, demos, or consultations right from your WordPress site — no redirects, no drama.

Step 1: Get the Calendly Event Link

  1. Open Calendly. (https://calendly.com/)
  2. Navigate to the particular event that you want to embed.
  3. Click on ‘Copy’ button.
This image shows the Calendly dashboard interface demonstrating how to Embed Calendly Event in Elementor. The left sidebar menu includes options like Event types, Meetings, Availability, Contacts, Workflows, Integrations & apps, and Routing. The main section displays the user profile “Coderz Studio” with a shareable booking link, along with two event cards: “Book a Demo” (30 min, Group) and “Product Walkthrough” (30 min, One-on-One). Each event card includes options to view the booking page, copy the link, or share it

Step 2: Install the Custom iFrame Plugin

  1. Install and Activate ‘Custom iFrame Plugin by Coderz Studio‘
  2. Open your page in Elementor Editor.
  3. Search for Custom iFrame and Drag and drop the Widget onto editor area.
This image shows the WordPress plugin “Custom iFrame for Elementor – Embed Pdf, Maps, Videos, & Websites Easily” by Coderz Studio. It allows secure, SEO-friendly, and responsive iFrame embedding in Elementor with features like lazy loading, auto-height adjustment, and dynamic URL support. The plugin has a 5-star rating from 3 reviews, over 1,000 active installations, was last updated 19 hours ago, and is marked compatible with the current WordPress version.

Step 3: Embed Calendly Event in Elementor

  1. Go to Content.
  2. Paste the URL into Source URL field.
This image shows the Elementor editor interface demonstrating how to Embed Calendly Event in Elementor using the Custom iFrame widget. The left panel contains settings for selecting the source type, pasting the event link, adjusting height, enabling or disabling auto height, and showing scrollbars. The right side displays an embedded Calendly booking page titled “Book a Demo” for Coderz Studio, showing a 30-minute session with a date picker for August 2025 and available time slots on the right-hand side.

Step 4: Customize & Configure Settings

For styling, smart loading, and advanced options, refer to our Complete Custom iFrame Widget Guide to fine-tune your embed.

Customize your iFrame with our Style Custom iFrame guide—adjust dimensions, backgrounds, borders, and more! 🎨✨

Step 5: Save & Publish

Click Update, and your Calendly event is now live on your page!

Embed Calendly Event in Elementor in simple way with the Custom iFrame plugin. Follow the steps to display Calendly Event on your WordPress website. This keeps your site engaging and informative.