How to Embed Google Sheets on Squarespace
Heads up: this How-To can be a little geeky 🤓
Embedding a Google Sheet on a Squarespace site is fairly simple, with only a mild level of nerdiness required. Google Sheets gives us the opportunity to display a spreadsheet using the Code Block element.
File > Share > Publish to Web
While in the Google Sheet document you want to embed on your website (works on pages or posts), click File > Share > Publish to Web. Hit the green “Publish” button and copy the iframe embed code from the box.
For embedding: Grab the iframe code to add to your Code Block
Enter that embed code (< iframe… > into the Code Block you have already added to your Squarespace web page.
Default Code Block
The default Code Block with the iframe dded will not look like your entire google sheet, just a small section of it, darn.
We can fix that by amending the following in the Code Block:
Replace the iframe embed code with this:
<iframe src="google-sheets-URL-goes-here" width="100%" height="500"></iframe>
Copy the loooong Google Sheet url seen in the original iframe in the bolded area between the parentheses in the iframe.
At that point you can adjust the height, which is in pixels.
In the embed seen below, I changed the height to 1200, instead of just 500, which gives plenty of room for the height of the document to display on a desktop. The width, however, if its a many-columned sheet, will need to be scrolled to see everything further to the right.
Seeing the entire Google Sheet
SCROLLING BACK AND FORTH
Depending on how wide (how many columns) your document is, will determine whether viewers will need to scroll across using the toggle in the doc embed itself. There’s no way around that.
TABS
Great news about multi-tabbed Google Sheets - the tabs are clickable on your website.
AUTOMATIC UPDATES
More great news is whenever you make an edit to your Google Sheet, it will automatically update on your website the next time someone views the page, or by refreshing the page in real time.
MOBILE VIEWING
On mobile, unless your doc is only one column wide, visitors will have to scroll for miles to get to the furthest right end of the Google Sheet. Keep that in mind if the majority of your audience is looking at your website on their phones.
USING LINK INSTEAD
If you’d rather skip the “Code-Block-url-switcharoo” approach simply add a link with text or a button using the Link tab in the File > Share > Publish to Web command.
