Webflow

Run A/B tests on your Webflow site without writing any JavaScript. Add CADENCE with a single line in your project settings.

CADENCE supports two testing methods on Webflow:

• Visual Editor tests — make changes in the CADENCE dashboard, no Webflow Designer edits needed
• Attribute-based tests — duplicate sections in Webflow and tag them with custom attributes (great for layout or structural changes)

Step 1: Add the CADENCE Script

1. In Webflow: Site Settings → Custom Code → Head Code → paste the snippet below
2. Replace proj_XXXXXXXXXXXX with your actual Project ID
3. Click Save Changes
4. Publish your site (the code only takes effect after publishing)

The snippet looks like this (with your actual Project ID):

<!-- CADENCE A/B Testing -->
<script>
  window.CADENCE_CONFIG = {
    projectId: 'proj_XXXXXXXXXXXX',
    autoDiscover: true
  };
</script>
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" async></script>

Page-specific scripts

If you only want CADENCE on specific pages, you can add the script to individual pages instead:

1. Select the page in the Pages panel
2. Click the gear icon next to the page name
3. Scroll down to Custom Code and paste the script in the Head Code section

Step 2: Verify Installation

After publishing, open your live site (not the Webflow Designer preview):

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

You can also check the Network tab for a request to cadence.min.js (status 200), or go to your project Settings in the CADENCE dashboard and click Test Connection.

Step 3: Attribute-Based Testing (Webflow Pattern)

This is the recommended approach for Webflow. You duplicate a section in the Webflow Designer, make your variant changes, then let CADENCE automatically show the right version to each visitor.

How it works

1. Create your experiment in the CADENCE dashboard (e.g., “Hero Section Test”) with variants named “Control” and “Variant B”
2. In Webflow Designer, duplicate the section you want to test
3. Add custom attributes to each version (see below)
4. Set the duplicate's display to None in Webflow's Style panel
5. CADENCE automatically shows the correct variant and hides the other

Adding the attributes

Select the original section in Webflow Designer, go to Element Settings (gear icon), scroll to Custom Attributes, and add:

| Name | Value | |------|-------| | data-cadence-experiment | Your experiment name (e.g., Hero Section Test) | | data-cadence-variant | Control |

Then select the duplicate section and add:

| Name | Value | |------|-------| | data-cadence-experiment | Same experiment name (e.g., Hero Section Test) | | data-cadence-variant | Variant B |

Also set the duplicate section's Display to None in the Style panel (this is the default/initial state — CADENCE will show it when assigned).

Example HTML (what Webflow generates)

<!-- Control (visible by default) -->
<section data-cadence-experiment="Hero Section Test" data-cadence-variant="Control">
  <h1>Welcome to Our Product</h1>
  <button>Get Started</button>
</section>

<!-- Variant B (hidden by default, shown by CADENCE when assigned) -->
<section data-cadence-experiment="Hero Section Test" data-cadence-variant="Variant B" style="display:none">
  <h1>Try Our Product Free</h1>
  <button>Start Free Trial</button>
</section>

When CADENCE loads, it reads the attributes, checks which variant the visitor is assigned to, and shows only the matching section.

Step 4: Visual Editor Tests (Alternative)

1. Go to your project in the CADENCE dashboard
2. Click New Experiment
3. Set the Target URL to the Webflow page you want to test (e.g., https://yoursite.webflow.io/pricing)
4. Open the Visual Editor to make changes (swap headlines, change button colors, hide elements)
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.

CMS Collection pages

For Webflow CMS Collection pages (like blog posts or product pages), set the Target URL to a specific collection item. The Visual Editor works best with static pages, but CSS-based mutations (colors, fonts, visibility) will apply across all collection items that share the same layout.

Step 5: Track Conversions

Zero-code: HTML attributes

In the Webflow Designer, select any element and go to Element Settings (the gear icon). Under Custom Attributes, add:

| Name | Value | |------|-------| | data-cadence-goal | Your event name (e.g., signup-click) |

When a visitor clicks that element, CADENCE automatically tracks it as a conversion.

Zero-code: Dashboard rules

In the CADENCE dashboard, configure conversion rules on your experiment:

• URL match — track when visitors reach a specific page (e.g., /thank-you)
• Click selector — track when visitors click a specific element (e.g., #cta-button)

Adding custom attributes in Webflow

1. Select the element in the Designer
2. Open Element Settings (gear icon on the right panel)
3. Scroll to Custom Attributes
4. Click + to add a new attribute
5. Set Name to data-cadence-goal and Value to your event name

Anti-Flicker

If visitors briefly see the wrong variant before CADENCE loads (a “flash”), add this line before the CADENCE snippet in your Head Code:

<script>document.documentElement.style.visibility='hidden'</script>

CADENCE will automatically make the page visible again after assigning variants. If CADENCE fails to load, the page becomes visible after 2 seconds as a safety fallback.

Troubleshooting

Visitors see both variants at the same time

Make sure the non-control variant section has its Display set to None in Webflow's Style panel. The control should be visible by default, and all other variants should be hidden. CADENCE will show the correct one.

No exposures showing in the dashboard

Check that the data-cadence-experiment value matches the experiment name in CADENCE exactly (case-sensitive, including spaces). For example, “Hero Section Test” is not the same as “hero section test”.

Page flickers between variants on load

Add the anti-flicker script described above. This hides the page until CADENCE has assigned variants, preventing any visible flash.

Conversions not tracking

Verify the CSS selector matches the element on your published site. Open Chrome DevTools on your live site, press Ctrl+F (or Cmd+F) in the Elements panel, and search for the selector to confirm it finds the right element.

Script not loading after adding code

You must Publish your site after adding custom code. Changes to Project Settings > Custom Code don't take effect until you publish.

Visual Editor shows cross-origin warning

Your Webflow site and the CADENCE dashboard are on different domains, so the Visual Editor may not be able to select elements by clicking. Use manual CSS selectors instead. See Visual Editor > CORS.

Interactions or animations interfere with tests

Webflow Interactions can re-render elements after page load, potentially overriding visual mutations. If this happens, use CSS-only mutations (colors, fonts) rather than HTML replacements, or trigger your test after interactions complete using the code-based approach with Cadence.ready().

Custom domain vs webflow.io

CADENCE works on both your custom domain and .webflow.io staging domain. Set the Target URL to whichever domain you want to test on. If you switch domains, update the Target URL in your experiment settings.

What's Next

• Creating Tests — set up experiments from start to finish
• Tracking Events — advanced conversion tracking with JavaScript
• Reading Results — understanding your test data
• Visual Editor — make visual changes without code