How to Add Custom Code Using Site Injection Features
Code injection allows you to enhance your site by adding custom HTML and scripts to specific page sections. Here's what you need to know:
Key Points:
- Use code injection for adding live chat services, domain verification, or site analytics
- All JavaScript must be wrapped in tags
- CSS should be added to the Custom CSS Editor instead of code injection
- Checkout pages don't support code injection
Available Injection Points:
Header:
- Injects into tag on every page
- Best for site-wide scripts and meta tags
Footer:
- Injects before closing tag
- Ideal for tracking codes and third-party widgets
Lock Page:
- Displays above password field on protected pages
- Recommended to use Lock Screen panel instead for better customization
Order Confirmation Page:
- Appears after checkout for gift cards, memberships, and subscriptions
- Supports customer-specific tags like {orderId} and {orderGrandTotal}
Order Status Page:
- Shows after checkout for physical, digital, and service products
- Includes same tags as confirmation page
- Use {.if firstPageView} to prevent duplicate tracking
Per-Page Injection:
- Add code to specific pages via Pages panel > Advanced
- Blog post injection appears below post content
- Not available on Index landing pages
Cookie Banner Integration:
- Enable cookie banner in Cookies & Visitor Data panel
- Select "Opt in & out" type
- Add conditional code based on visitor consent
Gray box with custom Instagram link
Important Notes:
- Disable scripts in preview mode if editing issues occur
- Follow best practices for custom code implementation
- Consider hiring experts for complex customizations
- Test thoroughly before deploying to live site
Related Articles
How to Report Malware on Squarespace Developer Platform: FAQ Guide
