Installation

By the end of this page, CADENCE will be installed on your website and you'll have confirmed it's working. This takes about 2 minutes.

What you need

  • A CADENCE account (sign up free)
  • Your Project ID (created during onboarding — find it in your project's Settings page, looks like proj_Ax8mK2pQr4nB)
  • Access to edit your website's HTML or code

Choose your platform

Pick the platform your website runs on. Each tab has step-by-step instructions for where to paste the CADENCE code.

WordPress

There are two ways to add CADENCE to WordPress. Pick whichever feels easier:

Option A: Use a plugin (no code editing)

  1. Install the Insert Headers and Footers plugin (by WPCode) from Plugins → Add New
  2. Go to Code Snippets → Header & Footer (or Settings → Insert Headers and Footers depending on the plugin version)
  3. Paste this single line in the Header section:
html
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" data-project="YOUR_PROJECT_ID" data-anti-flicker></script>
  1. Click Save

Option B: Edit the theme file directly

  1. Go to Appearance → Theme File Editor in your WordPress admin
  2. Select your active theme from the dropdown (top right)
  3. Find and click header.php in the file list on the right
  4. Look for the </head> tag — paste the script tag from above right before it
  5. Click Update File

Using a child theme?

If you're using a child theme, make sure you're editing the child theme's header.php, not the parent theme. Changes to the parent theme will be overwritten when it updates.

Check it worked

Open your WordPress site in a new tab. Right-click anywhere → Inspect → Console tab. Type Cadence and press Enter. You should see an object with methods like init, getVariant, and track.

For a complete walkthrough including WooCommerce conversions and troubleshooting, see the WordPress Guide.

How to verify CADENCE is installed

After adding the code to your site, here are three ways to confirm it's working:

Method 1: Browser console (fastest)

  1. Open your website
  2. Right-click anywhere → Inspect → go to the Console tab
  3. Type Cadence and press Enter
  4. You should see: Object { init: f, getVariant: f, track: f, ... }

If you see "Cadence is not defined", the script hasn't loaded. Check that:

  • The script tag is inside the <head> section
  • You've published or saved your changes
  • You hard-refreshed: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)

Method 2: Network tab

  1. Open your website
  2. Right-click → Inspect → go to the Network tab
  3. Refresh the page
  4. Look for a request to cadence.min.js — it should show status 200
  5. Look for a request to /api/sdk/p/.../config — this is the SDK loading your experiment settings

Method 3: CADENCE dashboard

  1. Go to your project Settings page
  2. Click Test Connection
  3. You should see Connected

Getting your Project ID

  1. Log in to the CADENCE dashboard
  2. Navigate to your workspace
  3. Select your project and go to Settings
  4. Copy the Project ID from the Quick Install tab

Your Project ID looks like proj_Ax8mK2pQr4nB and is always visible in project settings.

Project ID vs. SDK key

The Project ID (like proj_Ax8mK2pQr4nB) is the recommended way to connect your site. It's short, safe to display in HTML, and works with the zero-code script tag. The longer SDK key (64-character hex) is available under the Developer tab in Settings for advanced integrations.

Configuration options

The one-line script tag handles everything automatically. For advanced use, you can add optional data- attributes:

| Attribute | What it does | Default | |-----------|-------------|---------| | data-project | Your Project ID (required) | — | | data-user-id | Your user's ID for consistent variant assignment | Auto-generated and saved in browser | | data-api-url | Where to send data (only change if self-hosting) | https://cdn.softpath.co | | data-anti-flicker | Hide content until visual changes apply | Off |

html
<script
  src="https://cdn.softpath.co/sdk/v1/cadence.min.js"
  data-project="proj_Ax8mK2pQr4nB"
  data-user-id="user-123"
  data-anti-flicker
></script>

For the JavaScript API (developers), you can also pass config before the script tag loads:

html
<script>
  window.CADENCE_CONFIG = {
    projectId: 'your_project_id',
    userId: 'user-123',
    attributes: {
      plan: 'pro',
      country: 'US',
    },
  };
</script>
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js"></script>

User identification

By default, CADENCE generates a random ID for each visitor and saves it in the browser. This means the same person sees the same variant every time they visit — as long as they're on the same device and haven't cleared their browser data.

For logged-in users, pass your app's user ID so the same person gets the same experience across devices:

html
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" data-project="YOUR_PROJECT_ID" data-user-id="user_abc123"></script>

Or via window.CADENCE_CONFIG before the script tag:

html
<script>
  window.CADENCE_CONFIG = { projectId: 'YOUR_PROJECT_ID', userId: 'user_abc123' };
</script>
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js"></script>

Skip this for now

If you're testing on a marketing page where visitors aren't logged in, the default auto-generated ID works fine. You can add user identification later.

Preventing content flash (anti-flicker)

If your experiment changes anything visible on the page (button colors, text, layout), visitors will briefly see the original version before the variant loads. This "flash of original content" is distracting and can bias your results.

Always enable anti-flicker for visual experiments

Any experiment that modifies what visitors see should use anti-flicker. Without it, every visitor sees the control flash before their assigned variant appears. The examples on this page already include it.

Script tag — add data-anti-flicker:

html
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" data-project="YOUR_PROJECT_ID" data-anti-flicker></script>

npm / programmatic — call enableAntiFlicker() before getVariant():

typescript
cadence.enableAntiFlicker()    // Hides the page immediately
await cadence.ready()
cadence.getVariant('my-test')  // Page becomes visible after changes are applied

The page stays hidden until either the variant changes are applied or 2 seconds pass — whichever comes first. You can customize the timeout by passing milliseconds: enableAntiFlicker(3000) or data-anti-flicker-timeout="3000".

Troubleshooting installation

"Cadence is not defined" in the console

  • The script tag may be in the wrong location — it must be inside <head>
  • Check for typos in the script URL
  • An ad blocker might be blocking the request — try disabling it temporarily
  • Make sure you've saved/published your changes

Script loads but "apiKey is invalid"

  • Double-check the Project ID matches what's in your CADENCE dashboard → Settings
  • Make sure it starts with proj_ followed by 12 characters
  • If using a legacy SDK key, make sure the full 64-character key is included

No requests in the Network tab

  • The script might not be loading at all — check for console errors (red text)
  • Content Security Policy (CSP) might be blocking it — you may need to allow cdn.softpath.co in your site's CSP settings

For more issues, see the full Troubleshooting guide.

Google Tag Manager

If your team manages scripts through GTM, you can load CADENCE that way instead. GTM adds 200-500ms of loading delay, so we recommend the direct script tag above for above-the-fold experiments. GTM works well for below-the-fold tests and conversion tracking.

See the full GTM Integration Guide for setup instructions, anti-flicker handling, and troubleshooting.

Next steps