View Categories

How to Embed Google Calendar in WordPress (Gutenberg)?

Table of Contents

With Custom iFrame, you can embed Google Calendar in WordPress easily. Display your booking page directly on your Gutenberg site so visitors can schedule time with you without leaving your page.

Quick Summary

Step-by-step guide to embed Google Calendar in WordPress using the Custom iFrame block.

1. Get your Google Calendar booking page link.
2. Install and activate the Custom iFrame plugin.
3. Open your page in the Gutenberg editor and add the Custom iFrame block.
4. Paste the Google Calendar URL into the Source field.
5. Adjust settings and customize the display.
6. Save and publish your page.

Step 1: Get Your Google Calendar Booking Page Link

  1. Open Google Calendar.
  2. Create a new booking page or open an existing one.
  3. Copy the link for that booking page.

Step 2: Install the Custom iFrame Plugin

  1. Go to your WordPress dashboard.
  2. Navigate to Plugins, then Add New.
  3. Search for “Custom iFrame by Coderz Studio” and press enter.
  4. Click Install Now, then click Activate.
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 4 reviews, over 3,000 active installations, and is marked compatible with the current WordPress version.

Step 3: Add the Custom iFrame Block in Gutenberg

  1. Open your page in the Gutenberg editor.
  2. Click the Add Block button.
  3. Search for Custom iFrame.
  4. Click the Custom iFrame block to add it to the page.

Step 4: Embed Google Calendar in the Custom iFrame Block

  1. Select the Custom iFrame block.
  2. In the Source field, paste the Google Calendar booking page link you copied earlier.

Your Google Calendar booking page will appear inside the Gutenberg editor immediately.

Step 5: Adjust Settings

Once the Google Doc is embedded, you can configure the display settings in the Gutenberg block panel.

Height: Set the iframe height to match your content and page layout.

Scroll Bar: Enable or disable the scrollbar inside the embedded content.

Refresh Interval: Set how often the iframe refreshes. Useful if your Google Doc is updated frequently.

Smart Load: Enable lazy loading so the iframe loads only when it enters the viewport.

Custom iFrame display settings panel showing options for height, auto height toggle, scrollbar visibility, and refresh interval—illustrating how to optimize embedded content with lazy load and dynamic sizing in WordPress Gutenberg.

For a full walkthrough of every Custom iFrame block setting in Gutenberg, visit our Complete Custom iFrame for Gutenberg Guide.

Click Update or Publish, Your Google Calendar booking page is now live on your WordPress site.

This guide showed you how to embed Google Calendar in WordPress using the Custom iFrame plugin. From getting the booking page link to configuring and publishing in Gutenberg, the setup is quick and straightforward.