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.

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.

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.

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

Next, grab the embed code and paste it into your 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.

If your goal is in fact to simply display the sheet without allowing anyone to edit, then you don’t need to proceed with the steps below. Just copy that code and place within your website. You may need to adjust the width and height (described below) but this code will achieve simply a viewing state from within your webpage.

<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). You’ll notice these URLs are different. The above contains /d/e/ and the one below contains /d/

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&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>

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& 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& 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.

An important note: while this can be done, I don’t see it being very useful, unless the editing capabilities are restricted. I.E., while one person edits, the file moves and edits which can impede someone else’s edits. A more robust Content Management System may need to be built out to provide a solution for what you’re trying to achieve. Feel free to reach us for a free consultation and we can help you explore some solutions.

Some Common Errors

Google Sheets Embed: File Does Not Exist

1. You likely have copied the wrong URL. Be sure to grab the share URL from the share option described above.
   Your URL in your iframe code should contain only /d/ and not /d/e/.
   https://docs.google.com/spreadsheets/d/1sdbY_f41eoIXPlW95_OChed7UP_hSUAPlKvPdpjncOg/edit?usp=sharing
2. Check that you still have the proper ” ” in places.