How to embed a live Google Docs spreadsheet into a webpage

Let’s say you have a set of data in an Excel document or Google spreadsheet* and you want to share it with the public by posting it on your webpage. You no longer have to create a static HTML table; in fact, Google allows for embedding a table on a webpage that is updated as the original Google Doc is updated. The way to do it is by creating what is called a “live” spreadsheet.

The process is very simple and the results will definitely save you a lot of time.

  • First, import your Excel file in Google Docs or open your Google spreadsheet;
  • File > Publish to the Web…;
  • Check the box that says “Automatically republish when changes are made”;
  • Click “Start Publishing”;
  • Change “Get a link to the published data” from “Web page” to “HTML to embed in a page”;
  • Copy and paste the HTML code generated (should start in “<iframe”) in an HTML-enabled space on your webpage.

At this point, you would just need to make changes on your Google spreadsheet to see the table on your website edited as well. In my testing, the automatic update always worked flawlessly; however, if that does not happen:

  • Open your Google Doc;
  • File > Publish to the Web… > Republish now.
  • Magic! You should see the table data updated on your website.

This is how the embedded spreadsheet will appear on your webpage.

You can now adjust width, height and frameborder by changing the values in the <iframe> code in HTML mode.

Linking to the original Google Doc

Now, what if you also want users to be able to access your original table?

The way to do this is also very easy and I found it here (theBioBucket).

In your webpage, in HTML mode, write a code using the standard HTML notation to create a link <a href=”URL”> YOUR TEXT HERE </a>
The URL you will have to plug in is your Google doc one, found under “Share…”:

Click “Share…” under “File”

Grab the URL circled and paste it in the HTML code.

Once you’ve done that, you can simply write something like “Click here to access the Google document for this table” in the YOUR TEXT HERE space, and… all done!

A Google account is not necessary to view the original Google Doc. Any user on the web can access the original Google spreadsheet in view-only mode. They won’t be allowed to alter the original table in any way, but they will have access to a spreadsheet downloadable in different formats  (e.g. .pdf, .csv, .txt). To download, simply click File > Download as… and save the document on your computer in all the formats available in Google Docs.

* Note: This method works with every format available in Google Docs but this post focuses on spreadsheets.

32 thoughts on “How to embed a live Google Docs spreadsheet into a webpage

  1. This worked out so well on my website. I noticed that the “Automatic update” takes quite a long time so one would have to manually republish each time an edit has been made. Thanks a bunch

  2. I tried embedding one into my free video website as well. It was extremely frustrating that the published spreadsheets did not automatically update, so thanks so much for this tip!!

    • + All the edits you make to your spreadsheet are instantaneously saved by Google Drive.

      + Once you edit your spreadsheet from your Google Drive it automatically updates on any webpage that you shared it on, as long as the option File>Publish to the web…>Automatically republish when changes are made is checked.

      + When you create a spreadsheet you are the owner and you are the one that has the ability to determine who can do what with your spreadsheet. To access these options go on your spreadsheet page in Google Drive and if you look on the top right you will see a button that says “Share”. You’ll see yourself as the owner, and above it you will see either “Private”, “Anyone with the link” or “Public on the web”. Whichever one of these options you choose, you can determine they’re benefits:
      – “Can edit” means they can access the spreadsheet and modify it however they want
      – “Can comment” means they can add notes on the side or over the document but CANNOT edit the spreadsheet’s content and structure
      – “Can view” means they can only visualize the spreadsheet in read-only mode.

      Also, in the same window you can add authors by email, for who you can determine the same benefits explained above.

      Hope this helps, please don’t hesitate commenting if you need more help!

      Sara

      • Is there any way to collect/grab and publish dynamic data through Spreadsheet ? Excel sheet can grab dynamic data but when it import on spreadsheet it made a static page and can’t update as Excel sheet does………..
        So, Is there anybody who can help me out how to grab dynamic data from any webpage/aspx page and then reproduce any other blog through iframe or html code ?
        Thanks in advance

  3. Thanks for this excellent post. I successfully managed to post my Google Drive spreadsheet onto my website … but I want to freeze frames! This works on Google but not on the website. Is there a way to do this??
    Many thanks
    Maurice

    • It might have to do with the browser you are using. I remember that Google Chrome for some reason did not load my Google Docs (kind of a paradox, right?). If you have an iPhone try downloading different browsers, but I’m not entirely sure what the cause of the problem should be.

      Sara C

  4. Hay guys, First of all, do you have any idea as to how some dynamic data can be imported in a google doc/spreadsheet from Excel worksheet ? Is there any ways to copy and embed some portion of dynamic data from aspx webpage and paste/make an iframe in another blog (without server/local host) ?

  5. I am building spreadsheet for each of my players so they can see there progress but do not want the world to see the spreadsheet just the parents. Is there a way to place a link up on a web page that will open the spreadsheet but only for a private person?

    • Hi William,

      You can hit “Share…” and under “Who has access” you should select (by clicking “Change…” on the right) “Shared with specific people”. Then you can put all the emails of the parents in the “Invite people:” box. Then all you have to do is copy the link in the “Link to share…” box and paste it on your web page. The people who click this link will be asked to log in. If a student logs in they won’t be able to see the page. Only the google accounts whose emails you inserted in the “Share…” options of your document will be able to access the document.

      Only con about this is that if the parents don’t have a gmail account it won’t work.

      The other option you have is:
      Hit “Share…” and under “Who has access” you should select (by clicking “Change…” on the right) “Anyone with the link”. You’d then have to email the link to the parents so that they could see it, but if you post it on the webpage everyone on the web who visits the page could see the spreadsheet by clicking the link.

      Please don’t hesitate to ask if you have more questions.

      Best,

      Sara C

  6. HI,
    I used Google docs api to embed excel sheet into my application but i am unable to view whole excel sheet. Can you please tell me the way how can see whole excel sheet or I can provide scrolling to it.

  7. I love this! What if you want to just import the data instead of the whole table, though? I want my CSS to be in control of how it looks, but what the data to be coming from the Google Sheet.

  8. Thanks for this. I was having the same problem. I want to do product tests but have them in a table form because I will be comparing products. I have been struggling with this for a lil bit.

    I will try the tips above now and see how it goes.

    Anyone who knows how to put pictures side by side/next to each other instead of below one another on a webpage or post?

    A reply would be highly appreciated.

  9. Hello,
    I tried to embed a google sheet to my site. It looked great…until I tried it under a friends PC…no table was showing up…as you’ll probably see by clicking here: http://www.freudrealty.com/blog/2015/9/Miami's-Pre-Construction-Latest-Inventory:-Availabilities-and-Pricing.htm

    How do you share/embed a google sheet and make it visible to anyone, not jsut those who have been authorized, or those who have a specific email root, in my case @freudrealy.com.

    If’ it isn’t possible, do you know of another platform where I could host a spreadsheet which I’ll use to embed into my website?

    Thanks a lot for your help

    Michael

  10. I have embedded a live google sheet onto my website. Issue is that active hyperlinks in the sheet are inactive when they appear on the website (just the text, no URL). Is there a way to fix this?

  11. If you replace the /pub?embedded=true with /edit in the embed, you can edit within the embedded page. Beware sharing permissions though!

  12. Hi, Thank you for this information. I have been trying to find a way to embed a Google doc (not spreadsheet) into my site which will work except for the formatting g changes for some things, the page dividers go away, and hyperlinks in the table of contents etc won’t work. Can this be corrected somehow? I great appreciate any feedback or ideas.

    Thanks
    Mary
    Mecannon@gmail.com

  13. I have embedded a live Google sheet on my group’s website. The sheet acts as the group event calendar and since it’s live, members can enter their names as hosts or co-hosts for available events. The sheet works well from PCs and Apple computers using any browser, but it does not take input from phones or tablets, whether Apple or Android. Can anyone (1) explain this difference, and (2) much more important, suggest a fix. Thanks much!

    • One workaround is for folks on mobile devices is to use the Sheets app. Provide them a link to the document (in addition to the embed) and I think it should prompt them to install the app and/or open it directly.

Leave a Reply to Maurice Gleeson Cancel reply

Your email address will not be published. Required fields are marked *