What Is Code Injection in Squarespace?
Code injection is Squarespace's system for adding custom HTML, CSS, and JavaScript to your website without editing the template source code. It provides designated text fields where you paste code that Squarespace then inserts into specific locations in your page's HTML - the head section, the body footer, or individual page headers.
This is different from Custom CSS (which only accepts CSS rules) and Code Blocks (which insert code into specific page sections). Code injection runs site-wide or page-wide depending on where you add it, making it the right tool for scripts that need to load on every page - like analytics, tracking pixels, and custom fonts.
Squarespace Code Injection Locations
Site-Wide Header Code Injection
Found at Settings > Advanced > Code Injection > Header. Code you add here is inserted into the <head> section of every page on your site. This is the correct location for Google Analytics tracking scripts, custom font imports, meta tags, CSS stylesheets, and any JavaScript that needs to load before the page content renders.
The header injection runs before the page body loads, so scripts placed here can affect how the page appears from the first render. Be careful with large scripts in the header - they can delay page rendering if they are not loaded asynchronously.
Site-Wide Footer Code Injection
Found at Settings > Advanced > Code Injection > Footer. Code added here is inserted just before the closing </body> tag on every page. This is the correct location for scripts that do not need to run until the page content has loaded - live chat widgets, social media embeds, conversion tracking pixels, and performance-monitoring scripts.
Footer injection is generally safer for page speed than header injection because the scripts load after the visible content has rendered. If a footer script fails, visitors still see your page content - only the added functionality breaks.
Page-Specific Header Code Injection
Each individual page and blog post in Squarespace has its own header code injection field. Access it through the page settings (gear icon) under the Advanced tab. Code added here only runs on that specific page, which is useful for page-specific tracking, A/B testing scripts, or custom functionality that should not affect the rest of your site.
Order Confirmation Page Code Injection
For e-commerce sites, Squarespace provides a dedicated code injection field for the order confirmation page. Found at Settings > Advanced > Code Injection > Order Confirmation Page. This is the correct location for conversion tracking pixels (Google Ads, Facebook Pixel purchase events, etc.) that should only fire when a customer completes a purchase.
Common Uses for Squarespace Code Injection
Adding Google Analytics and Tracking Scripts
The most common use of code injection is adding your Google Analytics 4 measurement script. Paste the GA4 tracking snippet into the header code injection field so it loads on every page. This also applies to Google Tag Manager, Facebook Pixel, and any other analytics or advertising platform that requires a tracking script. For a complete GA4 setup walkthrough, our guide to implementing Google Analytics on Squarespace covers every step.
Loading Custom Fonts
If you want to use fonts that are not available in Squarespace's built-in font library, you can load them via code injection. Add a font import link (from Google Fonts, Adobe Fonts, or a self-hosted font file) to the header code injection, then reference the font family in your Custom CSS. For a complete custom font walkthrough, our guide to adding custom fonts to Squarespace covers the full process.
Adding Live Chat Widgets
Services like Intercom, Drift, Tidio, and LiveChat provide JavaScript snippets that you paste into the footer code injection field. The chat widget appears on every page as a floating button in the bottom corner. Footer injection is the right location because the chat widget does not need to load before the page content renders.
Embedding Third-Party Tools Site-Wide
Cookie consent banners, announcement bars, and notification widgets that need to appear on every page belong in the header or footer code injection. This is more efficient than adding a Code Block to every individual page, and it ensures the tool loads consistently across your entire site.
Code Injection vs. Code Blocks vs. Custom CSS
Code Injection runs site-wide (or page-wide for page-specific injection). Use it for scripts and meta tags that need to load in the head or footer of your HTML. Best for: analytics, tracking pixels, custom fonts, site-wide widgets.
Code Blocks are content blocks you add to specific locations on a page. They render inline with your page content. Best for: embedded forms, single-page widgets, Shopify Buy Buttons, and any HTML that should appear at a specific position on a specific page.
Custom CSS (Design > Custom CSS) is for CSS styling rules only - no HTML or JavaScript. It applies site-wide and is the correct place for visual customizations like changing colors, fonts, spacing, and hiding elements. For a deep walkthrough, our guide to adding custom CSS to Squarespace covers every technique.
Best Practices for Squarespace Code Injection
Test in preview before publishing. After adding code to any injection field, preview your site before saving. Check that the code works as expected and does not break any existing functionality.
Add comments to your code. Label each code snippet with an HTML comment explaining what it does and when you added it. For example: <!-- Google Analytics 4 - Added March 2026 -->. This makes it easy to identify and remove scripts later.
Use async and defer attributes. For JavaScript files loaded in the header, add async or defer attributes to prevent them from blocking page rendering. This keeps your site fast even with multiple tracking scripts.
Keep the footer injection lean. Every script in the footer runs on every page load. Remove scripts you no longer use - abandoned tracking pixels, old chat widgets, and expired campaign scripts all add unnecessary load time.
Never add untrusted code. Only inject code from sources you trust. A malicious script in your code injection can steal visitor data, redirect traffic, or inject spam content. Verify the source of every script before adding it. For broader site optimization including code hygiene, our Squarespace SEO guide covers performance and technical best practices.
Troubleshooting Code Injection Problems
Code Not Working After Injection
Check that you placed the code in the correct injection field - header scripts in the header field, footer scripts in the footer field. Verify the code is complete and properly formatted. Open your browser's developer console (right-click > Inspect > Console) and look for JavaScript errors that might indicate a syntax problem or a conflict with existing scripts.
Site Layout Breaks After Adding Code
If your site's visual layout breaks after adding code injection, the most likely cause is unclosed HTML tags or CSS rules that conflict with your template's styles. Remove the injected code to restore your site, then review the code carefully for missing closing tags, unclosed quotes, or overly broad CSS selectors.
Code Works on Some Pages but Not Others
If you added code to a page-specific injection field, it only runs on that page. If you need the code on every page, move it to the site-wide header or footer injection. Also check that the code does not depend on page elements that only exist on certain pages. For help with page-specific customization, our guide to customizing your Squarespace website covers page-level settings.
Frequently Asked Questions
What is code injection in Squarespace?
Where do I find code injection in Squarespace?
What is the difference between header and footer code injection?
Can code injection break my Squarespace site?
Do I need a specific Squarespace plan for code injection?
How do I add Google Analytics to Squarespace using code injection?
Can I add code injection to a single page in Squarespace?
Use Code Injection to Unlock Your Squarespace Site's Full Potential
Code injection is the bridge between what Squarespace's visual editor offers and what your site actually needs. Analytics, custom fonts, chat widgets, tracking pixels, and third-party integrations all live in the code injection fields. Use them deliberately, label everything clearly, and test before publishing.
The key is restraint - add only what you need, put it in the right location, and remove anything you are no longer using. A clean code injection setup keeps your site fast, functional, and easy to maintain.
* Read the rest of the post and open up an offer