Embed Google Sheet in Gutenberg
Step-by-step guide to embed Google Sheet in Gutenberg using the Custom iFrame WordPress plugin. No API key needed. No coding required.
Overview
Custom iFrame lets you embed Google Sheet in Gutenberg by pasting a published spreadsheet URL into the block. Display live data, reports, and tables directly on your WordPress page without an API key.
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 Sheet in Elementor guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A Google Sheet published to the web
Step 1: Get the Google Sheet Link
Open your Google Sheet
Open the Google Sheet you want to embed in Google Drive.
Publish the sheet to the web
Go to File > Share > Publish to web. Choose which sheet to publish (one tab or the entire document). Click Publish, then confirm by clicking OK.
Copy the published link
Copy the generated link. The URL ends in /pubhtml. This is the URL you will paste into the Custom iFrame block.
Paste the /pubhtml link into a browser where you are not logged into Google. If the spreadsheet does not load, it was not published correctly. Repeat the publish step.
Step 2: Install the Plugin and Add the Block
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.
Open your page in the block editor
Go to the page or post where you want the spreadsheet. 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 3: Embed Google Sheet in Gutenberg
Paste the Google Sheet URL
Select the Custom iFrame block. In the Source field in the right panel, paste the /pubhtml URL you copied. The spreadsheet appears inside the block in the editor.
Set the height
Set Height to fit your spreadsheet. Enable Auto Height to resize automatically based on the content.
Step 4: Adjust Settings and Publish
Scroll Bar: Enable the scrollbar to let visitors scroll through wider spreadsheets.
Refresh Interval: Set how often the iframe refreshes. Useful if your spreadsheet data updates frequently.
Smart Load: Turn on lazy loading so the iframe loads only when it enters the viewport.
Click Update or Publish. Your Google Sheet is now live on your WordPress site.
Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the Set Up Custom iFrame in Gutenberg guide for all block options.
This guide showed you how to embed Google Sheet in Gutenberg using the Custom iFrame plugin. From publishing the spreadsheet to pasting the URL and updating the page, the whole setup runs through the block editor without any code.
FAQ
No. Once you publish the sheet to the web, anyone can view it. You do not need an account or API key.
Confirm the URL ends in /pubhtml. Test it in a browser where you are not logged into Google. If it does not load, republish from File > Share > Publish to web.
Yes. Published Google Sheets reflect edits automatically. Updates appear in the embedded version after a short delay.
Yes. When publishing, choose the specific sheet tab from the dropdown in the Publish to web dialog. The generated URL shows only that tab.
Also Available For
Embed Google Sheet in Elementor
Guide for the Elementor widget.
Embed Google Docs in Gutenberg
Embed Google Docs in the block editor.
Related Guides
Last updated today
Built with Documentation.AI