How can I properly embed Google Sheets into a webpage?

Shopify Discussion
1

Hello,

I’m trying to embed a Google Sheet with on of my Shopify Pages, but the outcome looks horrible.

Please see example here: https://r2qz5ifjvtjyzvba-50834112675.shopifypreview.com/pages?preview_key=ad1acd81e626d0bd72bb843a5e65479c

How can I change the width and hight of the “viewable” area, if that makes any sense?

HTML CODE:

Many Thanks,

London Disc Golf Community

www.DiscGolf.London

2

Hi @LondonDGC ,

The first step is to have the following code added instead of only the embed code:


    <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT74XpLlBXF1XIF0yb2jdPcofLUcQlVkBPumd9LwAm0eWuLEAGuEf0jT9V_GrZdFEwu44dWFRehSd5L/pubhtml?gid=2061148536&single=true&widget=true&headers=false"></iframe>

This would fit the Iframe to the page’s container.

Let us know how it works out for you!

3

Hi K&J

Thank you very much, that solved most of the issue, there’s still some minor bits still not fully functional.

Updated Link: https://r2qz5ifjvtjyzvba-50834112675.shopifypreview.com/pages?preview_key=ca67c64ad08aa974bd6cb1b205c119bc

  1. How can I remove: “Trilogy Discs Flight Numbers” in the top of the sheet? Note this the of the google sheet not text in row 1
  2. How can I make the user scroll down the page instead of scrolling within the page? (I want to expend the length of the page so the sheet fits without scrolling)

Many Thanks,

@LondonDGC

4

@JHKCreate Just following up to see if you can help with the last two questions please?

5

Hi @LondonDGC !

Would you mind resharing a new link?

6

Hi @JHKCreate

Of course, please see here:

Preview Link: https://7bspk845e9dp9025-50834112675.shopifypreview.com/pages?preview_key=c49edba484d06d06ec8fa36abe3a44bf

Code:

7

Hi there, wonder how did you achieve the second question above?

"How can I make the user scroll down the page instead of scrolling within the page? (I want to expend the length of the page so the sheet fits without scrolling)

"

Thanks in advance.

8

Hi! can you help me also with my google sheet ? where should i post that code :grinning_face_with_smiling_eyes: