SiteManager
2022/02/09 16:19:23

How to Embed Google Sheets into Your Website

Alexander Hoogewijs

Having updated information on your website is one of the most effective ways to attract and keep visitors. Embedding Google sheets on your website ensures the data on your website is up to date even with constant changes.

When you embed a live spreadsheet in your website, any time the information on the spreadsheet changes, it automatically updates your website. This allows you to communicate real-time information to your visitors.

This capability is invaluable in many instances due to the formatting flexibility. For example, you can embed a holiday calendar or an appointment calendar on your website or blog to keep your readers updated on upcoming events.

You can also embed a spreadsheet onto an internal or external website. A great example is updating company statistics on a spreadsheet in Google Sheets. This new information automatically updates your internal website so that everyone has access to the statistics.

Regardless of your industry or line of business, embedding Google Sheets is an excellent solution for passing live information.

How Does Embedding Google Sheets Work Exactly?

Embedding a Google Sheet on your website requires the proper formatting. Some of the considerations you should make are:

  • Ensure the first row only has column names
  • You can bold or format text as it will appear on your website
  • Ensure all the data you’d like on display is one tab
  • Maintain the Spreadsheet at a manageable size

If there are any formatting issues, they will show after embedding the Google Sheet on your website. You can avoid these issues and save the time you'll use with trial-and-error by pre-planning and structuring the Spreadsheet to blend with your website.

Should you decide to use a Google Sheet template, it’s essential to ensure you delete the top row so that the headers you select always appear on the first row.

Before you finish, format and size the Sheet the exact way you want it to appear on the website.

Although you can publish the whole Spreadsheet, remember that it will have tabs on your website, making it difficult for your visitors to navigate. It's best to embed a single sheet from one tab, so ensure that all the information you'd like to include on your website is there.

What Is Publishing to the Web All About?

Embedding a Google Sheet on your website using the “Publish to the web” option located within Google Spreadsheets is the simplest method.

You can successfully do so using these simple steps:

  1. After correctly formatting your Google Sheet, select the tab written “File” at the top menu, then opt for “Publish to the Web.”
  2. Go to the next window and choose the drop-down you'll find under "Link", then select the tab with the data you'd like embedded on your website and click on the “Embed” tab.
  3. Next, go to the drop-down menu under "Embed" and confirm that your website is the default selection on the list.
  4. Click on the “Entire Document” from the drop-down menu, select whether to embed the whole file or one Sheet and then choose the "Publish" button.
  5. A confirmation window will pop up, where you select "Ok". You'll notice that the options on the publishing window will be different, so choose the "Embed" option again. You'll then highlight and press “Ctrl + C” on your keyboard to copy the embed code you’ll see on the window.
  6. At this point, you can now paste the code into the website and complete the embedding process.

Once you publish the page, the Sheet will be visible, but it won't be possible to edit it. To enable real-time editing, you will:

  • Return to the Spreadsheet in Google Sheets, then select the "Share" option
  • From the pop-up menu, select "Advanced".
  • Next, go to the option "Who has access", select the "Change" link and click on "Anyone with link".
  • At the bottom, you will see a pop-up of “Who has access”. From the drop-down, Change “Can view” to “Can edit” and save the changes.
  • A "Sharing settings" option will pop up; you can copy the link you'll share and close the window.

How to Embed a Live Google Docs Spreadsheet into Your Website

Let's use an example where you need to share a set of data in a Google Spreadsheet or an Excel document on your website. Using these simple steps, you'll manage to do so in a few minutes.

  • First, you need to open the Google Spreadsheet or import the Excel file.
  • Select the tab "File" and click on "Publish to the web."
  • Select “Automatically republish when changes are made."
  • You’ll see the option to "Start Publishing". Next, on the option to “Get a link to the published data”, change it from “Web page” to “HTML."
  • Finally, Copy the HTML code starting in "iframe" and paste it in the space labelled HTML-enabled on the webpage.

Once you finish these steps, any time you change the details on the Google Spreadsheet, they will update the table on your website. You can now change the "iframe" code numbers to adjust the frame border, height, and width.

The Best Platform to Use When Embedding Google Sheets to Your Website

Successfully embedding Google Sheets is simple, but once all the information is up to date, you may find it challenging to include data from other sources besides the Sheet.

Multiple platforms can assist you with the embedding process. However, most of them only focus on Google Sheet integration as the core product, which is only a partial solution.

The easiest solution is using the Spreadsheet as the primary content source through closed-loop integration. A fantastic example is how SiteManager is a comprehensive solution that provides this capability and features:

  • Spreadsheet automation eliminates the need for manual spreadsheet updates
  • Auto-update directory automatically updates the details on every form submission on the online directory.
  • Centralized data source so there’s no need for another identical data source

Conclusion

What gives SiteManager an edge over competitors is that Google Sheet integration is just one feature rather than the entire product. The unique no-code design tool is compatible with Google Sheets to provide you access to a complete Google Sheets snippets’ library.

Try SiteManager today for free and discover how to quickly design and build websites using accurate content, edit website functionality settings using various tools, and change the style with real-time visual feedback.

Start building today

Streamline your creative process and keep your team aligned with our collaboration tool.

Design amazing digital experiences
that make people feel happier.

© 2024 SiteManager. All rights reserved.