Squarespace has its own built-in events system, a native Google Calendar iframe embed, and a third option for organisations that want a branded display. This guide covers all three – what each one does, what it does not, and one plan requirement that most guides skip over entirely.
If you use Google Calendar to manage your events and you have a Squarespace site, the question of how to connect the two is a reasonable one. The answer most people find is straightforward: copy an embed code from Google Calendar settings, paste it into a Code Block in Squarespace, done.
That works – with one condition that most guides skip over. And it produces a calendar that looks exactly like Google’s interface, not your site.
There are actually three approaches to showing events on a Squarespace site, and they are suited to different situations. This guide covers all three honestly.
The plan requirement you need to know first
Squarespace has two different ways to add custom code to a site, and both are relevant for embedding events.
The first is Code Blocks – inserted directly on a page or post. On all plans, Code Blocks support plain HTML, Markdown, and CSS. Adding JavaScript or iframes in a Code Block requires the Core plan or above.
The second is Code Injection – a site-wide panel under Settings that adds scripts to the header or footer of every page. Code Injection also requires the Core plan or above.
This matters for Revisual specifically. The Revisual embed uses a two-step setup: a JavaScript loader script added via Code Injection to the site header or footer, plus a Custom HTML snippet added via a Code Block on the page where the calendar appears. Both steps require Core or above.
The native Google Calendar iframe embed uses a Code Block with an iframe, which also requires Core or above.
The only approach that works on the Basic plan – without any code – is Squarespace’s native Events Collection, covered in Option 1 below. If you are on the Basic plan and want to embed Google Calendar, upgrading to the Core plan is required.
Option 1: Squarespace’s native Events Collection
Squarespace has a built-in events system – a Calendar page type where you create and manage events directly within Squarespace. You add events in the Squarespace editor, set dates, descriptions, and images, and they display on the calendar page automatically. No code required, works on every plan, and the display matches your site’s design.
This is the right option if you do not currently use Google Calendar to manage events, if your events are infrequent enough that adding them manually to Squarespace is not a burden, and if you want the simplest possible setup with no third-party tools.
Its limitations become significant for organisations running regular event programmes. Squarespace’s Events Collection does not support recurring events – each instance must be created manually. There is no connection to Google Calendar, so if your team already manages events there, you are now maintaining two separate systems. There is also no filtering, no card layout, and past events are capped at 30 visible at a time.
Squarespace’s Events Collection is also structurally different from a traditional calendar – it is a content grid that supports title, date, location, and description only, with no support for event images in the calendar view, custom fields, or attendee-facing features.
Right for: organisations with a handful of one-off events per year who do not use Google Calendar and want zero setup complexity. Not right for: organisations running regular event programmes or those already managing events in Google Calendar.
Option 2: The Google Calendar iframe embed
Google Calendar provides a native embed code – an iframe – that you can paste into a Squarespace Code Block. The calendar updates automatically whenever you change events in Google Calendar. Setup takes a few minutes once your calendar is set to public.
Step 1: Make your calendar public
Open Google Calendar and click the settings gear in the top right. Under ‘Settings for my calendars’, select the calendar you want to embed. Find ‘Access permissions for events’ and tick ‘Make available to public’. If this calendar contains any private appointments, create a separate dedicated calendar for public events first.
Step 2: Get the embed code
Still in calendar settings, scroll down to ‘Integrate calendar’. Copy the iframe embed code. You can click ‘Customise’ to adjust basic settings – default view (month, week, agenda), background colour, and whether to show the title and navigation controls – before copying.
Step 3: Add a Code Block in Squarespace
In your Squarespace editor, navigate to the page where you want the calendar to appear. Click the + insert point and select Code from the block menu. Paste the Google Calendar iframe code into the Code Block and click Apply.
Note: the Core plan or above is required for the iframe to render. On the Basic plan the Code Block will accept the paste but the calendar will not display.
What you get
A functional, auto-updating calendar that reflects your Google Calendar events. Visitors can navigate between months and click events for details. The visual presentation is Google’s fixed interface – the colour scheme, layout, and navigation controls cannot be changed through the iframe. On a professionally designed Squarespace site, the mismatch between the calendar and the surrounding design is typically visible.
Right for: organisations that need a working calendar quickly, where visual consistency with the site is not a priority. Not right for: organisations where the events page is part of a public-facing brand identity.
Option 3: A branded Google Calendar widget with Revisual
Revisual connects to your Google Calendar and displays events in a fully customisable widget that you embed in Squarespace. The visual output – colours, fonts, card layout, images, CTA buttons – matches your site rather than Google’s interface. Events update automatically when the calendar changes.
This requires the Core plan or above in Squarespace. The setup uses two steps – a JavaScript loader script added via Code Injection, and a widget snippet added via a Code Block – but the result is a calendar that looks like it was built for your site rather than pasted in from another tool.
How to embed Revisual on Squarespace
Revisual uses a two-step embed on Squarespace. First, a JavaScript loader script is added to your site’s header or footer via Code Injection – this runs on every page and loads the Revisual engine. Second, a Custom HTML snippet is added via a Code Block on the specific page where you want the calendar to appear. Both steps require the Core plan or above.
Step 1: Add the Revisual loader script via Code Injection
In your Squarespace dashboard, go to Website → Pages → scroll down to find Custom Code, or go to Settings → Advanced → Code Injection. In the Footer field, paste the Revisual loader script provided in your Revisual dashboard. This script loads once per page visit and does not affect your site’s visible content – it prepares the page to render Revisual widgets.
Step 2: Configure your widget in Revisual
In the Revisual dashboard, connect your Google Calendar and configure your widget – choose your layout, set colours and fonts to match your Squarespace site, decide how many events to show. In the Revisual install wizard, select the custom embed or HTML option and copy the widget code snippet.
Step 3: Add the widget snippet via a Code Block
In the Squarespace editor, navigate to the page where you want the calendar to appear. Add a Code Block at the insertion point and paste the Revisual widget snippet. The calendar will render at that position on the page. Events update automatically from Google Calendar – no changes are needed in Squarespace when events are added, updated, or removed.
What Revisual adds beyond the iframe
- Branded presentation – your colours, fonts, and card layout rather than Google’s fixed interface
- Event structured data – Revisual injects Event schema markup into the page, making events readable by search engine crawlers and eligible for event rich results in Google Search
- Multi-channel distribution – the same calendar can also power email campaigns, QR codes, and hosted event pages, all staying in sync automatically
- Filtering and multiple views – visitors can filter events by category, and you can configure list, grid, or card views depending on your layout
Right for: organisations where the Squarespace events page is part of their public-facing brand, where they already manage events in Google Calendar and want the website to reflect those events without duplication, or where email and QR distribution are also needed.
Which option is right for your organisation
The decision comes down to two questions.
First – do you already manage events in Google Calendar? If yes, the native Squarespace Events Collection requires you to duplicate that work. The iframe or Revisual method is appropriate.
Second – does the visual presentation of your events page matter for your audience? If the events page is a public-facing part of your site’s identity, the iframe will look mismatched. Revisual is the right choice.
If you are on the Basic Squarespace plan and do not want to upgrade, the native Events Collection is your only viable option for a public calendar. The iframe and Revisual both require Core or above.
| Squarespace Events Collection |
Google Calendar iframe embed |
Revisual widget | |
|---|---|---|---|
| Plan required | Any plan | Core or above | Core or above |
| Google Calendar sync | No | Yes — auto | Yes — auto |
| Visual customisation | Limited | None | Full control |
| Setup time | 2 minutes | 5 minutes | 5–10 minutes |
| Recurring events | No | Yes | Yes |
| Event structured data (SEO) | Basic | No | Yes |
| Multi-channel distribution | No | No | Yes |
| Best for | Infrequent events, no Google Calendar | Quick functional embed, no brand requirement | Branded display, Google Calendar users, multi-channel |
A note on Squarespace version 7.0 vs 7.1
Squarespace currently operates on two versions. Version 7.1 is the current standard; version 7.0 is a legacy version that some older sites still run. The Code Block behaviour and plan requirements described in this article apply to version 7.1. On version 7.0, some interface elements differ – the block inserter works slightly differently and some template restrictions may apply. If you are unsure which version your site uses, check Settings → Advanced in your Squarespace dashboard.
Frequently Asked Questions
Not directly. Google Calendar’s embed code uses an iframe, which requires the Squarespace Core plan or above to render in a Code Block. The Basic plan supports HTML and CSS in Code Blocks but not iframes or JavaScript. The only free option for displaying a public event calendar on Squarespace without a code embed is Squarespace’s native Events Collection, which requires you to create events within Squarespace rather than syncing from Google Calendar.
The most common reason is plan level – embedding an iframe requires the Core plan or above. If you are on the Basic plan, the Code Block will accept the embed code but the calendar will not render. Check your plan level first. If you are on Core or above and the calendar is still not displaying, check that your Google Calendar is set to public in its sharing settings – a private calendar will not display to site visitors.
Yes. Once the iframe is embedded, changes to your Google Calendar – new events, updated details, cancellations – are reflected on your Squarespace site automatically. There is no republishing step in Squarespace when the calendar changes. The same is true for the Revisual embed – events sync from Google Calendar and appear on the site without any action in Squarespace.
Not with the native iframe embed. Google Calendar’s embed uses a fixed visual style that cannot be overridden through Squarespace’s design tools or custom CSS applied to the Code Block. Limited adjustments – background colour, default view, whether to show the title – are available in Google Calendar’s own Customise settings before you copy the embed code. For a display that matches your site’s brand, Revisual provides a fully configurable widget with your colours, fonts, and card layout.
No. Squarespace does not offer a native connection to Google Calendar. Its built-in Events Collection is a separate system where you create events directly in Squarespace – it does not sync with Google Calendar. The only ways to display Google Calendar events on a Squarespace site are the iframe embed via a Code Block, or a third-party tool like Revisual that connects to Google Calendar and provides an embeddable widget.
Core plan or above for both the native Google Calendar iframe and the Revisual embed. The Basic plan does not support iframes in Code Blocks or Code Injection – both of which are required depending on your chosen method.
Specifically: the Google Calendar iframe embed requires a Code Block with iframe support, which requires Core or above. The Revisual embed requires Code Injection (for the JavaScript loader script) and a Code Block (for the widget snippet), both of which require Core or above. The only option that works on the Basic plan is Squarespace’s native Events Collection, which requires no code but does not connect to Google Calendar.
About the author
Piotr Pozniak
Piotr’s is the cofounder of Revisual, a dedicated tool for seamlessly sharing events. With over six years of experience developing the platform, he brings extensive expertise in streamlining business processes through technology solutions. Work with partners across industries has honed his ability to optimize event workflows and enhance data accessibility.
