Squarespace JavaScript Not Working

The AJAX Navigation Problem

What Happens

Squarespace uses AJAX to load page content without full page reloads. When a visitor clicks a navigation link, only the page content area updates - the header, footer, and scripts in Code Injection do not reload. Scripts that run on DOMContentLoaded or window.onload only fire on the initial page load, not on subsequent AJAX navigations.

Symptoms

Your script works on the first page a visitor loads but stops working when they navigate to another page. Refreshing the page makes it work again - until the next navigation. Third-party widgets appear on the initial page but disappear on subsequent pages.

The Fix

Wrap your script in an event listener that fires on both initial page load and AJAX navigation. Squarespace dispatches events when AJAX navigation completes. Use the MutationObserver approach or listen for Squarespace's specific navigation events to re-initialize your script after each page change. For script implementation, our guide to Squarespace custom scripts covers AJAX-compatible patterns.

Common JavaScript Issues and Fixes

Script Not Executing at All

If your script does nothing on any page, check: the Code Injection field is correct (header vs. footer), the script syntax is valid (check browser console for errors), the Code Block is set to HTML mode (not Markdown), your Squarespace plan supports Code Injection (Business or above), and no browser extension is blocking the script (test in incognito).

Open the browser console (F12 > Console tab) and look for JavaScript errors. Red error messages indicate syntax problems, missing references, or blocked resources. The error message usually tells you exactly what is wrong.

Script Works in Preview but Not on Published Site

The Squarespace editor loads additional scripts that may provide dependencies your script needs. If your script works in preview but not on the published site, it may depend on a library (like jQuery) that the editor loads but the published site does not. Load required dependencies explicitly in your Code Injection before your script.

Script Loads but Widget Does Not Appear

If a third-party widget script loads (no console errors) but the widget does not render, the widget may be targeting an HTML element that does not exist yet. AJAX navigation changes the page content after the script initializes. Re-initialize the widget after each navigation. Also check if the widget targets a specific container ID that exists on one page but not others.

Script Conflicts with Squarespace JavaScript

If your script uses a library that Squarespace also loads (like jQuery), version conflicts can cause errors. Check the console for "$ is not a function" or similar errors. Use jQuery's noConflict mode or load your library with a different variable name. Better yet, use vanilla JavaScript to avoid dependency conflicts entirely. For code management, our guide to custom code injection on Squarespace covers safe script implementation.

Header vs. Footer Code Injection

When to Use Header

Place scripts in the header when they must execute before the page content renders - analytics tracking (Google Analytics, GTM), custom font imports, and meta tags. Always use the async or defer attribute to prevent render-blocking.

When to Use Footer

Place scripts in the footer when they interact with page content - chat widgets, animations, DOM manipulation, and any script that targets HTML elements. Footer scripts execute after the page content loads, ensuring the elements they target exist. Most scripts belong in the footer.

Common Mistake: Script in Wrong Location

A script that manipulates DOM elements (changes text, adds classes, hides elements) placed in the header runs before those elements exist - so it does nothing. Move it to the footer. Conversely, a tracking script in the footer may miss the initial page load event - move it to the header with async.

Code Block JavaScript Issues

Code Block Mode

Code Blocks have a display mode toggle at the bottom - HTML and Markdown. JavaScript only works in HTML mode. If your script is not executing in a Code Block, check the mode toggle. Markdown mode strips or alters script tags.

Code Block vs. Code Injection

Code Block scripts run only on the page where the block is placed. Code Injection scripts run on every page. If you need a script on one page, use a Code Block. If you need it site-wide, use Code Injection. Putting a site-wide script in a Code Block means it only works on one page. For the distinction, our guide to Squarespace Code Blocks covers when to use each method.

Debugging JavaScript on Squarespace

Browser Console

Open the browser console (F12 > Console tab) on the page where the script should work. Look for red error messages. Common errors: Uncaught ReferenceError (variable or function not found), Uncaught TypeError (calling a method on undefined), SyntaxError (typo in code), and Mixed Content (loading HTTP resource on HTTPS page).

Network Tab

Open the Network tab (F12 > Network) and check if external scripts are loading. Filter by "JS" to see JavaScript files. Failed requests show in red. A 404 means the script URL is wrong. A blocked request means a browser extension or CSP is preventing it.

Console.log for Testing

Add console.log('Script loaded') at the beginning of your script to verify it executes. If the message appears in the console, the script runs - the issue is in the script logic. If it does not appear, the script is not executing at all - check placement and syntax.

Troubleshooting Process

1. Check the console. Open F12 > Console and look for error messages.

2. Test in incognito. Browser extensions block scripts. Incognito disables them.

3. Check the injection location. Header, footer, Code Block, or page-specific - is the script in the right place?

4. Check for AJAX issues. Does the script work on first load but break on navigation? Add AJAX-compatible initialization.

5. Check dependencies. Does the script require a library (jQuery, etc.) that is not loaded? Add the dependency explicitly.

6. Check the Code Block mode. Is it set to HTML, not Markdown?

7. Verify your plan. Code Injection requires a Business plan. For CSS alternatives that do not need JavaScript, our guide to adding custom CSS to Squarespace covers visual effects achievable without scripts. For design strategies, our Squarespace design tips guide covers design approaches that minimize script dependency.

Make Your JavaScript Work Reliably on Squarespace

JavaScript on Squarespace works - but it requires understanding the platform's AJAX navigation, choosing the right injection location, and handling browser-specific behaviors. The console is your best friend for debugging. Incognito mode is your fastest diagnostic tool. And AJAX-compatible initialization is the fix for the most common failure pattern.

Check the console first. Fix errors one at a time. Test after every change. Most JavaScript issues resolve in minutes once you identify the specific cause.