What Is Code Injection?
Code Injection is Squarespace's way of letting you add custom code to your site without touching template files. It is available on Business and Commerce plans and gives you two sitewide slots (Header and Footer) plus per-page slots where you can paste HTML, CSS, or JavaScript.
Think of it as a controlled window into your site's code. You cannot change the template structure, but you can add new functionality, styles, tracking scripts, and structured data. For most Squarespace 7.1 users, Code Injection is the primary way to customize beyond what the visual editor offers.
Where to Find It
There are two places to access Code Injection:
Sitewide Code Injection
Go to Settings → Advanced → Code Injection. You will see two text areas: one for the Header and one for the Footer. Code you add here appears on every page of your site.
Per-Page Code Injection
Open any page in the editor, click the gear icon for Page Settings, then go to the Advanced tab. The code you add here only runs on that specific page.
Tip
Code Injection requires a Business or Commerce plan. If you are on a Personal plan, you will not see these options. The Custom CSS panel (Design → Custom CSS) is available on all plans, so use that for CSS-only changes if you are on a lower tier.
Header vs Footer: What Goes Where
The Header and Footer slots correspond to where your code is placed in the HTML document. This matters more than you might think.
Header Injection
Code placed here is inserted into the <head> section of your pages. Use it for:
- CSS styles (wrapped in
<style>tags) — CSS must load before the page renders to avoid a flash of unstyled content - Meta tags like verification codes for Google Search Console
- Schema markup / JSON-LD — Google reads it from either head or body, but head is the conventional location
- Fonts — Google Fonts or custom font @font-face declarations
- Tracking pixels that need to fire before content loads (like the Facebook Pixel base code)
Footer Injection
Code placed here is inserted right before the closing </body> tag. Use it for:
- JavaScript that interacts with page elements (the DOM must exist before your script can find elements)
- Chat widgets and other third-party tools that create floating UI
- Analytics scripts like Google Tag Manager's secondary snippet
- Any script that does not need to run before the page is visible
Warning
Putting JavaScript in the Header can slow down your page load. The browser has to download and run the script before it shows any content. Unless a script specifically requires Header placement, default to the Footer.
Per-Page Code Injection
Sometimes you want code on just one page. For example, a booking widget on your Contact page, or a custom style that only applies to your About page.
To add per-page code: open the page, click the gear icon, go to the Advanced tab, and paste your code in the Page Header Code Injection field.
Note that per-page injection only has a Header slot, not a Footer. If you need JavaScript that must run after the DOM loads, wrap it in a DOMContentLoaded event listener:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Your code here — the page is fully loaded
var button = document.querySelector('.my-button');
if (button) {
button.addEventListener('click', function() {
alert('It works!');
});
}
});
</script>Adding Google Analytics / Tag Manager
Google Analytics 4 (GA4) is the current version of Google's analytics platform. Squarespace has a built-in integration for it, but if you want full control or are using Google Tag Manager, Code Injection is the way to go.
Google Analytics 4 (Direct)
Paste this in your Header Code Injection, replacing the measurement ID with yours:
<!-- Google Analytics 4 -->
<script async
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>Google Tag Manager
GTM requires two code snippets. The first goes in Header Code Injection:
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>The second goes in Footer Code Injection:
<!-- Google Tag Manager (noscript) --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>
Tip
If you are only using basic analytics, Squarespace's built-in GA4 integration (under Settings → Advanced → External API Keys) is simpler. Use Code Injection when you need GTM for managing multiple tags, conversion tracking, or custom events.
Adding Custom Fonts
Squarespace includes Google Fonts and Adobe Fonts, but if you have a custom font file or want a specific Google Font not in their library, use Code Injection.
Google Fonts
Go to fonts.google.com, select your font, and copy the embed link. Paste it in Header Code Injection:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
Then apply it in Custom CSS (Design → Custom CSS):
body {
font-family: 'Inter', sans-serif !important;
}
h1, h2, h3 {
font-family: 'Inter', sans-serif !important;
font-weight: 600;
}Third-Party Scripts
Most third-party tools give you a code snippet to paste into your site. Here is where common ones go:
- Live chat widgets (Intercom, Drift, Tidio) → Footer injection. These create floating UI elements and do not need to load before the page is visible.
- Booking tools (Calendly, Acuity) → Per-page injection on your booking page, or a Code Block where you want the widget to appear.
- Email marketing popups (Mailchimp, ConvertKit) → Footer injection. They trigger after the page loads.
- Facebook Pixel → Header injection. It needs to fire early to track the page view.
- Cookie consent banners → Header injection (CSS) + Footer injection (JavaScript).
Tip
Every script you add increases page load time. Audit your Code Injection periodically and remove anything you are no longer using. A chat widget you installed two years ago and forgot about could be adding 200ms to every page load.
CSS via Code Injection vs Custom CSS Panel
You can add CSS in two places: the Custom CSS panel (Design → Custom CSS) and Header Code Injection (wrapped in <style> tags). Which should you use?
- Custom CSS panel — Use this for the majority of your styles. It is purpose-built for CSS, gives you a live preview, and keeps your Code Injection clean.
- Code Injection — Use this when you need CSS on a specific page only (per-page injection), or when you have CSS that depends on a script you are also injecting (keep related code together).
In terms of how they render, both produce the same result. CSS in Code Injection loads in the <head>, and CSS in the Custom CSS panel also ends up in the <head>. The difference is organizational, not functional.
Schema Markup / JSON-LD
Schema markup (structured data) helps Google understand your business and can unlock rich results in search — like star ratings, FAQ dropdowns, or business information cards.
The standard format is JSON-LD, which is a <script> block with type="application/ld+json". Add it to your Header Code Injection for sitewide schema, or per-page injection for page-specific schema.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Do you offer free consultations?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, we offer a free 30-minute consultation for all new clients."
}
},
{
"@type": "Question",
"name": "What areas do you serve?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We serve the greater Portland metro area including Beaverton, Lake Oswego, and Tigard."
}
}
]
}
</script>Use our Schema Builder tool to generate JSON-LD without writing it by hand. It supports LocalBusiness, FAQ, Product, and other common schema types.
Common Mistakes
1. Putting JavaScript in the Header
JavaScript that manipulates page elements will not work in the Header because the page has not loaded yet. The script runs, tries to find an element that does not exist yet, and silently fails. Put DOM-manipulating scripts in the Footer, or wrap them in a DOMContentLoaded listener.
2. Missing Script Tags
JavaScript needs to be wrapped in <script> tags, and CSS needs <style> tags. If you paste raw CSS or JS without the tags, Code Injection will treat it as HTML text and it will appear as visible text on your page.
3. Duplicate Scripts
If you add Google Analytics in both the built-in integration and Code Injection, you will double-count every page view. Pick one method and stick with it.
4. Not Testing on Mobile
Some third-party widgets look great on desktop but cover the entire screen on mobile. Always check your site on a phone after adding any new script.
5. Forgetting to Save
The Code Injection panel does not auto-save. If you navigate away without clicking Save, your changes are lost. There is no warning.
Security Considerations
Code Injection gives you real power, and with it comes some responsibility:
- Only paste code from sources you trust. A malicious script in Code Injection has full access to your page, your visitors' browsers, and any data on the page.
- Do not paste code you do not understand. If someone on a forum gives you a snippet, take a moment to read through it. If you see
eval(),document.cookie, or URLs to unfamiliar domains, do not use it. - Limit who has admin access. Anyone with admin access to your Squarespace site can edit Code Injection. Keep your admin account list small.
- Review your Code Injection periodically. If you hired a developer or installed something months ago, review what is there. Remove anything you are not actively using.
Warning
Never paste code from untrusted sources into Code Injection. A single malicious script can redirect your visitors, steal form submissions, or inject content into your pages. If you are not sure what a code snippet does, ask before pasting it.
