> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Google Calendar in Gutenberg WordPress

Step-by-step guide to embed Google Calendar in Gutenberg using the Custom iFrame WordPress plugin. No coding required.


## Overview

Custom iFrame lets you embed Google Calendar in Gutenberg by pasting a booking page link into the block. Display your booking page directly on your WordPress site so visitors can schedule time with you without leaving your page.

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 Google Calendar in Elementor](/elementor/google/embed-google-calendar) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A Google Calendar booking page link to embed

## Step 1: Get the Google Calendar Booking Page Link

<Steps>
  <Step title="Open Google Calendar" icon="calendar" title-type="p">
    Go to [calendar.google.com](https://calendar.google.com) and open your calendar.
  </Step>
  <Step title="Create or open a booking page" icon="plus" title-type="p">
    Create a new booking page or open an existing one from your calendar settings.
  </Step>
  <Step title="Copy the booking page link" icon="link" title-type="p">
    Copy the link for the booking page. This is the URL you will paste into the Custom iFrame block.
  </Step>
</Steps>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="Custom iFrame for Elementor WordPress plugin by Coderz Studio showing 3000+ active installations on the plugin repository page"
      width="818"
      height="363" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the calendar. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Google Calendar in Gutenberg

<Steps>
  <Step title="Paste the Google Calendar URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the **Source** field in the right panel, paste the Google Calendar booking page link you copied. Your booking page appears inside the block in the editor immediately.
  </Step>
</Steps>

## Step 4: Adjust Settings and Publish

**Height:** Set the iframe height to match your booking page and page layout. 600px to 800px works well for most booking pages.

**Scroll Bar:** Enable the scrollbar if the calendar extends below the iframe height.

**Refresh Interval:** Set how often the iframe refreshes. Useful if calendar availability updates frequently.

**Smart Load:** Turn on lazy loading so the iframe loads only when it enters the viewport.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777000697/gutenberg/google/google-calendar/basic-settings.webp"
  alt="Custom iFrame block settings panel in Gutenberg showing height, auto height toggle, scroll bar, and refresh interval options for Google Calendar embed"
  width="329"
  height="639" priority={true} fetchPriority="high" />

<Callout kind="success">
  Click **Update** or **Publish**. Your Google Calendar booking page is now live on your WordPress site.
</Callout>

For a full walkthrough of every Custom iFrame block setting in Gutenberg, see the [Set Up Custom iFrame in Gutenberg WordPress](/getting-started/gutenberg-setup) guide.

This guide showed you how to embed Google Calendar in Gutenberg using the Custom iFrame plugin. From copying the booking page link to configuring the block and publishing, the setup takes only a few minutes.

## FAQ

<ExpandableGroup>
  <Expandable title="Can visitors book appointments through the embedded calendar?" default-open="false">
    Yes. The booking page is fully functional inside the iframe. Visitors can view availability and book time slots directly on your WordPress page.
  </Expandable>
  <Expandable title="Can I embed a regular calendar view instead of a booking page?" default-open="false">
    Yes. Get the embed link from your Google Calendar settings under Settings > Calendar settings > Integrate calendar. Copy the embed URL and paste it into the Source field.
  </Expandable>
  <Expandable title="The Google Calendar is not loading. What should I do?" default-open="false">
    Make sure the booking page is published and the link is correct. If the calendar is set to private, visitors cannot view it. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="What height works best for a Google Calendar booking page?" default-open="false">
    Booking pages typically need 600px to 800px. Enable Auto Height to let the iframe resize automatically based on the content.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Google Calendar in Elementor" href="/elementor/google/embed-google-calendar" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Google Maps in Gutenberg WordPress" href="/gutenberg/google/embed-google-maps" icon="map-pin" horizontal={false}>
    Embed Google Maps in the block editor.
  </Card>
</Columns>

## Related Guides

- [Embed Google Services in Gutenberg - Overview](/gutenberg/embed-google-services)
- [Embed Google Maps in Gutenberg WordPress](/gutenberg/google/embed-google-maps)
- [Embed Google My Maps in Gutenberg WordPress](/gutenberg/google/embed-google-my-maps)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)