View Categories

How to Embed Google Docs in WordPress (Gutenberg)?

Table of Contents

With Custom iFrame, you can embed Google Docs in WordPress easily. Display any Google Doc directly on your WordPress page so visitors can read it without leaving your site.

Note: Using Elementor? Follow our How to Embed Google Docs in Elementor? guide instead.

Quick Summary

Step-by-step guide to embed Google Docs in WordPress

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

Step 1: Get the Google Docs Embed Link

  1. Open the Google Doc you want to embed.
  2. Go to the top menu and navigate to File, then Share, then Publish to Web.
  3. Click Publish, then click OK in the dialog box to confirm.
  4. Copy the generated link. Your Google Doc is now published and ready to embed in your WordPress site.

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 block 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 Docs in the Custom iFrame Block

  1. Select the Custom iFrame block.
  2. In the Source field, paste the Google Docs URL you copied in Step 1.

Your Google Doc will appear inside the Gutenberg editor immediately.

Step 5: Adjust Custom iFrame Basic 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.

Update or Publish the page. Your Google Doc is now live on your WordPress site.

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