View Categories

How to Embed Google Calendar in Elementor?

Table of Contents

With Custom iFrame, you can embed Google Calendar in Elementor easily. Show your availability, share event schedules, or let visitors check open slots right on your WordPress site.

Follow these steps to display a Google Calendar on your website.

Not a fan of reading? No worries! we’ve got a video tutorial for you.

Embed Google Calendar in Elementor | Easy Booking Setup

Not a video person? No worries! scroll on for the full step-by-step guide.

Step 1: Get Your Google Calendar Link

  1. Open Google Calendar.
  2. Click on ‘Create New’ > select ‘Appointment Schedule’
  3. Set up your ‘ BOOKABLE APPOINTMENT SCHEDULE’ with name, appointment duration, General availability, Scheduling Window and other available settings > Save the Changes.
  4. Copy the link of your booking calendar.

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 Google Calendar in Elementor

  1. Go to Content section of Custom iFrame widget.
  2. Paste your Google Calendar URL into Source URL field.
Custom iFrame editor in Elementor displaying an embedded Google Calendar interface for booking appointments with Coderz Studio, showing available time slots and configuration settings—demonstrating how to embed Google Calendar in Elementor for streamlined scheduling on WordPress sites.

Step 4: Customize & Configure Settings

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

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

Step 5: Save & Publish

Click Update, and the Google Calendar is now live on your page!

Make booking simple, embed Google Calendar in Elementor and let your visitors see your schedule and plan appointments without any back-and-forth!