Documentation

Variante lets you run A/B tests without a developer. Pick any element on your live site, and AI generates a better version — or build it yourself in the editor. Paste one snippet into your site — Variante handles traffic splitting, variant serving, and conversion tracking.

No deploy pipeline. No Git. No waiting for engineering. The entire experiment lifecycle lives in the Variante dashboard.

1. Install the snippet. Paste a single <script> tag into your site's <head>. Works with any framework: Next.js, WordPress, Shopify, plain HTML.
2. Pick an element. Use the built-in picker to select any component on your live site. It captures HTML, CSS, and framework context automatically — no extension needed.
3. AI generates Variant B. Review the proposal, tweak it in the built-in editor, or write it yourself — matching your existing styles.
4. Ship & track. The variant goes live instantly. Variante splits traffic 50/50, serves the right variant to each visitor, and tracks every conversion on your dashboard.

Add this snippet to the <head> of every page you want to test:

<!-- A/B Testing: universal snippet — paste in <head> on EVERY page -->
<link rel="preconnect" href="https://www.getvariante.com" crossorigin>
<style id="__ab_hide">html.__ab_pending{opacity:0!important}</style>
<script>document.documentElement.classList.add("__ab_pending");(function p(){if(window.__ab_pending_resolve)document.documentElement.classList.remove("__ab_pending");else setTimeout(p,50)})();setTimeout(function(){document.documentElement.classList.remove("__ab_pending")},10000)</script>
<script async src="https://www.getvariante.com/ab.js"</script>

Next.js App Router

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://www.getvariante.com" crossorigin />
        <style id="__ab_hide">{`html.__ab_pending{opacity:0!important}`}</style>
        <script dangerouslySetInnerHTML={{
          __html: `document.documentElement.classList.add("__ab_pending");(function p(){if(window.__ab_pending_resolve)document.documentElement.classList.remove("__ab_pending");else setTimeout(p,50)})();setTimeout(function(){document.documentElement.classList.remove("__ab_pending")},10000)`
        }} />
        <script async src="https://www.getvariante.com/ab.js"></script>
      </head>
      <body>{children}</body>
    </html>
  )
}

Next.js Pages Router

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="preconnect" href="https://www.getvariante.com" crossorigin />
        <style id="__ab_hide">{`html.__ab_pending{opacity:0!important}`}</style>
        <script dangerouslySetInnerHTML={{
          __html: `document.documentElement.classList.add("__ab_pending");(function p(){if(window.__ab_pending_resolve)document.documentElement.classList.remove("__ab_pending");else setTimeout(p,50)})();setTimeout(function(){document.documentElement.classList.remove("__ab_pending")},10000)`
        }} />
        <script async src="https://www.getvariante.com/ab.js"></script>
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}

Plain HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://www.getvariante.com" crossorigin>
  <style id="__ab_hide">html.__ab_pending{opacity:0!important}</style>
  <script>document.documentElement.classList.add("__ab_pending");(function p(){if(window.__ab_pending_resolve)document.documentElement.classList.remove("__ab_pending");else setTimeout(p,50)})();setTimeout(function(){document.documentElement.classList.remove("__ab_pending")},10000)</script>
  <script async src="https://www.getvariante.com/ab.js"</script>
</head>
<body><!-- your content --></body>
</html>

WordPress

Add the snippet via a header/footer plugin like WPCode or Insert Headers and Footers. Paste it into the <head> section.

Shopify

Go to Online Store → Themes → Edit code. Open theme.liquid and paste the snippet before the closing </head> tag.

The Figma plugin is a stats viewer, not a design tool. Open it in Figma, paste your API token from the dashboard, and see your running tests — visitors, conversions, and which variant is leading — without leaving the file you're working in.

1. Open the Variante plugin in Figma (Plugins → Variante).
2. Paste your API token (find it in Dashboard → Account Settings → API Token).
3. See your tests and their live stats, right inside Figma.

The element picker is built directly into the site snippet — no extra installation needed. When you start a test in the dashboard wizard, it opens your live site with the picker activated. Hover over any element to highlight it, click to capture its HTML, CSS, and context.

1. Click "+ New test" in the dashboard — enter your site URL and test name.
2. The wizard opens your live site. A banner at the top confirms picker mode is active.
3. Hover over the element you want to test — it highlights with a blue outline.
4. Click the element. The picker captures its HTML, CSS, framework info, and suggests conversion goals.
5. Return to the wizard — the captured element is ready for Variant B.

Once your variant is generated, you control the experiment from the dashboard:

• Start: Begins 50/50 traffic split. Each visitor is assigned deterministically and keeps the same variant across page views — cookieless by default, no storage on the visitor's device.
• Pause: Temporarily stops the experiment. All visitors see Variant A.
• Resume: Continues the experiment from where it left off.
• Pick winner: Manually declare a winner. All visitors are switched to the winning variant.

Previewing Both Variants

Because assignment is sticky, your own browser stays in the same group forever — so a running test can look like it only ever serves one variant. Add ?ab_variant=a or ?ab_variant=b to any page of your site to force a variant. A small label in the corner confirms which one you are looking at.

Preview views are never counted: no visitor, no conversion — even if you click the goal element. Your live numbers stay clean. The same links sit in each test's card menu in the dashboard under Preview A and Preview B.

Conversion Tracking

Variante tracks conversions via a simple JavaScript call. Add this wherever a conversion happens (button click, form submit, page view):

// Track a conversion for the currently running test
window.__ab_track_conversion()

Statistical Significance (Pro)

Pro plans include automatic significance analysis using a two-proportion z-test. When Variant B outperforms Variant A with 95% confidence, a winner is declared automatically. No manual number-crunching needed.

Do I need a developer to set this up?

No. The snippet is a one-time paste into your site's <head>. If you can edit your theme or layout file, you can install Variante. No build step, no npm, no pipeline.

Does it work with my framework?

Variante works with any framework that lets you add a <script> tag to <head>: Next.js, WordPress, Shopify, plain HTML, Vue, Svelte, Astro, and more. Webflow only on paid plans. Framer, Wix, and Squarespace don't support custom <head> tags.

What data does the snippet collect?

ab.js stores a random visitor ID in localStorage (not a cookie). No personal data, no IP addresses, no fingerprinting. Conversion events carry no PII — just a test ID and variant group.

How does AI variant generation work?

You pick an element on your site (built-in picker, no extension). The AI reads the original HTML/CSS and generates a variant that matches your existing code style and framework conventions — you can accept it, edit it, or write your own from scratch.

What happens when a winner is detected?

On Pro: Variante monitors statistical significance continuously. When B outperforms A at 95% confidence, a winner is declared and you're notified. On Free: you manually pick the winner from the dashboard.

Can I run multiple experiments at once?

Free: 1 active experiment. Pro: unlimited. Multiple experiments on the same page are isolated — each visitor gets a random variant per experiment.

Where is my data stored?

Supabase (Frankfurt, Germany). Vercel (us-east). No third-party analytics or CDNs. See our Privacy page for details.