With a test spreadsheet and Google’s guide, here is how you can embed specific ranges of a Google sheet:
1. Publish a sheet to the web by going to File – Publish to the web. Click on Embed and grab the iframe embed HTML code. I publish the “Entire Document,” but you can be more specific by clicking on the down arrow next to “Entire Document.” I also let it update automatically. Here’s what it looks like in Google Sheets:
2. Below is what my iframe code looks like after I add and modify the parameters, which are everything that comes after the “pubhtml?” part of the “src” URL. I’m talking about “gid” and “widget” and “headers” and “chrome” and “range.” If a parameter can be turned “on,” set it as “=true” to do so. For off, set to “=false.” The “gid” and “range” parameters take other values, which you can see in the embed code examples.
Note: If you are wondering, that “&” is the HTML entity for an ampersand (&). It connects the different parameters into the single URL. You will need to change the iframe URL and the parameters in the embed code to match your own spreadsheet’s details and preferences. Below you can see the embed code and its corresponding embed result.
Embed example 1 code:
Embed example 1 result:
A note about the “gid” parameter: You see that “gid=0” in the embed code? You get that from the URL of the spreadsheet tab you are actively looking at. Here are two images of the URL of my sheet with the “gid” part highlighted:
Another note about the “range” parameter: You manually specify the range in the “range=” part of the URL. This is the “&range=A1:C26” that you see in the URL of the embed code.
Embed Example 2
Below is an embed of the second sheet within the same test project. To embed this specific sheet, I had to click on its tab within the project to make it active, then inspect the URL that gets loaded. That URL contains the gid number. It’s not something simple or logical like “2” or “1.” In my case, it was 2106886376, as the image above shows. So all you do is change the functioning embed code to reflect that.
Below you can see the embed code and embed result for the 2nd sheet in my project. Again, notice how the gid part of the URL has changed. I also adjusted the width and height of the embed, just to show you what those configurations are doing:
Embed example 2 code:
Embed example 2 result:
That’s it! Add your questions in the comments or email them via this form. Good luck!
Support
If you found this helpful, consider donating through PayPal:
Changelog
Update Sept. 5, 2021: It seems Google has updated their embedding capabilities, making it easier to some degree. This support page lists some useful parameters to toggle using “true” and “false” in the URL of the embed code. The “chrome” toggle is likely very useful to most people. I’ve updated my guide below to reflect those changes.
Update March 30, 2020: The coronavirus disease 2019 (Covid-19) I suspect has greatly increased interest in using remote collaborative tools such as Google Sheets, Docs, and other Suite tools offered by the company (not to mention Slack, Zenkit, FaceTime, and on and on). Given that, I have tried to increase the visibility of this post. Thank you and best of luck making it through this global crisis.
Update April 14, 2014: With the help of a Good Samaritan reaching out to me via email, a solution has been found for embedding specific ranges of the new Google Spreadsheets (they were updated in early 2014) onto your site.
After Google Sheet that is published, and its link is open in Chrome when checking dev console it shows:
Uncaught ReferenceError: posObjs is not defined
at switchToSheet (pubhtml:62:11)
at pubhtml:98:4760
Here is my example:
https://stackoverflow.com/questions/73820996/google-sheet-published-uncaught-referenceerror-posobjs-is-not-defined
and the same error is showing on this your page when looking at Chrome DevTools.
Any idea what could be the cause and how could it be fixed?
Thanks for the question. It seems the variable posObjs has not been defined in one of the Javascript files or Javascript snippets powering up a published Google Sheet. I tested this problem by publishing a very basic spreadsheet to see if there was something distinct about the example sheet on this blog post. The error occurred in that one, too. This tells me this is a problem with the core code powering the publication of Sheets. It is up to Google to fix it. However, it does not seem to cause any problems with actual performance.
Hello,
Even after various trials, I can’t get the same result as you. I want to hide the row and column names, but even with the headers=false attributes in the url, they are still visible. I don’t know anything about code, so I must be doing something wrong.
The result I want to achieve: a display like yours, with no menu or column / row names, just the cells in my document. The difference with your example, I want the file to remain editable (except for the locked cells)
Here is my code:
And this is what I get: https://www.mon-espace.graphiste-et-independant.com/test-ggsheet/
Thanks for your help.
Thanks for the question. You cannot embed a spreadsheet and have it be editable as an embedded spreadsheet. Embedded spreadsheets can *only* be displayed and viewed. If people want to edit your sheet, they have to have permission and go to it within the Google Sheets online software interface. I looked at your embed code and it is different than mine — namely, it does not seem to be using that initial embed code that Google Sheets will provide if you publish the sheet and grab the embed code. So instead of “…./d/1RuDCJovGkaP7hlHRrgjye6fRSBsQnXZ6JkBT_hmqXUk/edit?….” it should read something like “…./d/1RuDCJovGkaP7hlHRrgjye6fRSBsQnXZ6JkBT_hmqXUk/pubhtml?…..” See that part at the end? Yours reads “edit?” and mine reads “pubhtml?”.
Thank you for your reply,
I have tried so many different things! Obviously my integration “works” as editable, right? The only problem seems to be the presence of row and column names, which I can’t hide.
Indeed, the code is different on this part.
With “pubhtml” the presentation is good (column and row names are hidden) but the file is not editable, while with “edit” it’s the opposite, the file is editable as I want it, but the presentation is not ok since the row and column names are visible… too bad!
On this page I did both tests: https://www.mon-espace.graphiste-et-independant.com/test-ggsheet/
Ah, that’s new to me — never realized you could embed an editable Google Sheet (and I never wanted to, being worried about access and not having a use case for it; I just used forms to get data from outside sources). Thanks for the lesson! Re getting rid of those row and column names: No idea! I tried playing with the parameters in random and non-logical ways, and got no results. These resources did not help: https://webapps.stackexchange.com/questions/130654/all-google-docs-url-parameters-functions-commands and https://obstruction.tumblr.com/post/60784440737/google-docs-url-parameters-rm-minimal-rm-full
:-D Thanks anyway
I think I’m going to go with this solution of getting the data via a form, it’s true that it’s more secure too!
Thank you very much for the time you spent answering me, it allowed me to evolve my thinking!
You bet! Hope the forms do what you need and good luck with your project.
Thank you so much!!
You’re welcome :-)
Hi there
do you know how to make a certain column completely editable (so a user can put in whatever they want) but for the additional columns on a sheet they have to pick from a drop down list, and then protect certain cells so they cannot be edited by a random user?
I am trying to create an embedded data base where random users can go on and add in their companies, but have to pick a specific sector/type they fall into and not just mess with the original entries.
thank you!!
Hi Ben – Thanks for the question. I don’t know of any way to make Google Sheets function the way you want. It definitely won’t work if you want to embed them; when you embed a Google Sheet, it only works as a display of the sheet information, not a way to edit it. What I would recommend instead is to use Google Forms. You can connect a Google Form to a Google Sheet, which will capture the data, and you can have strict control over the form, designing as you like what people can input for each element. For example, for an entry on one column, you could have free-form text. Another entry could be a list of options you specify in Google Forms. And then these answers will flow into the connected Google Sheet.
Thank you for sharing,
I am working on trying to publish specific Google Sheets cells to a confluence page and it worked! I was wondering if it possible to pass through a cell drop-down from Google Sheets and have it usable on the web page?
Fred, thanks for your question. The sheet is *not* interactive when embedded. It can only be displayed. However, I tested it again to be sure. I adjusted cell C3 to make it a dropdown choice (using the data validation tool in Google Sheets, which is super useful for doing a lot more with a spreadsheet) rather than simple text value. The embedded sheet on this page has updated, and I can see it now reflects the dropdown value I chose. However, as I guessed, you cannot manipulate the sheet in this embedded format. Perhaps Airtable would be better for your purposes? It’s quite cool!
Hi Tumo,
Here is my issue and I’m hoping someone may be able to help me please.
I have successfully used the code to choose a specific range to display a google sheet but the problem is that my google sheet has three tabs on the bottom and I’m displaying the sheet as a TSV (Tab Separated Values Page) but my range for the second and third tabs are different from the first one so how do I put into html the cell range for the second and third tabs of the sheet so that they’re not displaying the cells that I hid on the first tab?
This the current html I have: following the link to the file:
Hi Robin,
To protect your Google Sheet, I am not going to publish the full HTML you shared, but the most relevant part is this: “gid=1189236772&range=A10:AL263.” I might be repeating myself, but here goes: You can only display one tab of one Google Sheet within a single embed. So if you want to embed, for example, the second tab of a sheet with a specific range of cells within it, then you would just adjust the “gid” number in the embed URL (like “gid=1189236772” in your embed code) and the “range” in the embed URL to be whatever you want (like “A10:AL263” as I see in the HTML you sent). The cells from your first tab should *not* show up anywhere if you have specified the tab correctly (via “gid”) and the cell range you want. Hope that helps. Good luck!
Hello,
I’m not sure where to ask this so I am asking here. I am trying to embed a google sheet while preserving the frozen rows at the top of the page. Is there a way to do this? The rows freeze just fine until I try to embed then these are lost!
Hi Pete – thanks for your question. I was able to freeze rows in my example, but you can see it has no effect when scrolling. The embed is treating scrolling as a way to interact with the entire sheet itself, not interact within the sheet. I’m not sure if you can get that level of interactivity with an embedded sheet.
Hi I have the same issue, my first row have the column names, and I show dinamicaly some rows base on input data ex: range= A5:C10 but I want to show the first row with the column names too.
I tried to set range like “A1:C1,A5:C10” but without luck.
I dont care about the scrolling.
Thanks
Adrian.
Hi Adrian – Thanks for the question. As far as I can tell, you must pick a single continuous array of rows and columns. So you cannot designate two independent sections of a spreadsheet to appear. You can do “A1:C1” or “A5:C10” but you cannot do both, as you tried to do with “A1:C1,A5:C:10.” The best solution I can imagine is doing two separate embeds of the same spreadsheet, with each embed presenting the section you wanted.
Good Day Tumo,
I am having a bit of an issue with embedding a select area of cells in a google sheet and would be forever grateful for some help please.
I have the document published from google drive already and this is the code i have tried to use.
I’m using the Embedpress plugin on a wordpress site to display the embed code but unfortunately I just get an frame with an error in it.
Hi Robin,
Thanks for the question. The embed code you shared was stripped out by the comment system (which is expected security behavior), so I cannot look at it directly. I would suggest not using the Embedpress plugin. Just edit the raw HTML of the post or page you are trying to update, and paste in your Google Sheet embed code directly. Hope that helps!
Hi, will this update immediately or will it take approximately 5 mins to update like a regular embed? I was able to set it up but it is not updating as quickly as an editable embedded sheet.
Thank you for the guide!
Kevin, thanks for the question. I’m not sure. What have you observed? I suspect there will be some delay (most embeds I’ve used do indeed have a non-trivial lag in the way of updates). But let me know what you see after checking on your own tests. Thanks again.
did we find out a way to hide that header in the new sheets? I cant seem to find anything.
Thanks for your question. I believe the header is actually hidden in the examples I provide. Do you see the “headers=false” element of the embed code? Or am I misunderstanding your question?
Hi,
I keep getting this error when trying to save your version of the code….
TypeError: The reference to entity “gid” must end with the ‘;’ delimiter. (line 2, file “Code”)
My code looks like this…
https://docs.google.com/a/atomsupplies.com/spreadsheets/d/MYSHEETCODE/pubhtml/sheet?headers=false&gid=1333836645&range=B3:I8
Any ideas what might be causing this?
Hello, and thanks for writing. You’re not using an iframe with your code (you are using a regular “a href” tag, which is wrong). There might be some other oddities in it. Try using this embed code:
<iframe src="https://docs.google.com/a/atomsupplies.com/spreadsheets/d/YOUR-SHEET-CODE/pubhtml/sheet?headers=false&gid=1333836645&range=B3:I8" width="300" height="350"></iframe>
Great job, this trick really work in any kind of website. However, it does not work in a new Google Site. Do you know how?
Thanks for writing. Well, it looks like the new Google Sites does not allow you to edit the HTML. Without that feature, you can’t use my embed trick. However, the new Google Sites does indeed make it easy to add an entire Google spreadsheet. How to use it? In Sites, check out the right column, and at the top make sure you have “Insert” selected. Then scroll to the bottom of the same right column. There you will see an option to insert a Google spreadsheet. It’s pretty rudimentary; you can’t select a cell range, so if you want to embed very specific pieces, you may need to make a custom spreadsheet just for that.
Thanks for helping, I’ll have to do some workaround for this.
I am not sure whether this has been covered in the comments but I’ll ask anyway. I have a google spreadsheet that is just a fun “football tipping” competition. I have just run it with made up players but I would like buttons on a website to display sections of this main spreadsheet to show current progress etc where players can go to site and tap on a button to show what they wish to see. I probably haven’t explained things too well but to have on a web page buttons that will direct a participant to the section they wish to view would be great(Like leaderboard). If anyone could explain to me in simple terms that’d be great.
It looks like my previous reply was lost. In short, yes, you should be able to embed as many iterations of your spreadsheet as you like, and you can make each embed different by choosing a different range of cells to display. To then display each of those via a button: Well, this is a web design question. You could use anchor links on a single page to autoscroll down to a particular embed of your spreadsheet (a list of links up top to the various subsections, then all the subsections are embedded below that). You could also do a popup, though I don’t recommend that, since it’s a poor user experience, and you need to think how it plays on mobile devices. Hope that helps.
Thanks mate! you’re code above really helps me a lot.
You’re welcome. Glad it helped.
Hi, would you mind uploading the images again, they are not coming through so I can’t see how to amend the code :( Many thanks in advance!
Hi Jerry – This is fixed; I had disabled a plugin that facilitated presenting code, and it knocked out the explanatory text. Hope you get what you need.
Hello,
I am trying to achieve what Heather asked further up these comments: Show column headers in cell A2:K2 and then define the actual data to display in A5:K5 for person A. A different person would have the same headers (A2:K2) but the code should reference e.g. A10:K10.
Possible? I cant work it out in HTML and Google has let me down!
I’m sorry but I know of no way to do what you ask. The best I’ve gotten is just a straight-forward display of columns and rows.
Thanks! Just what I needed.
This is very helpful, thanks!
Is there a way to make the range pull from 2 different areas of the spreadsheet (ie. from the top two header rows, and then a different range of rows)?
Example: I want to display A3:AO4 and A11:AO11 together (kind of like hiding rows when you are looking at them in sheets).
Not that I know of. Sorry.
Awesome. Thanks!!!
I don’t know where else to ask, so I am asking here… With the old Google Spreadsheets we had an option to publish part of a spreadsheet as in RSS format. Is there a workaround for this in the new ones?
Thanks in advance.
Not sure what you’re looking for. Do you mean to use Google Spreadsheets as an RSS reader? Someone wrote about that here ==> http://www.makeuseof.com/tag/create-an-rss-feed-reader-google-spreadsheet/
Or did you mean embedding part of a sheet on a page, and using that sheetpart as a way to display an RSS feed? Hmmmmm. Sounds like a fun trick. I don’t know off the top of my head, but I imagine the RSS technique described by makeuseof.com could be worked into some sort of working shape.
Up until the previous version of Google Spreadsheets, when you published on the web, you had three choices with what went published:
a. specific sheet
b. a specific range of cells
c. the output format. HTML was the default, but alternatively you could choose atom/rss, csv, pdf, etc.
With atom/rss I used to be able to export an RSS feed with content taken from a specific range on a sheet. For instance, I could keep the number of people who completed a form on a cell and export this number as a live feed.
This is not there in the new Google Spreadsheets; or has been removed from the UI.
Thanks for this, I’m trying to do this but also making the spreadsheet interactive so people can enter data in one of the cells – is this possible?
A good question, Marian. I’m not sure but I do not think it’s possible to embed the spreadsheets and have them behave interactively; all the data modification I’m guessing has to take place in Google Sheets itself. If you’re looking for a way for people to submit data, then Google provides forms to do that at https://docs.google.com/forms/
Thanks very much for this. You’ve filled one of the big gaps in the new sheets.
Have you found a way to remove the header containing the file name and sheet name from appearing at the top of the iframe? That’s my one remaining issue with the new sheets.
Hi, Colin. You’re welcome. Glad it helped. I believe that as long as you include the bit I’ve indicated in the tutorial that reads … sheet?headers=false …. that you will remove the headers. It seems to work in the example I’ve embedded in this post.
The “New” Google Sheets has removed the cell range input window from the “Publish to Web” input window. Do you know how to input the desired cell range into the html code manually? Thanks.
Heyah – I’ve updated the post to address your question. There is a way to update the HTML manually. Google isn’t making this easy. All the steps are the same in terms of preparing content for embedding, but the embed Spreadsheets provides is different. You’ll need to adjust it as I explain in the update to this blog post. Happy spreadsheetin’!
Thanks Amedeo. I tried your recommended method in New Google Sheets but it seems to ignore my reference to the name range. Also, I still haven’t found a way to remove the ‘file name/sheet name’ header that comes over. I think changing ‘widget=true’ to ‘widget=false’ took care of it in Old Google Spreadsheets, but changing this in New Google Sheets doesn’t seem to make a difference.
You’re right. I thought my alteration worked; it doesn’t. I tried many different versions of the embed code after learning this. All failed.
I’ve got this working now. (Someone reached out to me via email and explained the process.)
Great! Would you mind sharing the details of the process from the email? Thanks!
(The process is outlined at the top of this blog post. Cheers!)
Thank you very much Amedeo!
Thanks! Exactly what I was looking for!
You’re welcome. Happy to hear this how-to helped with your problem.