Code Injection is the only way to add custom logic to Squarespace. Standard blocks don't cover tasks like CRM integration, custom calculators, or advanced analytics. We've seen this dozens of times: a client wants to collect leads directly in amoCRM, set up Cookiebot for GDPR, or add AJAX navigation for a seamless UX. Without server or template access, Code Injection becomes the primary tool. Used incorrectly, it breaks Core Web Vitals — LCP drops by 2 seconds, and scripts conflict with built-in widgets. Let's explore how to inject code without consequences.
Why Code Injection is the Only Way
Squarespace doesn't allow editing the theme's source code. Instead, there are four injection points, each with its own specifics. Choosing the wrong location leads to conflicts or performance loss. For example, a script placed in the Header can slow down all pages if not wrapped in defer or async. Code in the Footer won't run until the DOM is fully loaded — suitable only for async widgets. Let's break down each point.
Code Injection Points
| Location | Panel Path | Purpose | Peculiarities |
|---|---|---|---|
| Global Header | Settings → Advanced → Code Injection → Header | Meta tags, fonts, synchronous scripts | Injected into <head>, affects all pages |
| Global Footer | Settings → Advanced → Code Injection → Footer | GTM, chats, async scripts | Before </body>, suitable for widgets |
| Page-level Header | Page Settings → Advanced → Page Header Code Injection | Unique scripts for one page | Affects only that page |
| Lock Page / Order Confirmation | Specialized sections | Protected pages, order confirmation page | Separate fields for different scenarios |
How We Do It: CRM Integration Case Study
From our practice: a design studio client needed to connect amoCRM to their Squarespace site. The goal: when a form is submitted, the lead should instantly appear in the CRM, and the manager should get a Telegram notification. Our solution:
- Added a script in the global footer that intercepts the
submitevent for the form with a specificdata-form-id. - Collected form data via
FormData, sent it viafetchto the amoCRM REST API. - Simultaneously called the Telegram Bot API for notification.
The entire code fit in 40 lines; testing took half a day. Without Code Injection, we would have had to change the template or use workarounds. The client reduced lead processing time from 3 hours to 5 minutes — a 98% time saving.
Which Cookie Consent Tool to Choose?
The built-in Squarespace banner (available on Business+ plans) doesn't offer a "Reject All" button — that violates GDPR. Cookiebot, however, gives full control: users can selectively consent to tracker categories. We use it in 9 out of 10 projects. It automatically blocks third-party scripts until consent is given and updates the policy when the cookie list changes. According to Cookiebot documentation, their solution is 5 times faster to configure than a custom-built banner.
Comparison of Cookie Consent Solutions
| Criteria | Built-in Squarespace Banner | Cookiebot | OneTrust |
|---|---|---|---|
| "Reject All" button | No | Yes | Yes |
| Auto-blocking scripts | No | Yes | Yes |
| Free plan | Yes (limited) | Yes (up to 100 pages) | Yes (limited) |
| Google Consent Mode integration | No | Yes | Yes |
| Cost for 50 pages | Included in plan | ~$12/month | $15/month |
Our Work Process
- Analytics — examine existing injection points, identify conflicts with current scripts.
- Design — plan architecture: which APIs to use, how to handle AJAX navigation.
- Implementation — code in JavaScript/CSS, inject via Code Injection, test in incognito mode. Request a Code Injection audit — we'll uncover hidden conflicts and improve performance.
- Testing — check LCP, CLS, INP after injection; ensure scripts don't break site functionality.
- Deployment — move finished scripts to production, provide a 7-day support guarantee.
What's Included
- Audit of existing Code Injection points for conflicts.
- Development of custom scripts (CSS, JS) accounting for Squarespace's AJAX navigation.
- Integration of GTM, Cookiebot, Yandex.Metrica, or any other analytics.
- Integration with CRM, email marketing, Telegram bots.
- Cross-browser testing (Chrome, Safari, Firefox).
- Documentation for each script and contacts for future adjustments.
Common Code Injection Mistakes
- Using
document.write()— prohibited, causes errors. - Adding jQuery on top of the built-in one — leads to duplication and performance issues.
- Not handling AJAX navigation — widgets stop working after page transitions. Solution: listen to the
squarespace:after-body-renderevent. - Synchronous XHR requests — block loading. Use
fetchwithasync/await.
Limitations and Workarounds
Squarespace forbids document.write() and synchronous XHR. ES modules (type="module") work, but you need to watch the load order. jQuery is already built into the core — don't include it again. For legacy functions, use Y.use('node', ...). If the site uses AJAX navigation, remember to reinitialize widgets after the squarespace:after-body-render event.
Estimated Timelines
- Connecting GTM and Yandex.Metrica — from 2 hours.
- Custom widget or calculator — from 1 to 2 days.
- CRM integration with form interception — from 3 to 5 days.
- Full analytics migration with Cookiebot setup — from 1 day.
Pricing is determined individually based on your specific tasks. We've been working with Squarespace for over 5 years and have completed more than 50 projects — we have experience with non-standard requirements. Get a consultation — we'll tell you how to improve your site without pain.