A Guide to Code Injection: Custom Code Implementation for Websites
Code injection lets you enhance your site by adding custom HTML and scripts to specific areas. Here's how to use it effectively:
Basic Usage
Code injection allows you to add:
- Live chat services
- Domain verification code
- Analytics tracking
- Third-party integrations
Note: Code injection is not for content or styling - use Pages for content and CSS Editor for styles.
Implementation Guidelines
- JavaScript code must be enclosed in
<script>
tags - CSS code should go in the CSS Editor (if using injection, enclose in
<style>
tags) - Ajax loading may affect CSS in code injection
- Checkout pages don't support code injection
Adding Code
- Access the Code Injection panel
- Add HTML/scripts to appropriate sections:
- Header (inside
<head>
tag) - Footer (before closing
</body>
tag) - Page-specific areas
- Order confirmation/status pages
- Header (inside
- Click Save
Cookie Banner Integration
For third-party integrations:
- Enable Cookie Banner in Visitor Cookie and Data panel
- Select "Accept and Reject" banner type
- Modify integration code to respect visitor consent
Available Injection Areas
- Header
- Footer
- Lock Screen
- Order Confirmation Page
- Order Status Page
- Page-specific locations
Squarespace Migration Notification
Order Status Tags
Use these tags to display order information:
{orderId}{orderSubtotal}{orderSubtotalCents}{orderGrandTotal}{orderGrandTotalCents}{customerEmailAddress}
Troubleshooting
If code causes editing issues:
- Use the "Disable scripts in preview" option
- Test in incognito/private window
- Add "/safe" to your editing URL if needed
For best results, follow official documentation and consider consulting a Squarespace Expert for complex implementations.
Related Articles
How to Preview and Optimize Your Mobile Homepage in Squarespace 7.0
