Using code injection

Insert custom HTML or scripts in your site's pages.

Last updated January 31, 2025

You can use code injection to add HTML and scripts that enhance specific parts of your site. These might include live chat services, domain verification for custom email services, or site analytics.

Code injection isn't intended for adding content or styles. To add content to your site, visit Pages and content basics. To add custom CSS for styles, use the Custom CSS Editor.

Accessing this feature

Code injection is available in the Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans. To learn more, visit Choosing the right Squarespace plan.

Watch a video

Before you begin

Add code to code injection

To add custom code to code injection:

  1. Open the Code Injection panel.
  2. Add valid HTML or scripts into the appropriate Code Injection fields for the header, footer, lock page, order confirmation page, or order status page.
  3. After adding your code, click Save.

Header

Code added here is injected into the <head> tag on every page in your site.

Code added here is injected before the closing </body> tag on every page in your site.

If you add third-party integrations to your site using code injection (for example, Google Ads), that code may drop cookies on visitors’ browsers. If you enable the cookie banner on your site, you can then use code injection to change the behavior of these third-party integrations, depending on whether the visitor has consented to cookies or not.

Your visitors can provide their consent choices, if you complete the following steps:

  1. Enable your cookie banner by opening the Cookies & Visitor Data panel and switching on the toggle beside Cookie banner.
  2. Select the Opt in & out cookie banner type, which displays two customizable buttons for customers to accept or decline your site’s cookies.
  3. Click Save.
  4. Add the necessary code. Review the example below to learn more.

Using Google Ads as an example, if you’ve added Google Ads to your site using code injection, view this forum post for example code you can add to integrate your Google Ads code with the cookie banner.

If you’re using Google Analytics through our official integration, there's no need to add code in this field. After saving your measurement ID, enable your cookie banner.

Note

Consent mode is a feature provided by Google. To learn more, visit Google's documentation. Additionally, custom code modifications fall outside the scope of our support. You should consult with Google Ads if you require setup or troubleshooting support.

Lock page

The lock screen appears when a page or site is hidden behind a site-wide or page password. Code injected here displays above the lock screen's password field.

Although you can add code to this field, we recommend you use the Lock Screen panel to design your lock page instead. That way, you can add a background image or slideshow, adjust font styles, incorporate your logo, and more.

Order confirmation page

Code added here is injected into the order confirmation page that appears after a customer checks out with gift cards, memberships, and subscriptions.

There are six tags you can use to insert information specific to the customer. If a purchase is divided because it contains multiple fulfillment profiles, details will display for each order in the purchase.

  • {orderId} – The order number of the confirmed order
  • {orderSubtotal} – The subtotal of the confirmed order
  • {orderSubtotalCents} – The subtotal of the confirmed order, in cents
  • {orderGrandTotal} – The grand total of the confirmed order
  • {orderGrandTotalCents} – The grand total of the confirmed order, in cents
  • {customerEmailAddress} – The customer's email address, as they enter it in the "Your Email" section at checkout

Order status page

Code added here is injected into the order status page, which is the confirmation page that displays after a customer checks out with physical, download, and service products. Customers can also return to this page later to check their order status. 

There are six tags you can use to insert information specific to the customer. If a purchase is divided because it contains multiple fulfillment profiles, details will display for each order in the purchase.

  • {orderId} – The order number of the confirmed order
  • {orderSubtotal} – The subtotal of the confirmed order
  • {orderSubtotalCents} – The subtotal of the confirmed order, in cents
  • {orderGrandTotal} – The grand total of the confirmed order
  • {orderGrandTotalCents} – The grand total of the confirmed order, in cents
  • {customerEmailAddress} – The customer's email address, as they enter it in the "Your Email" section at checkout

Customers can visit the order status page repeatedly, which might trigger tracking scripts multiple times. To avoid counting the same customer twice with tracking scripts, place any scripts you only want to run on the first visit to the order status page after checkout between {.if firstPageView} and {.end} tags. For example:

{.if firstPageView}

Add the tracking scripts you want to run only after checkout here

{.end}

Add scripts you want to run on every visit here

Migrating your order confirmation page custom code

We updated the order confirmation page for physical, digital, and service products. Customers who buy these product types land on a page that displays the order status, its details, and the option to create a customer account.

If this banner displays in the code injection panel, it means you've added code injection to the original order confirmation page, and this update hasn't applied to your site. 

MigrateOrderConfirmationCode.png

To apply this update to your site and send shoppers to the new order confirmation page after checkout for digital, physical, and service products: 

  1. Copy the code in the order confirmation page field. 
  2. Paste it into the order status page field. 
  3. Click Save
  4. Click I have migrated my custom code.

Until you follow these steps, all shoppers will land on the original order confirmation page after checkout for all purchases.

Per-page code injection

You can also inject code into a specific page:

  1. Hover over the page in the Pages panel.
  2. Click the icon.
  3. Click Advanced.

Page Header Code Injection adds code to the <head> tag of that page.

In blog page settings, Post Blog Item Code Injection adds code to every blog post.

How code injection appears depends on your site's version.

Keep in mind:

  • We don't recommend using HTML in the Page Header Code Injection. If you do, the code won't appear if you turn off your site header's transparency.
  • Post Blog Item Code Injection appears below the post content.

Keep in mind:

  • Code injection won't appear on Index landing pages.
  • Depending on your template, Post Blog Item Code Injection appears above or below the post content.
  • In templates with the Grid/list Blog Page, the code displays on the blog landing page and not on individual posts.

Disable scripts in preview

Custom code can sometimes prevent you from securely editing your site. When helping you troubleshoot, we may ask you to disable scripts in preview. This means that you won’t see your custom code while logged in, but it won’t affect how your site appears to visitors.

You’ll see this message at the bottom of your site if your code is interfering:

We detected an error loading your site preview. This is usually caused by injected code.

To edit securely, click Disable Scripts in Preview at the bottom of your site. The message will change to Scripts have been disabled on your site preview. To view your custom code, open a new private or incognito window in your browser and enter your page’s URL.

If the disable scripts message doesn't appear automatically:

  1. Prompt the message to appear by typing /safe directly after /config at the end of your secure editing URL, then pressing Enter.
  2. If this doesn't work, check any areas where you've added custom code to temporarily remove it while troubleshooting.

After disabling your code, you may see an Enable Scripts in Preview? message. We don't recommend clicking this, as it may interfere with your ability to preview, edit, or run your site when you're logged in. It’s not possible to hide this message, but you’ll only see it when you’re logged in—it’s not visible to visitors.

Note

Custom code modifications fall outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Custom code can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.