Get up and running with Split

Getting started

Connect your Webflow site to Split in under two minutes. No copy-paste, no custom code, no developer required.

1. Sign up for Split

   Head to app.withsplit.com and create a free account with your email. Free accounts include one running test at a time, so you can try Split end-to-end before upgrading.

2. Connect your Webflow site

   From the dashboard, click Connect Webflow site. You'll be redirected to Webflow's OAuth authorize screen, where you pick the site you want to test on and approve Split. As soon as the connection completes, Split registers split.js as a Custom Code entry on your site automatically via Webflow's API - there's nothing to copy-paste, and the script is cached on a CDN so it adds roughly 8 KB to your page weight.

   

3. Publish your Webflow site

   Custom Code only ships to visitors once you publish. Hit Publish in the Webflow Designer and Split's script goes live on your production domain. You'll need to republish every time you create a new test or edit a variant - see the FAQ for why.

   You're set up. Now open the Webflow Designer and build your first test.

Creating your first A/B test

Tests are built inside the Webflow Designer using the Split Designer Extension. You pick an element, create a variant, and Split handles the rest.

1. Open the Split extension in the Designer

   Open your site in the Webflow Designer, click the Apps panel on the left, and launch Split. The extension opens in a side panel alongside the canvas.

   

2. Create a test

   In the Tests tab, click New test. Give it a readable name (e.g. Hero headline v1), a Split Test Key (e.g. hero-headline), optionally restrict it to a specific page URL pattern (e.g. /pricing*), and choose a traffic percentage. Traffic percentage controls what share of visitors are included in the test - visitors outside the bucket see the original.

   

3. Connect the original element as Variant A

   Open the Connect tab and select your new test. On the Webflow canvas, click the element you want to test (for example, your hero headline). In the extension, click Connect selected element as A. Split stores the element's Webflow ID and tags it as your control.

   ‍

   ‍

   Building with Lumos, MAST, or another component-driven framework? See Testing component instances for the component-specific flow.

   

4. Build and connect Variant B

   Duplicate the original element in Webflow, edit the copy or design however you like, then select the duplicate on the canvas and click Connect selected element as B. Both elements now live in your published HTML - Split removes the non-assigned one for each visitor before first paint.

   

   Tip: You can preview either variant in the canvas using the A/B toggle at the top of the Connect tab, so you can design and check both sides without publishing.

5. Launch the test

   Back in the Split dashboard, open the test and set its status to Running. Publish your Webflow site. Split's script picks up the new test on the next page load and begins deterministically assigning visitors to A or B. Same visitor always sees the same variant.

   

Creating a URL test

URL tests (sometimes called redirect tests) split traffic between two completely separate pages. Use them when you're testing entire layouts, full redesigns, or alternative checkout flows - anything where the change is bigger than swapping a single element.

URL tests are configured entirely in the Split dashboard. There's nothing to connect inside the Designer Extension because the variants are different pages, not different elements - split.js handles the redirect for you before the page renders.

1. Create the test in the dashboard

   From app.withsplit.com, click New test and choose URL test. Fill in:

   ‍

   ‍

   • Test name - a readable label (e.g. Pricing page redesign)
   • Test ID - the machine key used in tracking events (e.g. pricing-redesign)
   • Source URL - the page visitors land on, where the assignment is made (e.g. /pricing). Wildcards are supported (e.g. /pricing*)
   • Variant B redirect URL - where visitors assigned to B get sent (e.g. /pricing-v2)
   • Traffic percentage - share of visitors included in the test (default 100%)
   

2. Build Variant B as a separate Webflow page

   The redirect URL needs to point to a real, published page. Build it in Webflow as you normally would - duplicate the source page, edit the layout however you like, and publish to the same domain. Variant A stays on the source URL with no changes.

   Same-origin only. Both URLs must live on the same domain. Cross-domain redirects are blocked - they'd break visitor identity (different localStorage per origin) and most likely your analytics too.

3. Publish your Webflow site and launch the test

   Set the test status to Running in the dashboard, then publish your site. On the next visit to the source URL, split.js picks up the test, deterministically assigns the visitor to A or B, and either lets the page render (A) or calls location.replace() to send them to the redirect URL (B) before the page paints. Same visitor always lands on the same variant on repeat visits.

4. Open the Designer Extension (optional)

   

   If you open Split's Connect tab while a URL test is selected, you'll see an info notice instead of the usual element-connect controls:

   URL redirect test. Variants are separate pages - split.js redirects visitors automatically. No elements to connect in the Designer.

   You can still edit the redirect URL or traffic percentage from the test detail page in the dashboard at any time.

Creating a multivariate test

Multivariate tests (MVT) test multiple changes at once across multiple factors, each with its own levels. Split tries every combination and tells you which level of each factor performs best - so you can land winning copy and a winning layout in a single test instead of running them sequentially

A simple example: testing a hero Headline (3 levels) and a CTA Button (2 levels) gives you 3 × 2 = 6 combinations. Split's stats engine ranks each factor independently and recommends the winning level per factor.

1. Create the test in the dashboard

   From app.withsplit.com, click New test and choose Multivariate. Fill in name, test ID, and an optional page URL filter, then define your factors and levels:

   ‍

   ‍

   • Factor - the thing you're varying (e.g. Headline, CTA Button, Hero image)
   • Levels - the variations of that factor. Level 0 is always the control; add as many alternatives as you like

   Choose your factorial type:

   ‍

   ‍

   • Full factorial - tests every combination (2 × 2 = 4, 3 × 2 = 6, 3 × 3 × 3 = 27). More accurate per-factor data, more traffic needed
   • Fractional factorial - tests an orthogonal subset (3 × 3 × 3 collapses to 9 combinations). Good when you have many factors but not enormous traffic
   

   Start small. 2 factors with 2 levels each (4 combinations) is the recommended starting point - the dashboard shows an estimate like ~30 days to 100 visitors per combination based on your current traffic so you can plan for it.

2. Connect each level to an element in the Designer Extension

   

   Open Split in the Webflow Designer and switch to the Connect tab. With your MVT test selected you'll see a factor/level matrix - a row per factor with a dropdown of its levels. For each level (including the control):

   ‍

   ‍

   • Select the level from the dropdown
   • Click the element on the Webflow canvas that represents that level
   • Click Connect

   Split tags the element with data-split-factor and data-split-level attributes. Repeat for every level of every factor. Building with Lumos, MAST, or another component framework? Connecting component instances works the same way - see Testing component instances.

3. Publish and launch

   Set the test to Running in the dashboard and publish your Webflow site. On each page load, split.js hashes the visitor ID into a combination, removes elements that don't match the assigned levels (so the visitor only ever sees one combination), and tracks impressions and goals against the combination ID. Same deterministic assignment as A/B - same visitor sees the same combination on every visit.

Testing component instances

Connect Webflow component instances directly to A/B tests, multivariate tests, URL tests, and conversion goals - no Div Block wrapper required. This is the flow to use if your site is built with Lumos, MAST, or any other component-driven framework.

1. Select the component instance on the canvas

   

   Open your site in the Webflow Designer and click the component instance you want to test. Split's panel detects it as a ComponentInstance and updates the Connect tab accordingly. Nested components are fine - select the outermost instance you want to vary.

2. Pick your test or goal in the Split panel

   

   Pick your test or goal in the Split panelSame Connect tab as the element-based flow. Pick the test (A/B, MVT, or URL) or expand the goals section, then click Connect. Each test type binds a different combination of props on the component:

   ‍

   ‍

   • ‍A/B test - adds splitTest + splitVariant‍
   • Multivariate test - adds splitTest + splitFactor + splitLevel‍
   • URL test - adds splitTest + splitVariant (Split's runtime handles the redirect)‍
   • Goal element - adds splitGoal

3. Confirm the first-time setup modal

   

   The first time you connect any instance of a given component, Split shows a confirmation modal explaining exactly what it's about to add to the component definition. For an A/B test it reads:

   Set up Split A/B test on "ComponentName"? Split will add splitTest (Split - Test ID group) and splitVariant (Split - A/B Variant group) to this component, and bind them to data-split-* attributes on the component root. They appear in the Webflow Components panel and are reused for any future Split tests on instances of this component. You can remove them anytime from the Properties panel.

   Click Set up component to confirm. Reconnecting on a component that's already set up reuses the existing props - no duplicates, no extra modal.

4. Done - props appear in the Components panel

   Open the component in Webflow's Components panel and you'll see the new props grouped under clearly named headings:

   ‍

   ‍

   • Split - Test ID - holds splitTest
   • Split - A/B Variant - holds splitVariant (A/B and URL tests)
   • Split - Multi Variant - holds splitFactor and splitLevel (MVT tests)
   • Split - Goal - holds splitGoal (goal elements)

   Each connected instance carries its own per-instance values, so different instances of the same component can run completely independent tests. When you publish, every connected instance renders with the correct data-split-* attributes baked into the HTML, and split.js reads them via standard DOM APIs - no script changes, no extra setup.

   

Setting up goals

Goals are the conversion events Split counts per variant. Add as many as you like per test — one is marked Primary and drives the winner banner.

You can add goals from the Connect tab in the Designer Extension (the fastest way, since you can click elements directly on the canvas) or from the test detail page on the dashboard.

Reading results

Split's dashboard shows you exactly what's happening in each variant and when it's safe to call a winner.

Frequently asked questions

The questions we hear most from new Split users. If yours isn't answered here, email us at support@withsplit.com.

Contact

Stuck on something, hit a bug, or want to request a feature? We're a small team and we read every message.