How to Add Custom Code with Code Injection: A Complete Guide
Custom Code Injection Guide
Add custom HTML and scripts to enhance your site's functionality through code injection. This feature is ideal for implementing live chat services, domain validation, and analytics tools.
Best Practices:
- Use code injection for scripts and HTML only
- Add CSS through the custom CSS editor instead
- Place JavaScript between
<script>
tags - Disable scripts while editing if needed
Code Injection Locations:
Header
- Injects code into the
<head>
tag - Applies to all site pages
Footer
- Injects code before the
</body>
tag - Appears on all pages
Lock Page
- Appears above password field
- Used for password-protected pages
Order Pages Available tags for order pages:
{orderId}{orderSubtotal}{orderSubtotalCents}{orderGrandTotal}{orderGrandTotalCents}{customerEmailAddress}
Migrate order confirmation code
Cookie Banner Integration:
- Enable cookie banner in settings
- Select Accept/Reject banner type
- Add integration code
- Save changes
Page-Specific Injection:
- Hover over page in Pages panel
- Click settings icon
- Select Advanced
- Add custom code
Troubleshooting:
- Disable scripts in preview mode if editing issues occur
- Type
/safe
at URL end to force disable scripts - Test custom code in incognito window
- Remove problematic code during troubleshooting
Important Notes:
- Checkout pages don't support code injection
- Ajax loading may affect CSS injection
- Blog post injection appears differently based on template
- Index landing pages don't display injected code
For advanced customization:
- Consider premium/business plans
- Consult Squarespace Experts
- Visit the Squarespace Forum for community support
Related Articles
How to Set Up a Third-Party Subdomain on Squarespace: Step-by-Step Guide
