How to Embed a Google Sheet to Webflow

If you have a Webflow website and you want to display a Google Sheet there, this article will help you to do it.

Follow these steps:

1. Share Your Google Sheet
2. Created a Code Snippet
3. Paste the Code Snippet to a Webflow Page
4. Final Result of Google Sheet in a Webflow

Google Sheet Example:

For example, you have a pricing table in a Google Sheet that that you would like to embed.

This sheet might look like this:

How it will look in Webflow:

After you will have a beautiful responsive table that will be displayed on your Webflow website:

1. Share your Google Sheet

Open your Google Sheet that you would like to embed to your website

1. Click on the Share button in the top right corner

2. Choose Anyone with a link
3. Done

By default will be used your first left sheet (tab). If you would like to add another sheet, simply drag and drop this particular sheet to the left side to make the first one.

2. Created a code snippet

3. Paste the code snippet to a Webflow page

With Webflow website builder you can Embed a custom code. This feature is available in Webflow paid plans including the cheapest plan. Here is how you can embed a Google Sheet to the Webflow page:

Here is how you can embed a Google Sheeet to Webflow page:

1. Open the Webflow website.

2. Choose a page what you where you want to add a Google Sheet.

3. Open an elements panel on the left and drag and Drop a container element. This element will be a place for embedding our Google Sheet

4. Open an elements panel again, select an Embed element which is located under a Components section:

4. Drag and drop this Embed element to your container that you added in a previous step:

5. Change the width to full screen by scrolling the Width in the Appearance panel on the right. The height will be automatically adjusted based on your Sheet height.

You should see that embed element will appear on the published/exported website:

6. Click on edit this embed element. A code editor should opened:

7. Paste there a code snippet that you created before and click Save and Close.

8. Click on the Setting in the top left corner with a gear icon. And press Publish Selected Domains

If you did everything correctly the embed Google Sheet should be displayed on your Webflow website

4. Final Result of Google Sheet in a Webflow

You should see a Google Sheet table on the Webflow page. Your Webflow page elements like a navigation bar, a logo, a footer, etc. will stay the same, only inside the page, you will see a table like this: