> 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 Docs in Gutenberg

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


## Overview

Custom iFrame lets you embed Google Docs in Gutenberg by pasting a published Google Doc URL into the block. Display any Google Doc directly on your WordPress page so visitors can read it without leaving your site.

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 Docs in Elementor](/elementor/documents/embed-google-docs) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A Google Doc published to the web

## Step 1: Get the Google Docs Embed Link

<Steps>
  <Step title="Open your Google Doc" icon="file-text" title-type="p">
    Open the Google Doc you want to embed in Google Docs.
  </Step>
  <Step title="Publish the document to the web" icon="globe" title-type="p">
    Go to **File > Share > Publish to Web**. Click **Publish**, then click **OK** to confirm.
  </Step>
  <Step title="Copy the generated link" icon="link" title-type="p">
    Copy the link shown in the dialog. Your Google Doc is now published and ready to embed.
  </Step>
</Steps>

## Step 2: Install the Plugin

<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>
</Steps>

## Step 3: Add the Custom iFrame Block in Gutenberg

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the Google Doc. 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 4: Embed Google Docs in the Custom iFrame Block

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

## Step 5: Adjust Settings and Publish

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

**Scroll Bar:** Enable the scrollbar to let visitors scroll through longer documents.

**Refresh Interval:** Set how often the iframe refreshes. Useful if your Google Doc 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/v1776999100/gutenberg/documents/google-docs/basic-settings.webp"
  alt="Custom iFrame block settings panel in Gutenberg showing height, auto height toggle, scroll bar, and refresh interval options for Google Docs embed"
  width="329"
  height="639" priority={true} fetchPriority="high" />

<Callout kind="success">
  Click **Update** or **Publish**. Your Google Doc 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](/getting-started/gutenberg-setup) guide.

This guide showed you how to embed Google Docs in Gutenberg using the Custom iFrame plugin. From getting the publish link to adding the block and going live, the setup takes only a few minutes.

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need to make the Google Doc public?" default-open="false">
    Yes. Use File > Share > Publish to Web to generate an embed link. This is different from sharing the document with specific people. The published URL is what you paste into Custom iFrame.
  </Expandable>
  <Expandable title="Will the embed update if I edit the Google Doc?" default-open="false">
    Yes. Published Google Docs reflect your changes automatically. Visitors see the latest version when they load the page.
  </Expandable>
  <Expandable title="The Google Doc is not loading. What should I do?" default-open="false">
    Make sure you used the Publish to Web link and not the sharing link. The embed link comes from File > Share > Publish to Web. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="Can I embed Google Sheets or Slides too?" default-open="false">
    Yes. Use the same Publish to Web method for Google Sheets and Slides. See the [Embed Google Sheets in Gutenberg](/gutenberg/documents/embed-google-sheets) and [Embed Google Slides in Gutenberg](/gutenberg/documents/embed-google-slides) guides.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Google Docs in Elementor" href="/elementor/documents/embed-google-docs" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Google Sheets in Gutenberg" href="/gutenberg/documents/embed-google-sheets" icon="table" horizontal={false}>
    Embed Google Sheets in the block editor.
  </Card>
</Columns>

## Related Guides

- [Embed Documents in Gutenberg - Overview](/gutenberg/embed-documents)
- [Embed Google Sheets in Gutenberg](/gutenberg/documents/embed-google-sheets)
- [Embed Google Slides in Gutenberg](/gutenberg/documents/embed-google-slides)
- [Embed Google Forms in Gutenberg](/gutenberg/documents/embed-google-forms)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)