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.

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.

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

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:

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.

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.