Does code injection slow down a Squarespace site?

It can. Every script adds work for the visitor’s browser: one or two tags from well-known tools rarely make a visible difference, but a pile of widgets will. Run your main pages through PageSpeed Insights before and after you add code, and compare.

Will Squarespace support fix my custom code?

No. Squarespace’s help centre says it does not provide support for code-based modifications. For a tool’s tracking code or widget, ask that tool’s support; for code someone wrote for you, ask the person who wrote it.

Where is code injection on Squarespace 7.0?

In the Pages panel, as on 7.1: under Custom Code, below the Not linked section, or under Website Tools if your panel still shows the older layout. The header, footer and page header fields do the same job as on version 7.1.

Do I need code injection to verify my site in Google Search Console?

No. Squarespace’s own guide has you add Google’s TXT record in your domain’s DNS settings, and the HTML file method is not supported. Verification does not work on trial sites, so publish on a paid plan first.

Squarespace code injection: add custom code safely

Squarespace code injection is the setting that lets you paste code where the page editor cannot reach: into the <head> of every page, at the very end of every page, or into the header of a single page. It is how you install a tracking tag such as Microsoft Clarity, add structured data for search engines, or load the script a chat tool gives you.

I usually add some code to the Squarespace sites I build for clients. Nothing destructive: they edit their own pages, and they call me for that part. This tutorial walks you through it, from choosing where each kind of code goes to testing it and undoing a snippet that breaks something.

You need the Core plan or above. Menu names are those of the English interface on a version 7.1 site, as Squarespace’s help centre gives them in October 2026; Squarespace moves them from time to time. If your site is not built yet, start with my Squarespace tutorial; for the wider picture, see my guide to small business websites.

What Squarespace code injection is, and where code can go

Code injection is a set of fields where you paste HTML or scripts that Squarespace then adds to your pages. It is one of three ways to add code to a Squarespace site, and choosing the right one is half the job:

Where	What it affects	Typical use
Code Injection, Header	The `<head>` of every page	Analytics and heatmap tags, verification tags
Code Injection, Footer	Every page, just before the closing `</body>` tag	Chat widgets, scripts a tool asks you to load last
Code Injection, Lock Page and order fields	Your password page (above the password field) and, for online shops, the order confirmation and order status pages	A message on the password page, conversion tracking after a purchase
Page Header Code Injection	The `<head>` of one page	Structured data for that page, a script only one page needs
Code Block	One spot inside a page	A booking calendar, an embedded form, a map
Custom CSS	The styles of the whole site	Visual changes that Site Styles cannot make

Code injection is mostly for code that works in the background. When you want something visible at a chosen spot on a page, use a Code Block.

Which Squarespace plans include code injection

Squarespace calls code injection a premium feature. It is included on the Core, Plus and Advanced plans and on some legacy plans, but not on Basic, according to Squarespace’s code injection guide. Basic has a second limit: Code Blocks will not run scripts or iframes, which rules out most embedded widgets.

At the time of writing (October 2026), UK pricing guides list Core at £17 a month on annual billing, against £12 for Basic. On the US site, the July 2026 price rise took Core to $29 and Basic to $19 a month on annual billing; none of those UK guides reports the same rise in pounds yet, so check the official pricing page before you upgrade.

If you would rather stay on Basic, check whether you need code at all: a button linking to your booking page works on every plan, and a Code Block on Basic still shows plain HTML and CSS.

Before you paste anything: four checks

A snippet in the Header or Footer field runs on every page, for every visitor, with the same rights as Squarespace’s own code: it can change what people see and read what they type into forms. Run four checks first:

Is the source official? Copy code from the tool’s own dashboard or documentation, never from a forum post whose code you do not understand. If a tool gives you bare JavaScript, wrap it in <script> tags yourself: the fields expect valid HTML or scripts.
Is it already installed? A tag added twice, once by hand and once through an integration, can count every visit twice.
Does it need consent? Tags that set cookies or record visits may need the visitor’s agreement first. Microsoft Clarity, for instance, has required a consent signal for visitors from the UK, the EEA and Switzerland since 31 October 2025.
Where will you note it? Keep one document that lists every snippet: what it does, where it sits, who added it and when. It turns “something broke” into a quick fix, and it is what you hand over if someone else takes on the site.

Step 1: open the Code Injection panel

In the main menu, click Website to open the Pages panel.
Scroll to the bottom, below your pages and the Not linked section, and click Custom Code.
Click Code Injection. The panel shows one field per area: Header, Footer, Lock Page and, if you sell online, the order page fields.

Older guides may send you to Website Tools or to Settings > Advanced instead: Squarespace has moved this panel more than once, but the fields inside do the same job.

Step 2: add a tracking tag to every page (Microsoft Clarity)

Microsoft Clarity, a free heatmap and session recording tool, makes a good first snippet: one tag in the header and nothing visible on the page. I use it to see where visitors engage, whether they came for something specific and which parts make them leave, so I know whether the copy, a picture or the layout needs fixing. My Microsoft Clarity tutorial covers the account and the reports.

In Clarity, copy your project’s code with Get tracking code.
In the Header field, type a start comment, paste the code under it exactly as given, then add an end comment:

<!-- START Microsoft Clarity | added 17 Oct 2026 | heatmaps and recordings -->
(the code copied from Clarity, unchanged: it already includes its <script> tags)
<!-- END Microsoft Clarity -->

Click Save. From then on, the tag runs on every page of your published site.
Connect it to your cookie banner, so that each visitor’s choice reaches Clarity. The Clarity tutorial shows how.

Header or footer?

Follow the tool’s instructions: “in the head” means Header, “before the closing body tag” means Footer. With no instruction, analytics and verification tags go in the header, where they load before the content, and widgets that can wait, such as a chat button, go in the footer, where they do not hold up the content above them.

Step 3: add code to a single page (structured data)

Some code belongs on one page only: structured data describing your business on the contact page, for example, or a conversion tag on a thank-you page.

In the Pages panel, hover over the page and click its gear icon.
Open the Advanced tab.
Paste your code into Page Header Code Injection, then save.

Squarespace advises against HTML in this field, because it can disappear if you turn off the header’s transparency. Keep it for scripts, which is what structured data is: a block of JSON-LD inside a <script> tag. Here is a minimal example for a local business, to adapt with your own details:

<!-- START structured data: LocalBusiness | added 17 Oct 2026 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Your Business Name",
  "url": "https://www.example.com",
  "telephone": "+44 117 XXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1 High Street",
    "addressLocality": "Bristol",
    "postalCode": "BS1 XXX",
    "addressCountry": "GB"
  }
}
</script>
<!-- END structured data -->

Run the page through Google’s Rich Results Test before you add it, to see what the page already contains, and again afterwards to check for errors. The details must match what the page shows: same name, address and phone number. Which types are still worth adding in 2026 is covered in my guide to schema markup for small businesses.

When code must show something at a precise spot, such as a booking calendar on your contact page, use a Code Block rather than code injection. For bookings I prefer YouCanBookMe to Calendly: it has the features I need, it is easy to find your way around, and it costs a bit less, though Calendly is good too.

In YouCanBookMe, copy the embed code from your booking page’s sharing options; my YouCanBookMe tutorial shows where.
Open the page in the Squarespace editor and add a Code block where the calendar should appear.
Paste the embed code into the block, then save and exit the editor.
Open the live page on a computer and on a phone, and make a test booking.

Step 5: put CSS in the Custom CSS panel

CSS changes how things look: spacing, sizes, a colour that Site Styles does not offer. Squarespace recommends its Custom CSS editor for this rather than code injection. Check Site Styles (the paintbrush icon) first, though: fonts, colours and buttons are set there without code, and anyone can change them later.

In the Pages panel, click Custom Code, then Custom CSS.
Write each rule with a comment above it:

/* START underline links in body text | added 17 Oct 2026 */
p a {
  text-decoration: underline;
}
/* END underline links */

Save, then check several pages: a rule written for one block can change every page.

Keep this panel short. A rule in Custom CSS can override Site Styles, so every rule you add makes that panel a little less reliable for whoever edits the site next.

Step 6: test the change on the live site

Test where your visitors are, not in the editor:

Open the site in a private browser window, logged out, so you see what a visitor sees.
Check each page you changed on a computer and on a phone.
Open the browser’s developer tools (F12 on Windows, Cmd+Option+I on a Mac). The Console tab lists script errors in red; the Network tab shows whether a tag sends data (type collect in the filter for Clarity).
Check the tool’s own side: a visit in Clarity, a test booking in YouCanBookMe, a clean result in the Rich Results Test.
Add the snippet to your log, with the date.

Change one thing at a time, so you always know which snippet caused what.

If your code breaks the site: use safe mode

A faulty snippet usually shows itself in one of three ways: part of a page disappears, the layout jumps, or the editor stops working properly. Squarespace’s help pages say that custom code can stop you from editing your site securely, and that switching it off while you edit does not change what visitors see (fix site editing issues). Safe mode does exactly that:

Log in, then change the address in your browser from yoursite.com/config to yoursite.com/config/safe. Custom code and scripts are now switched off in the editor.
Open the field you changed last and delete the snippet, everything between its START and END comments. Click Save.
Leave safe mode by switching scripts back on in the preview, or by opening yoursite.com/config again without /safe.
Test the live site again in a private window.

How much custom code is too much?

Squarespace’s main advantage is that you, or your client, can change a word without the whole structure falling apart. That is why I move owners who edit their own site onto it. Load it with custom code and you lose that advantage: the more code there is, the more an ordinary edit can break something you cannot see, and the sooner a simple change needs a developer.

It helps to sort code into two piles:

Additions that sit beside the content: a tracking tag, structured data, a booking widget, a small style fix. This is the “nothing destructive” kind: it stays out of the way of what you edit yourself.
Rebuilds of what Squarespace already does: a menu rewritten in JavaScript, every block restyled in CSS. A site that needs many of these is on the wrong platform, and my comparison of Squarespace vs WordPress covers the alternatives.

The same goes for a website you build for a friend or a relative. A website is not a one-off gift, since it needs maintenance, but a Squarespace site without heavy custom code is the easiest kind for them to keep editing on their own.

You do not need custom code to rank, either. Squarespace is closed, with no access to the source code, which is why custom-coded, WordPress or Webflow sites might rank higher. Yet the Squarespace site I built for Pilotech ranks first or second on Google (my SEO case study tells that story): do the SEO right, with careful metadata and the right keywords, and the odds are on your side. My Squarespace SEO tutorial lists those settings.

Your code injection checklist, and when to hand it over

Before you call a snippet done, check each line:

Plan: Core, Plus or Advanced.
Source: copied from the tool’s own dashboard or documentation.
Place: Header for site-wide tags, Footer for scripts that can wait, Page Header Code Injection for one page, a Code Block for anything visible, Custom CSS for styles.
Labels: START and END comments, with the date and the purpose.
Consent: tracking tags connected to your cookie banner.
Test: private window, phone, Console, Network and the tool’s own dashboard.
Log: one document listing every snippet.
Clean-up: when you stop using a tool, remove its code the same day.

Copying a tag from a tool’s dashboard is a job you can do yourself, and I would rather you did. Writing code is a different job. If what you want needs code written for you, if you cannot tell what a snippet does, or if the site brings in most of your enquiries and an afternoon of broken pages would cost you, ask someone who reads code, and ask them to leave START and END comments behind. On the Squarespace sites I build, that is exactly the part clients call me for.

Squarespace code injection: how to add custom code without breaking your site

What Squarespace code injection is, and where code can go

Which Squarespace plans include code injection

Before you paste anything: four checks

Step 1: open the Code Injection panel

Step 2: add a tracking tag to every page (Microsoft Clarity)

Header or footer?

Step 3: add code to a single page (structured data)

Step 4: embed a widget inside a page (YouCanBookMe)

Step 5: put CSS in the Custom CSS panel

Step 6: test the change on the live site

If your code breaks the site: use safe mode

How much custom code is too much?

Your code injection checklist, and when to hand it over

Frequently asked questions

Does code injection slow down a Squarespace site?

Will Squarespace support fix my custom code?

Where is code injection on Squarespace 7.0?

Do I need code injection to verify my site in Google Search Console?