How to Embed Google Sheet to Wix website

In this article, we'll show you how to embed your Google Sheet into your Wix website


  1. Introduction
  2. Getting Started
  3. Import Data From Data Source Sheet
  4. Embed Google Sheet Into Your Wix Website
  5. Another Way to Embed Google Sheet Into Wix
  6. Match Background Colors of Wix Site and Embed Site
  7. Final Result

1. Introduction

If you have an existing website made in Wix you probably want to embed your Google Sheet data to one of the pages.

For example you have an inventory list in a Google Sheet:

inventory.jpg

And you want to embed to your Wix site:

final.jpg

You can manage the data in your data source sheet and it will be updated automatically on the website.

2. Getting started

Once you will install the add-on you need to select a template: Table

template2.jpg

Hide unnecessary elements

You can hide all unnecessary elements in the Layout tab, because your website already has a header, a navbar, a footer etc.

hide2.jpg


3. Import Data from Data Source Sheet

If you don't have a data source sheet you can skip this step and add your data directly to Sheet2Site sheet, Cards tab.

If you have already a datasource sheet with all, there are 2 things that you can do:

  1. If you want to manage everything from your datasoure sheet you can import your data to the sheet2site sheet using import formula (see below). It will auto update the data on your website one you make any change in your data source sheet. This step might be useful if you are feeding your data source sheet from different sources.

  2. If you don't care, you can just copy all of your data to Sheet2Site sheet, Cards tab and manage everything from there.

importrange2.jpg

Open Cards tab and put cursor on A2. Import data from your data source sheet using ImportRange formula:

=IMPORTRANGE("https://docs.google.com/spreadsheets/d/1dDnNRlqZex4z1FJMPNu1Z6YViHkBeG5mzfm3SCEKSrQ/edit?ts=5e3dbd7f#gid=149855706","Active Inventory!A:Z")

First time it will request access. Press Allow Access:

access.png


4. Embed Google Sheet into your Wix website

Let's create a new Wix page:

Go to Menu & Pages. Site Menu. Add Page. Let's call it Inventory.

createpage.jpg

And press publish the page:

publish.jpg


Embed code snippet

This method requires 2 things:

  1. You must purchase 1 of Wix Plans that supports Analytics & Tracking.
  2. You must already connect your Wix website to a custom domain.

If you done all of above please do the following actions:

Go to:

  1. Settings -> Tracking & Analytics

trackingandaanatytics.jpg

  1. New Tool -> Custom

emmeedtrackigntoolcustom.jpg

  1. Get a embed Sheet2Site code snippet. In Sheet2Site Google Sheet go to: Menu Add-ons -> Sheet2Site -> Embed in your website

addonembed.png

  1. Paste the code snippet here. Sheet2Site code snippet should looks like this:

embedcustomcode.jpg

  1. Choose specific page -> Inventory

embedchoosespecificpage.jpg

  1. Place code in: Body Start

embedbodystart.jpg

  1. Apply. You should see something like this:

embedfinal.jpg


5. Another way to embed Google Sheet into Wix

The problem with the you are required to have a Wix plan that has Analytics & Tracking feature. And that's not the cheapest one. Also it's required to connect a custom domain.

If for any reason you can't follow this two requirements there is an alternative way to embed your Google Sheet into your Wix website. The only different is that you will need adjust the height manually:

Instead of step 4 follow this steps:

  1. Add -> More -> Custom Embeds -> Embed a Site

addmore.jpg

  1. Website address. Address should looks like this: https://sheet2site.com/api/v3/index.php?key=1pafwTXUxqSbVpO0bjjwjiGCxyokUK_Je6JLqEjaW8ls

embedsite.jpg

  1. Stretch embed site to maximum width and height:

stretch.jpg


6. Match background colors of Wix site and embed site

We want to make out embed site as native as possible. First thing that indentifing that our site is embed is a background color. Our Wix website have a white background, but our embed site have a gray background. Let's fix it.

  1. Open your Sheet2Site Google Sheet
  2. Advanced tab
  3. Custom Javascript and add this code snippet:

bgcolor.jpg

It will change the default background color of the embed website to white.


7. Final Result

If you have done everything correctly you will see perfect, clean, embed sheet in your Wix website:

final.jpg


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.