How to add JavaScript to Squarespace

You can add JavaScript to Squarespace via

  • Site wide Code Injection (Header/Footer): Code will run on all pages. But if you target a specific ID, it will only affect the element with that ID. There is also an area here to insert code for Lock Page and Order Confirmation Page
  • Page Header Code Injection: Code will run on that page only
  • Code Block: Code will run on All pages (Site Footer Code Block) or One page (Page Content Code Block)
  • Markdown Block: Similar Code Block, but it won’t work properly in all cases.

#1. Code Injection Header/Footer

The code here will run on All Pages. So if your JavaScript code affects 1 Page only, you can add it to the Page Header to improve site speed.

You can access Website Tools (under Not Linked)

Click Code Injection

Choose Header/Footer.

#2. Page Header Code Injection

Code will run on the page where you added code only.

Hover the page where you want to add JavaScript code > Click the Gear icon

Enter the code in the Advanced

#3. Code Block

If you use Code Block in the Site Footer, code will run on All Pages.

If you use Code Block in Page Content, code will run on that page only

Click ADD BLOCK

image

Choose Code


Something like this

#4. Markdown Block

  • If you use Markdown Block in the Site Footer, the code will run on All Pages
  • If you use Markdown Block in Page Content, code will run on that page only
  • If you use Personal Plan and it doesn’t support Code Injection, you can add JavaScript code to Markdown Block.
  • I’ve also noticed that if you declare JavaScript code via the src URL, the code usually works fine in almost all cases.

To add a Markdown Block, you can choose ADD BLOCK

image

then choose Markdown

like this

#5. If you want to add JavaScript code to the LOCK PAGE or Order Confirmation Page , you can open Code Injection > Scroll down to these boxes.