How to Add Custom Code Using Code Injection: A Complete Guide
Code injection allows you to enhance your site by adding HTML and custom scripts to specific page areas. Here's everything you need to know about implementing it effectively:
Basic Usage
- Add HTML and scripts for services like live chat, domain verification, or analytics
- Not intended for content or styling (use Pages and Content or Custom CSS Editor instead)
- JavaScript must be wrapped in
<script>
tags - CSS should be added to Custom CSS Editor, but if needed in injection, wrap in
<style>
tags
Key Injection Areas
Header:
- Injected into
<head>
tag on all pages - Affects entire site
Footer:
- Inserted before closing
</body>
tag - Appears on all pages
Lock Page:
- Appears above password field on protected pages
- Best to use lock screen panel for design elements
Order Pages:
- Confirmation page: For gift cards, memberships, and subscriptions
- Status page: For physical, downloadable, or service products
Available Order Tags:
{orderId}: Order number{orderSubtotal}: Order subtotal{orderSubtotalCents}: Subtotal in cents{orderGrandTotal}: Order total{orderGrandTotalCents}: Total in cents{customerEmailAddress}: Customer's email
Page-Specific Injection:
- Hover over page in Pages panel
- Click settings icon
- Select Advanced
- Add code to page header or content area
Important Notes:
- Disable scripts in preview if they interfere with editing
- Test code in incognito window to see actual implementation
- Checkout pages don't support custom code
- Blog post injection appears differently based on template
- Consider cookie banner integration for third-party scripts
- Ajax loading may affect CSS in code injection
For best results, follow site-building best practices and consider consulting with a Squarespace Expert for complex implementations.
Related Articles
How to Create a Contact Page: Step-by-Step Guide
