How to Safely Implement Code Injection in Your Website
Code injection allows you to enhance your site by adding HTML code and custom scripts to specific areas. Here's a comprehensive guide on how to use it effectively:
Before You Begin:
- JavaScript code must be enclosed within
<script>
tags - CSS code should be added to the Custom CSS Editor instead
- Payment pages don't support code injection
- Code may need to be disabled during site modifications
Adding Code to Injection Areas:
- Header Code
- Injected into the
<head>
tag on every page - Used for site-wide scripts and integrations
- Footer Code
- Added before the closing
</body>
tag - Ideal for analytics and tracking codes
- Lock Page Code
- Appears above the password field on protected pages
- Recommended to use Lock Screen panel instead for better customization
- Order Confirmation Page Code Available tags:
{orderId}- Order number{orderSubtotal}- Order subtotal{orderGrandTotal}- Total amount{customerEmailAddress}- Customer's email
- Order Status Page Code
- Uses same tags as Order Confirmation
- For one-time execution, wrap code in:
{.if firstPageView}
[your code here]
{.end}
Malicious code injection warning
Page-Specific Injection:
- Hover over page in Pages panel
- Click settings icon
- Select Advanced
- Add code to Page Header Code Injection
Cookie Banner Integration:
- Enable cookie banner in Cookies and Visitor Data panel
- Select Accept and Decline type
- Add necessary third-party integration code
- Save changes
Troubleshooting:
- Use "Disable scripts in preview" when making site changes
- Remove custom code temporarily if experiencing issues
- Test in private browsing window to view custom code effects
Best Practices:
- Keep CSS in Custom CSS Editor
- Test thoroughly before implementing
- Document all custom code
- Regularly review and update as needed
- Backup code before making changes
Related Articles
How to Transfer a Third-Party Domain Between Squarespace Sites
