Code Injection is the most powerful customization feature in Squarespace. It lets you add custom HTML, CSS, and JavaScript directly to your site without a developer account or third-party tools. Whether you want to add Google Analytics, load custom fonts, implement schema markup, or build interactive components, Code Injection is how you do it.
This guide covers everything: where Code Injection lives, what goes in each section, common use cases, debugging techniques, and the mistakes that cause the most problems.
Where to Find Code Injection
Squarespace has two types of Code Injection: site-wide and per-page.
Site-wide Code Injection is at Settings → Advanced → Code Injection. You will see two fields: Header and Footer. Code in the Header field is injected into the HTML head element of every page. Code in the Footer field is injected just before the closing body tag on every page.
Per-page Code Injection is in the settings of individual pages. Click the gear icon next to any page in the pages panel, scroll down to Advanced, and you will find a single Code Injection field. This code is added to the head of that specific page only.
The general rule: if it affects how the page looks, put it in the header. If it affects how the page behaves, put it in the footer.
Common Use Cases
Google Analytics 4
The GA4 tracking tag goes in Header Code Injection. Google provides a two-part snippet: an async script tag that loads the gtag library, and an inline script that configures your measurement ID.
<!-- Paste into Header Code Injection -->
<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>Custom Fonts
To load Google Fonts, add the preconnect hints and stylesheet link to Header Code Injection. Always include display=swap in the URL.
<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=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'DM Sans', sans-serif !important; }
</style>Schema Markup
JSON-LD structured data can go in either header or footer, but the header is conventional. Use per-page Code Injection for page-specific schema (Article, Product, FAQ) and site-wide header injection for global schema (Organization, WebSite).
Meta Tags
Custom meta tags go in Header Code Injection. Common additions include canonical URLs, robots directives, Open Graph tags for social sharing, and Twitter Card markup.
Interactive Components
FAQ accordions, countdown timers, pricing tables, and sliders go in page-specific Code Blocks (not Code Injection). However, shared JavaScript libraries or global styles for these components can go in site-wide Code Injection to avoid duplicating code across pages.
Per-Page Code Injection
Per-page injection is underused. It is perfect for:
- Landing page tracking pixels that should only fire on specific pages
- Page-specific schema markup (FAQ schema on your FAQ page, LocalBusiness on contact)
- A/B testing scripts targeted at specific pages
- Custom styles that only apply to one page
Using per-page injection instead of site-wide injection improves performance because the code only loads where it is needed, and it keeps your site-wide injection clean and manageable.
Debugging Code Injection
When your injected code is not working, check these things in order:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Your code here — the DOM is guaranteed to be ready
var element = document.querySelector('.my-element');
if (element) {
element.addEventListener('click', function() {
// handle click
});
}
});
</script>4. Look for conflicting code. Multiple scripts targeting the same elements can interfere. This is especially common with third-party widgets that all try to modify the body or head.
Performance Impact
Every script you add to Code Injection affects page load time. Header scripts block rendering until they finish loading (unless marked async or defer). Footer scripts run after the page content but before the page feels fully interactive.
<!-- GOOD: async loading, non-blocking -->
<script async src="https://example.com/analytics.js"></script>
<!-- GOOD: deferred, runs after DOM is parsed -->
<script defer src="https://example.com/widget.js"></script>
<!-- BAD: blocks page rendering until loaded -->
<script src="https://example.com/heavy-library.js"></script>Read our speed optimization guide for more performance tips.
What Code Injection Cannot Do
Code Injection is client-side only. You cannot modify server-side behavior, access databases, process form submissions with custom logic, or change how Squarespace generates its HTML. For those capabilities, you would need to move to a platform like WordPress or build a custom site.
You also cannot remove Squarespace's built-in scripts and styles. The platform loads its own JavaScript and CSS on every page, and Code Injection adds to this rather than replacing it.
Essential Tools for Code Injection
For a curated list of the most useful code injections, read our article on 5 Code Injections Every Website Needs. And for tools that generate the code for you:
