Embed Google Sheets in Squarespace Safely: Code Block or Zen Tables
Embed Google Sheets in Squarespace Safely: Code Block or Zen Tables
Publish the sheet to the web, copy the generated iframe, and paste it into a Squarespace Code block. Prefer publishing a single sheet or range instead of the whole workbook, since that keeps private data out of the public version. Test the result in an incognito window before you call it done. The steps below walk through publishing, placement, sizing, and the privacy checks that catch most mistakes.
TL;DR:
- Publishing only a specific sheet or range reduces the risk of exposing sensitive data and simplifies the visitor experience.
- Adjusting URL parameters like gid, range, headers, and chrome directly in the iframe enables better control over what content visitors see, especially on mobile devices.
- Embedding a Google Sheet with a Code block in Squarespace requires previewing in Safe Mode or incognito to confirm proper rendering, as logged-in views may hide the embed.
- Fixed-size iframes often render poorly on mobile, so setting width to 100% and wrapping in scrollable containers improves responsiveness and usability.
- For dynamic, searchable, or branded tables, dedicated no-code tools like Zen Tables offer superior flexibility and control compared to static Google Sheets iframe embeds.
Table of Contents
- Step-by-step: publish your Google Sheet and get the embed code
- Where to place the embed in Squarespace: Code block vs Embed block
- Customize the embed: sizing, parameters, and mobile readability
- Security, privacy, and content scope: what publishing actually exposes
- Troubleshooting common embed problems on Squarespace
- When to use a no-code embeddable-table product instead of the Google iframe
- Author perspective: quick embeds vs productized embeds
- Zen Tables: a different route to a better-looking table
- FAQ
- Sources
Step-by-step: publish your Google Sheet and get the embed code
Open the sheet you want to show on your site, then go to File > Share > Publish to web. This is Google’s own mechanism for turning a spreadsheet into standalone HTML that any website can display, and it is documented in full in Google’s publishing guide.
In the dialog, you will see two dropdowns: one for the content (the entire document, or a specific sheet) and one for the format (web page, or embed). Choose a single sheet rather than the whole spreadsheet whenever possible, since Google’s own documentation notes that publishing is not a private dashboard: whatever scope you choose becomes viewable by whoever has the link, so a limited sheet or range is both safer and easier for a visitor to read. Click the Embed tab, then Publish, confirm the dialog that warns you content will be public, and copy the HTML snippet Google generates. That snippet is an iframe pointing to a long googleusercontent.com URL.
Before you copy anything, it is worth building a clean version of the sheet. Duplicate the file, strip out any tabs, columns, or notes you do not want visible, and remove any formulas that reference other private sheets or pull in API keys. Publish the duplicate, not the working copy your team edits daily.
Once you have the iframe, look closely at the URL inside the src attribute. A few parameters control exactly what shows up:
- gid: identifies which sheet (tab) within the spreadsheet to display, useful when a workbook has multiple tabs.
- range: limits the published output to a specific cell range, such as A1:F20, instead of an entire sheet.
- widget: set to true or false to show or hide the row of sheet tabs at the bottom.
- headers: set to true or false to show or hide the row and column reference labels (A, B, C and 1, 2, 3).
- chrome: a broader toggle that, when set to false, hides the surrounding Google Sheets interface elements for a cleaner look.
These parameters are documented alongside the publish-to-web workflow, and editing them directly in the iframe URL is the fastest way to adjust what a visitor sees without republishing. For instance, if you only want rows 2 through 50 of a pricing sheet visible, add a range parameter instead of hiding columns manually in the sheet itself. Keep the original unpublished sheet as your working file, and only touch the published duplicate when the underlying data needs updating.
Where to place the embed in Squarespace: Code block vs Embed block
Squarespace gives you two tools that can display outside content, and they are not interchangeable. The Embed block is built for services with recognized embed formats (oEmbed), like YouTube or Spotify links, where you paste a URL and Squarespace fetches the right markup automatically. A raw Google Sheets iframe does not fit that pattern, so the Code block is the one you want, since it accepts full HTML, including iframes, as Squarespace’s own documentation confirms.
To add the embed:
- Open the page in the Squarespace editor and click into the content area where the table should appear.
- Click the insert point (the plus icon), then choose Code from the block menu.
- Make sure the block is set to accept HTML (it is, by default) and paste the full iframe snippet you copied from Google.
- Save the page.
- Click Preview, then switch to Safe Mode, or open the live page in an incognito or private browser window, to see what an actual visitor sees.
That last step matters more than it sounds. Squarespace explicitly warns that embedded code may not render while you are logged into the editor, so a block that looks blank while you are signed in in your own dashboard can be displaying correctly for everyone else. Safe Mode or an incognito tab is the only reliable way to check.
Pro Tip: If a code block looks empty right after you paste it, don’t start debugging the iframe. Check Safe Mode first; nine times out of ten the embed was always fine.
A smaller note worth knowing: iframe and JavaScript support in Code blocks is a standard feature across Squarespace’s current plans, but older templates or heavily customized pages occasionally restrict where code blocks can be added. If a page section refuses to accept a Code block, try a different content area or a fresh page section rather than fighting the original one.
Customize the embed: sizing, parameters, and mobile readability
A Google-generated iframe often ships with a fixed width and height in pixels, which looks fine on a desktop monitor and terrible on a phone. The fix is to edit the iframe tag directly: set width="[100%](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe)" so the embed stretches to fill its container, and either pick a height that works across devices or wrap the iframe in a scrollable container.
A simple wrapper looks like this in the Code block, placed around the iframe tag:
<div style="max-height:500px; overflow:auto;">
<iframe src="..." width="100%" height="800" style="border:0;"></iframe>
</div>
This caps the visible area and lets visitors scroll within the table itself instead of stretching the whole page. Squarespace’s file display guide covers similar height and width adjustments for embedded file content, and the same logic applies to spreadsheet iframes.
Beyond sizing, the URL parameters mentioned earlier do real work for mobile readability:
- Set chrome=false to strip out Google’s surrounding toolbar and whitespace, leaving just the data grid.
- Set headers=false if the row and column labels (A, B, 1, 2) add visual noise without adding meaning for your visitor.
- Use range to publish only the columns that matter, since a 12-column sheet will overflow a narrow mobile screen no matter how you style it.
- Combine gid with range when a single workbook has several tabs but you only want one tab’s subset visible on a given page.
If you have a wide sheet that genuinely needs all its columns, consider whether embedding is even the right call. A link to the full sheet, opened in a new tab, is sometimes a better mobile experience than a cramped, side-scrolling embed. A sheet published as a narrow, single-purpose range tends to render cleanly on both desktop and mobile without any custom CSS at all, which is the single easiest way to avoid the overflow problems that make Google Sheets embeds look unpolished.
Security, privacy, and content scope: what publishing actually exposes
Publishing to the web is a different action than sharing a link, and the distinction matters. A shared link (View or Edit access) still requires Google authentication and respects your sharing settings. Publishing to the web generates a static HTML version that bypasses sharing permissions entirely: anyone with the embed URL can see that published content, logged in or not. Google’s help documentation is direct about this: publishing is meant for content you intend to make public, and it explicitly cautions against publishing anything sensitive.
A short checklist before you publish anything:
- Duplicate the sheet and work from the copy, never the live working file.
- Publish a single sheet or a defined range, not the entire spreadsheet, unless every tab is meant to be public.
- Delete or hide any tabs containing formulas, personal data, or references to other private documents.
- Scrub any API keys, email addresses, or internal notes that might be sitting in unused cells.
- Open the published URL in an incognito window to confirm only the intended content appears.
Pro Tip: Check hidden and far-right columns before publishing. It’s easy to forget a stray column of notes sitting past column Z that nobody scrolls to but that is still part of the published range.
One upside worth noting: the embed updates automatically whenever you edit the source sheet, since the published version is linked to the live data. Visitors, however, cannot edit anything through the embed itself. They are looking at a read-only snapshot that refreshes on its own, not an interactive editing surface.
Troubleshooting common embed problems on Squarespace
Most embed problems fall into a handful of predictable categories, and most of them have quick fixes.
- Blank embed on the live page. Confirm the sheet was actually published (reopen File > Share > Publish to web and check the status), confirm the code was pasted into a Code block and not an Embed block, and test in an incognito window rather than trusting the editor view, since Squarespace does not guarantee that embedded code renders while you are logged in.
- Embed looks fine in editor but visitors report it’s missing. This is usually the reverse problem: something about the iframe or third-party content is being blocked by the visitor’s browser privacy settings. Squarespace’s embed documentation recommends testing in a logged-out browser specifically because visitor-side rendering can differ from what you see as the site owner.
- Table overflows the page or forces horizontal scrolling. Set the iframe width to 100%, wrap it in a responsive container with a fixed max height, or go back to the published sheet and narrow the range so fewer columns need to fit.
- Visitors can’t search or sort the data like they could in Sheets. This one has no code fix. A published iframe is a static rendering of the data at publish time; Google’s publish-to-web output does not preserve client-side search, sort, or filter controls for the visitor. If that interactivity matters, the embed itself is the limitation, not your implementation.
- Numbers or dates display differently than in the original sheet. Check the cell formatting in the source sheet rather than the embed. Published output generally mirrors the sheet’s own number formatting, so fixing it upstream fixes the embed.
If you’ve gone through this list and the embed still misbehaves, it is often faster to rebuild the published version from a fresh duplicate than to keep debugging an old one, since republishing sometimes clears stale cache issues tied to the original published URL.
When to use a no-code embeddable-table product instead of the Google iframe
A raw Google Sheets iframe is free and fast to set up, but it comes with real limitations once a site has more than a handful of pages using it. Styling options are minimal: you’re working with Google’s own grid look, some chrome toggles, and whatever CSS wrapper you build yourself. Mobile readability takes manual work, as covered above, and there’s no built-in way to let a visitor search, sort, or filter the data without rebuilding that functionality from scratch. Publishing scope mistakes (an entire workbook instead of one sheet) are also one of the more common ways sensitive data ends up public by accident.
This is the gap a dedicated no-code table tool is built to close. Zen Tables specializes in transforming Google Sheets into interactive, stylish tables for websites, solving the problem of presenting spreadsheet data compellingly without writing code. Its platform applies smart templates and one-click AI styling so a table looks intentional rather than like a pasted-in spreadsheet, and it keeps data current since the source sheet and the embedded table stay connected.
A few signs this kind of tool is the better fit for a given project:
- The data updates often enough that manually republishing and re-pasting an iframe becomes tedious.
- Visitors need to search, sort, or filter the table themselves, something a static Google iframe cannot do.
- The table needs to match a site’s branding rather than look like an embedded spreadsheet.
- Privacy is a concern and you want finer control over what’s exposed than a public published URL provides.
Author perspective: quick embeds vs productized embeds
A raw Google Sheets iframe is the right call for a small, genuinely public dataset you’ll update rarely, like a one-time event schedule or a static reference table. It costs nothing and takes five minutes.
Where that approach starts to strain is frequency and presentation. A pricing table that changes weekly, a directory visitors want to filter, or any table that needs to look like part of your brand rather than a spreadsheet screenshot, those are jobs better suited to a dedicated embeddable-table product. The iframe route optimizes for speed today; a productized tool optimizes for the dozens of times you’ll touch that table over the next year. Pick based on how often you’ll come back to it, not just how it looks on day one.
— Balmin
Zen Tables: a different route to a better-looking table
If the Code block and iframe approach above feels like more fiddling than you want to do every time a sheet changes, Zen Tables offers a more direct path from spreadsheet to finished table. Instead of hand-editing iframe parameters and rebuilding a CSS wrapper every time a column gets added, you connect the sheet once and let the platform’s smart templates and AI styling handle the presentation, with updates flowing through automatically.
This fits a specific set of situations well: a client-facing directory that needs to look polished, a pricing or inventory table that changes often enough that manual republishing gets old, or any table where you want visitors to be able to search and filter without you building that logic by hand. Zen Tables supports embedding across a range of website platforms, so the same workflow applies whether you’re updating a Squarespace page or another site entirely.
Plans start with a free tier, with paid options available as needs grow; current details are on the pricing page. If a project involves more than one or two simple tables, it’s worth comparing that workflow against maintaining raw iframes by hand.
FAQ
How do I embed a Google Sheet into a website page?
Publish the sheet through File > Share > Publish to web in Google Sheets, copy the generated iframe HTML from the Embed tab, and paste that code into your website’s HTML or code block. On Squarespace specifically, that means pasting the iframe into a Code block rather than an Embed block, then checking the result in an incognito window.
Can you embed a PDF in Squarespace?
Yes, Squarespace supports displaying files like PDFs through a Code block using embed HTML, similar to the workflow used for Google Sheets. Squarespace’s file display guide covers adding that embed code and adjusting height and width when the source doesn’t specify dimensions.
Is there a way to embed a Google Sheet in a Google Doc?
Not as a live embedded spreadsheet, but you can insert a linked chart or table from Sheets into a Doc using Insert > Chart > From Sheets, which keeps the data connected to the source. This is a Docs-specific feature, separate from publishing a sheet to the web for use on an external website, and Google documents the linking steps directly.
Can you embed a Google Form into a Squarespace website?
Yes, Google Forms can be embedded the same way as Sheets: generate the embed code from the form’s share settings, then paste it into a Squarespace Code block. The same Safe Mode or incognito testing applies, since form embeds can also fail to render for a logged-in editor while working fine for visitors.
Why does my embedded Google Sheet look blank on my Squarespace page?
The most common cause is testing while logged into the Squarespace editor, since embedded code isn’t guaranteed to render there. Confirm the sheet is actually published, confirm the code sits in a Code block rather than an Embed block, and check the live page in an incognito window before assuming something is broken.
Sources
- Make Google Docs, Sheets, Slides & Forms public - Google Docs Editors Help
- Code blocks – Squarespace Help Center