How to Embed a Google Sheet Onto a Website

You can embed your Google Sheet onto your website and have the changes that you make in Google Sheet will be automatically update on your website.


image

If you have an existing website made and you want to embed your Google Sheet data onto it, this article will explain how you can do you exactly step by step.

Follow these 4 simple steps:

  1. Install Sheet2Site Add-on
  2. Share Your Google Sheet
  3. Embed a Google Sheet Onto Website
  4. Advanced Table Options

For example, you have a pricing table in a Google Sheet that looks like this:

After you will have a beautiful responsive table that can be embed to your website:

1. Install Sheet2Site Add-on

Sheet2Site is a Google Sheet add-on that was made exactly for this purpose. It will convert your Google Sheet to the website table and keep update it automatically.

2. Share your Google Sheet

  1. Open your Google Sheet that you would like to embed into your website
  2. Install Sheet2Site Add-on
  3. Share your Google Sheet.
  4. Share (top right corner)
  5. Anyone with a link can view

For embedding Sheet2Site will use your first left sheet (tab). If you would like to embed another sheet, simply drag and drop this particular sheet to the left side to make the first.

3. Embed a Google Sheet onto Website

  1. Open Add-ons menu
  2. Sheet2Site
  3. Embed in your website
  4. Copy code snippet
  5. Paste this code snippet into your website's page

Done!

After this step your Google Sheet will be embed into your Website.


4. Advanced Table Options

You can cusomize your Google Sheet with some advanced feature such as images, links, call to action buttons, sorting, filters and search. Here is how you can do it:

Images

If you want to add an image to your Google Sheet and showing it on your website you can just upload the image to any free photo sharing hosting even Google Drive will work. Most important that this link has an image format name, in the end, .jpeg, jpg, png.

Links

To be able to display a clickable link in your table, simply add a link to a particular cell has http, https, or mailto in the start. It will be shown as a clickable link with a highlighted color.

Call to Action Buttons

You can change links to beautiful looking buttons. Just rename your column to a Learn More-Button and a button for each cell of the column.

Hide Columns of your Google Sheet

If you would like to hide some columns you can add -Hide to a particular column that you would like to hide. Might be useful for some calculations. Example of how you need to name a column header: Current Year-Hide

Search

Searching is executing by default throught all cells in the sheet. If the data exist in any cell it will be shown.

Default Sorting

When the user loads the website, the initial sorting of the table is the same as in your Google Sheet. If you will change the sorting in your Google Sheet, the website's table sorting will change as well

Sorting by a speficic column

Each column can be sorted separately when you click on the Table's header. The data type of the column is recognizing by default. Current types that are supported:

  • String
  • Date: 2020-03-21
  • Number: 20000 or 20,000
  • Currency: $100,000
  • Percent: 40%

More Examples

Explore More Table Website Examples that were Made by People using Sheet2Site



Get Started

Let's embed your Google Sheet today!



Need help?

If you need any help about embeding Google Sheet to Wix website please message me in the chat in the right corner and I will be happy to help you.