Skip to content

Documentation

Everything you need to run A/B tests without a developer.

What is Variante?

Variante lets designers run A/B tests without a developer. Pick any element on your live site, redesign it in Figma, and AI generates the variant code. 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 between your browser, Figma, and the Variante dashboard.

How it works

  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. Redesign in Figma. Select your replacement design in the Figma plugin. AI reads both sides and writes Variant B — pixel-perfect, responsive, 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.

Installation

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" integrity="sha384-UWQNoAlUdBZpCeh5Fdi6Wrqdp6Br23/hcRLvJS8N2mUFO03X2S0mdC3+LzwiBSZW" crossorigin="anonymous"></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" integrity="sha384-UWQNoAlUdBZpCeh5Fdi6Wrqdp6Br23/hcRLvJS8N2mUFO03X2S0mdC3+LzwiBSZW" crossorigin="anonymous"></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" integrity="sha384-UWQNoAlUdBZpCeh5Fdi6Wrqdp6Br23/hcRLvJS8N2mUFO03X2S0mdC3+LzwiBSZW" crossorigin="anonymous"></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" integrity="sha384-UWQNoAlUdBZpCeh5Fdi6Wrqdp6Br23/hcRLvJS8N2mUFO03X2S0mdC3+LzwiBSZW" crossorigin="anonymous"></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.

Figma Plugin

The Figma plugin is where you create variants. Open it in Figma, paste your API token from the dashboard, and select the frame or component you want to use as Variant B.

  1. Open the Variante plugin in Figma (Plugins → Variante).
  2. Paste your API token (find it in your dashboard under "Plugin token").
  3. Click "+ New test" in the dashboard to start a new experiment.
  4. Select your Variant B design in Figma — the plugin captures it and sends it to Variante.
  5. AI generates the variant code. It appears in your dashboard within seconds.

Note: The plugin only handles creation. Results, analytics, and test management live in the web dashboard.

Element Picker

The element picker is built directly into the site snippet — no extra installation needed. When you start a test from the Figma plugin, 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. Start a test in the Figma plugin — enter your site URL and test name.
  2. The plugin 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 Figma — the captured element is ready for you to design Variant B.

No extension needed: The picker runs directly from your snippet. Element data is only sent when you explicitly click an element. No data is collected in the background.

Running Experiments

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

  • Start: Begins 50/50 traffic split. Visitors are assigned randomly and stay in their variant group (stored in localStorage).
  • 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.

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.

Pricing

Free

0 €

Forever free. No credit card.

  • · 1 active experiment
  • · AI variant generation
  • · Conversion tracking
  • · "Powered by Variante" badge

Pro

35 €/mo

Everything in Free, plus:

  • · Unlimited experiments
  • · Statistical significance analysis
  • · Auto-winner detection
  • · No branding on site
  • · Priority support

FAQ

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) and select a replacement design in Figma. The AI reads the original HTML/CSS and your Figma design, then generates a pixel-perfect variant that matches your existing code style and framework conventions.
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.