How To Embed An Editable Google Sheet

This article will show you how to set up and embed an editable Google Sheet into a webpage so that other people viewing the page or given the appropriate access can make changes to the sheet from your website.


Step 1: Create and share access

If you haven’t done so already, create your document and set up your desired rows and columns.

For the sheet to be editable on the website page when you embed it, we need to adjust the access settings. Click on the green Share button in the upper right corner.

Embed Google Sheet

In the popup link access, you want to Change to anyone with the link. Make sure in the dropdown in that option the Editor capability is set, instead of Viewer or Commenter.

Embed a Google Sheet


Step 2: Publish and embed the code

Next you’ll want to use the Google Publish to web option to generate an iframe embed code that we can use. Click File > Share > Publish to web.

How to Embed a Google Sheet

In the popup window, select Embed. From here, you have the option to publish the entire document or only one of the tabs.

Embed Google Sheet into website

Next, grab the embed code and paste it into your webpage.

Embed Google Sheet into webpage

This code will embed the document on the page, but it currently will not allow editing, yet. We’ll need to make a few adjustments (below) to finish up the process.

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vS3dp3VY2ULe3XDaBnjsMB77m3Cfxo4YmIkDg0gSJNQhwe2TLlnHp-xBrtPjSXis03KunBOWycNuPUS/pubhtml?widget=true&amp;headers=false"></iframe>


Step 3: Change the code to allow editing

Go back to your document and grab the sharing link (green Share button in the upper right).

The popup where to get the new links for the Google Sheet embed code.
https://docs.google.com/spreadsheets/d/1sdbY_f41eoIXPlW95_OChed7UP_hSUAPlKvPdpjncOg/edit?usp=sharing

Notice this link contains the edit?usp=sharing in the url. Let’s replace what’s currently in the iframe src attribute with this sharing url, but keep everything after the original ? (in this case, we’re leaving the ?widget=true&amp;headers=false ). Our code will look like this once replaced with the copied url/link:

<iframe src="https://docs.google.com/spreadsheets/d/1sdbY_f41eoIXPlW95_OChed7UP_hSUAPlKvPdpjncOg/edit?usp=sharing?widget=true&amp;headers=false"></iframe>

Here’s what it’ll look like so far:

Obviously we may need to make its appearance bigger for it to be useful. Let’s add the width and height attributes with values for better readability.

<iframe width="100%" height="500px" src="https://docs.google.com/spreadsheets/d/1sdbY_f41eoIXPlW95_OChed7UP_hSUAPlKvPdpjncOg/edit?usp=sharing?widget=true&amp;headers=false"></iframe>
What the Embedded Google Sheet looks like when we're done.


You can also:

  1. Hide the editing toolbar: If you want to hide the sheet title and editing toolbar at the top, add rm=minimal&amp; to the end of he URL string.
  2. Show only the first tab in the spreadsheet: If you shared the whole document but decide that you only want to display the first tab, add single=true&amp; to the end of the URL string.


A few things to note

If you have a heavy traffic website, this could pose some risks: the data getting messy, people trying to edit while others are, and loosing information. In that case, you may need to build out a more robust system or use a premium service for allowing and managing table data.


How to make the embedded google sheet editable for only a few people

If you need to make it editable to only a few people ie their emails address, when you’re adjusting the share settings, instead of using Change to anyone with a link, set specific email addresses of those people who will be allowed permission to edit. If they are logged into their Google account when viewing the page you have the embedded code on, they will be able to edit the document.

Posted in

Gina Stricklind

4 Comments

  1. Khalid on August 27, 2023 at 2:15 pm

    Excellent

  2. H. Giridhar Pai on October 15, 2023 at 8:41 am

    You can make interactive webpages with GoogleSheet data within few minutes.

  3. Mauro on December 13, 2023 at 4:29 am

    is there an option, to enable “Collapse and Expand” in pivot table, when embeded?

    • 3moons on January 23, 2024 at 7:59 pm

      Yes, if your document is setup with grouped data, the embed will inherit the ability to collapse and expand the set data groups.

      Showing collapse and expand of grouped data in embeded Google Excel file

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.

pexels-valeriia-miller-3361170

Has an article helped you?

Send us an unexpected surprise 🎉

Need to add reviews to your website?
Check out the plugin used above here
.