Embed Google Sheet in Elementor

Step-by-step guide to embed Google Sheet in Elementor using the Custom iFrame WordPress plugin. No API key needed. No coding required.

Overview

Custom iFrame lets you embed Google Sheet in Elementor by pasting a published spreadsheet URL into the widget. 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 Gutenberg instead? Follow the Embed Google Sheet in Gutenberg guide.

Requirements

Custom iFrame plugin installed and active
Elementor installed
A Google Sheet published to the web

Video Tutorial

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 Custom iFrame.

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.

Open your page in Elementor

Go to the page where you want the spreadsheet. Click Edit with Elementor.

Drag the widget onto your page

Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.

Custom iFrame widget being dragged from the Elementor panel into a page section in the editor

Step 3: Embed Google Sheet in Elementor

Paste the Google Sheet URL

In the Content tab, paste the /pubhtml URL into the Source URL field. The spreadsheet appears in the editor.

Custom iFrame widget in Elementor editor showing Google Sheet URL in Source URL field with live Google Sheets spreadsheet preview

Set the height

Set Height to fit your spreadsheet.

Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the Style Custom iFrame guide. Adjust dimensions, backgrounds, borders, and more.

Step 5: Save and Publish

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 fine-tune widget behavior? See the Set Up Custom iFrame in Elementor guide for all widget options.

This guide showed you how to embed Google Sheet in Elementor using the Custom iFrame plugin. From publishing the spreadsheet to pasting the URL and updating the page, the whole setup runs through the Elementor 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 you want from the dropdown in the Publish to web dialog. The generated URL will show only that tab.

Also Available For

Embed Google Sheet in Gutenberg

Guide for the WordPress block editor.

Embed Google Docs in Elementor

Embed Google Docs in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI