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 guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A Google Doc published to the web
Step 1: Get the Google Docs Embed Link
Open your Google Doc
Open the Google Doc you want to embed in Google Docs.
Publish the document to the web
Go to File > Share > Publish to Web. Click Publish, then click OK to confirm.
Copy the generated link
Copy the link shown in the dialog. Your Google Doc is now published and ready to embed.
Step 2: Install the Plugin
Install and activate the plugin
Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.
Step 3: Add the Custom iFrame Block in Gutenberg
Open your page in the block editor
Go to the page or post where you want the Google Doc. Click Edit to open the Gutenberg block editor.
Add the Custom iFrame block
Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.
Step 4: Embed Google Docs in the Custom iFrame Block
Paste the Google Docs URL
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 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.
Click Update or Publish. Your Google Doc is now live on your WordPress site.
For a full walkthrough of every Custom iFrame block setting in Gutenberg, see the Set Up Custom iFrame in Gutenberg 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
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.
Yes. Published Google Docs reflect your changes automatically. Visitors see the latest version when they load the page.
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 for more help.
Yes. Use the same Publish to Web method for Google Sheets and Slides. See the Embed Google Sheets in Gutenberg and Embed Google Slides in Gutenberg guides.
Also Available For
Embed Google Docs in Elementor
Guide for the Elementor widget.
Embed Google Sheets in Gutenberg
Embed Google Sheets in the block editor.
Related Guides
Last updated today
Built with Documentation.AI