Website Code Injection Guide: How to Add Custom HTML and Scripts
Code injection allows you to enhance your website by adding custom HTML and scripts to specific areas. Here's what you need to know:
Key Locations for Code Injection:
- Header: Adds code to the
<head>
tag on all pages - Footer: Injects code before the closing
</body>
tag - Lock Page: Appears above password fields
- Order Confirmation Page: Shows after gift card/subscription purchases
- Order Status Page: Displays after physical/digital product purchases
Important Guidelines:
- Use code injection for scripts, not content or styles
- Add JavaScript between
<script>
tags - Place CSS in the custom CSS editor instead
- Disable scripts while editing if needed
- Ajax loading may affect CSS functionality
- Checkout pages don't support code injection
Page-Specific Injection:
- Access through Pages panel > Advanced
- Available for individual pages and blog posts
- Location varies by template version
Order Tracking Tags:
{orderId}
{orderSubtotal}
{orderSubtotalCents}
{orderGrandTotal}
{orderGrandTotalCents}
{customerEmailAddress}
Cookie Banner Integration:
- Enable cookie banner in settings
- Select Accept/Reject options
- Add compatible tracking code
- Save changes
Migrate order confirmation code
Troubleshooting:
- Disable scripts in preview if editing issues occur
- Test in incognito window to see custom code
- Remove problematic code temporarily during troubleshooting
- Add "/safe" to URL if needed
For custom code development:
- Follow external customization guidelines
- Consider hiring a certified expert
- Visit community forums for support
- Explore premium plans for advanced features
Related Articles
Squarespace API Keys: How to Set Up, Manage & Troubleshoot API Integration
