How to Embed Editable Google Sheets in Website

Have you ever wanted to share an editable Google sheet on your website so that you can easily collaborate with other people? Maybe you want to share your historical stock price calculator or another editable sheet that can be cleared and reused multiple times?

This is great for people who want to easy find the spreadsheet they need to collaborate on without losing them in their files on Google Drive.

Knowing how to embed editable Google Sheets in website is great for people who have a password-protected area of their site where only certain users can access the pages. An example of this might be an Employee only area, members-only area, and so forth.

Before we get started on the how-to instructions, lets take a look of an example.

Step 1: Publish to the web

First we need to make the spreadsheet eligible to publish on a website. For this you will click File and then click on Publish to the web near the bottom.

The pop-up box that pulls up, you’ll first want to click on Embed. Then you can decide if you want to publish all tabs from the Entire Document or only on of the tabs from the spreadsheet.

Next, you’ll click the green Publish button. Once you do that, your browser will pop up a box that says “Are you sure you want to publish this selection?” Click the blue Ok button to continue.

Now you’ll have the html code that you need to put on your website!

Step 2: Make the sheet editable

Now that you’ve published the spreadsheet to the web, you can embed it on your website but it won’t be editable. Here is what you need to do to make your spreadsheet editable and embed it on your live website.

The first thing you need to do is click the green Share button in the upper right. From here you will click on Change to anyone with the link at the bottom of the pop up screen.

Next, you need to change the dropdown that defaults to Viewer and make it Editor. This allows anyone to edit the spreadsheet from your website page.

Once you’ve changed it to Editor, you can click Copy link to get the link we need to paste in the code above.

Step 3: Edit the Publish to the Web Embed Code

Here is the code that we got from going through Step 1 above. Replace the RED section below with the URL that we copied in Step 2.

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

Your code should now look like this:

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

Now that we’ve changed the link, you’re going to see something that looks like this:

Not too appealing right? So let’s make some more adjustments to the code so that it looks cleaner and more professional.

Here is a list of changes you can make and what each change accomplishes.

Before adding any of these customizations, make sure you add & to the end of sharing? in the URL.

Center the spreadsheet on the page. Add <center> to the beginning of your code and </center> to the end of your code.
Change height and width. After the <iframe you can add width=”500″ height=”500″. You can set your own width and height (or use percentages instead).
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.
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.

<center><iframe width="500" height="500" src="https://docs.google.com/spreadsheets/d/1jPY6VK7XA-EWElvT1pKtoc7Bm5hAXVFPR6zkPtMVqvw/edit?usp=sharing?&amp;rm=minimal&amp;single=true&amp;"></iframe></center>