Complete Guide: Understanding Code Injection for Website Customization
Code injection allows you to enhance your site by adding custom HTML code and scripts to specific areas. Here's what you need to know:
Basic Usage
- Add HTML and scripts to enhance site functionality
- Common uses: live chat services, email verification, analytics tracking
- Not meant for content or styling (use Basic pages or CSS editor instead)
Before Implementation
- JavaScript must be enclosed in
<script>
tags - CSS should be added to CSS editor (not code injection)
- Code injection may need disabling during site edits
- Payment pages don't support code injection
- Ajax loading may affect CSS code functionality
Adding Code
- Open Code Injection panel
- Add valid code to appropriate sections:
- Header (inside
<head>
tag) - Footer (before closing
</body>
tag) - Page blocks
- Order confirmation page
- Order status page
- Header (inside
Cookie Banner Integration
- Enable cookie banner in Cookie and Visitor Data panel
- Select "Accept and Reject" option
- Add necessary integration code
- Save changes
Available Injection Areas
- Header
- Footer
- Lock screen
- Order confirmation page
- Order status page
- Individual pages
- Blog posts
Order Status Page Tags
{orderId}- Order number{orderSubtotal}- Order subtotal{orderSubtotalCents}- Subtotal in cents{orderGrandTotal}- Total amount{orderGrandTotalCents}- Total in cents{customerEmailAddress}- Customer email
Troubleshooting
- Use "Disable scripts in preview" when editing causes issues
- Test custom code in private/incognito window
- Remove problematic code temporarily while troubleshooting
- Consider consulting Squarespace Experts for complex implementations
Remember to always backup your code before making changes and test thoroughly in a safe environment before implementing on your live site.
Related Articles
How to Create a Contact Page: Step-by-Step Guide
