Squarespace

Run A/B tests on your Squarespace site using Code Injection. One line in your site settings gets you started.

Step 1: Add the CADENCE Script

  1. In your Squarespace dashboard, go to Settings > Advanced > Code Injection
  2. In the Header field, paste this single line:
html
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" data-project="YOUR_PROJECT_ID"></script>
  1. Click Save

Get your Project ID

Find your Project ID (like proj_Ax8mK2pQr4nB) on your project Settings page in the CADENCE dashboard, under the Quick Install tab.

Business plan or higher required

Code Injection is available on Squarespace Business and Commerce plans. If you're on a Personal plan, you'll need to upgrade to add custom scripts.

Page-specific scripts

To add CADENCE to a single page instead of your entire site:

  1. Open the page in the Squarespace editor
  2. Click the gear icon (Page Settings)
  3. Go to the Advanced tab
  4. Paste the script tag in the Page Header Code Injection field
  5. Click Save

Step 2: Verify Installation

Open your live Squarespace site in a new tab:

  1. Right-click anywhere on the page and select Inspect
  2. Go to the Console tab
  3. Type Cadence and press Enter
  4. You should see an object with methods like init, getVariant, and track

Use your live site

Code Injection doesn't run in the Squarespace editor preview. Always test on your published site.

You can also go to your project Settings in the CADENCE dashboard and click Test Connection.

Step 3: Create a Visual Test

  1. Go to your project in the CADENCE dashboard
  2. Click New Experiment
  3. Set the Target URL to the Squarespace page you want to test (e.g., https://yoursite.squarespace.com/pricing)
  4. Open the Visual Editor to make changes (swap headlines, change button colors, hide sections)
  5. Click Start when ready

CADENCE automatically detects when visitors land on the matching page, assigns them to a variant, and applies the visual changes.

Step 4: Track Conversions

Zero-code: Dashboard rules

The easiest way to track conversions on Squarespace:

  • URL match — track when visitors reach a specific page (e.g., a form confirmation page or /thank-you)
  • Click selector — track when visitors click a specific element (e.g., .header-actions .btn)

Zero-code: HTML attributes

Squarespace allows custom attributes on some elements through Code Blocks. Add a Code Block to your page with:

html
<a href="/signup" data-cadence-goal="signup-click" class="sqs-block-button-element">Sign Up Free</a>

For existing Squarespace buttons and form elements, use dashboard-configured click selector rules instead, since Squarespace's built-in blocks don't expose custom attributes directly.

Form submissions

To track Squarespace form submissions as conversions, set up a URL match rule targeting the form's confirmation page or redirect URL. In your form settings, set a custom redirect URL (e.g., /form-submitted), then create a URL match rule for that path.

Troubleshooting

Code Injection option not available

Code Injection requires a Squarespace Business plan or higher. Check your plan under Settings > Account & Billing.

Script loads but nothing happens

  • Make sure your experiment is in Running status in the CADENCE dashboard
  • Verify the Target URL matches the actual URL of your page (including or excluding www.)
  • Check that your custom domain is configured correctly in Squarespace

Visual Editor shows cross-origin warning

Your Squarespace site and the CADENCE dashboard are on different domains. Use manual CSS selectors instead of clicking elements. See Visual Editor > CORS.

Squarespace AJAX loading

Squarespace uses AJAX page loading (pages load without a full refresh). CADENCE handles this by running on initial page load. If you notice variants not applying on AJAX-navigated pages, add data-anti-flicker to ensure the SDK initializes before content renders, or configure your Squarespace site to disable AJAX loading under Design > Site Styles.

What's Next