Installing the Snippet

The A vs B snippet is a small script that runs on your site. It loads your experiment config, decides which variation each visitor sees, applies it, and tracks events. Installing it is two lines of HTML.

Where you've probably already seen this

Every new project takes you straight to a dedicated install screen right after you create it, the last step of setup: the same two-tag snippet shown below, with a live status that confirms itself the moment your site's first visit arrives. A fold-out panel there also offers one ready-made prompt for Claude Code, Cursor, or any AI coding assistant, filled in with your project's real key, so the assistant can install it for you. If you already pasted the tags there, or skipped it, this page has the same snippet and the same live status either way.

Get your snippet

Each project has its snippet ready to copy. In A vs B, open your project, go to Settings (the gear icon in the left sidebar), and click the Snippet tab. Copy the snippet shown there. It looks like this, but with your real key in place of YOUR_SNIPPET_KEY:

The Snippet tab in Project Settings, showing an 'Installed' status badge, the snippet with a Copy button, and a Global custom script (project.js) section. — Project Settings → Snippet: your snippet is ready to copy, with a live 'Installed' status once it's detected.

HTML

<script>window.avsb=window.avsb||{};window.avsb.q=window.avsb.q||[];window.avsb.ready=window.avsb.ready||function(f){window.avsb.q.push(f)};window.avsb.on=window.avsb.on||function(n,f){var t=['on',n,f];window.avsb.q.push(t);return function(){t[0]=null}};window.avsb.consent=window.avsb.consent||{set:function(s){window.avsb.q.push(['consent.set',s])},get:function(){return{}}};window.avsb.track=window.avsb.track||{};['event','segment','purchase','cart'].forEach(function(m){window.avsb.track[m]=window.avsb.track[m]||function(a,b){window.avsb.q.push(['track.'+m,a,b])}});(function(){window.avsb._t0=Date.now();window.avsb._df=fetch('https://cdn.avsb.cloud/YOUR_SNIPPET_KEY/datafile.json').catch(function(){});var d=document,e=d.documentElement,s=d.currentScript,a=s&&s.getAttribute('data-avsb-timeout'),t=a==null?3000:+a;if(!(t>0)||window.avsb.version)return;e.style.opacity='0';e.style.pointerEvents='none';window.avsb._t=setTimeout(function(){e.style.removeProperty('opacity');e.style.removeProperty('pointer-events')},t)})();</script><script src="https://cdn.avsb.cloud/snippet.js?id=YOUR_SNIPPET_KEY" data-avsb="YOUR_SNIPPET_KEY" async></script>

HTML9 lines

The first tag is a stub that defines avsb.ready, avsb.on and avsb.consent.set immediately, so a call to any of them elsewhere on your page is safely held even if it runs before the bundle has loaded. The second tag loads the bundle asynchronously.

Install it

Copy the snippet

From Settings → Snippet, click the copy button next to your snippet.

Open your site's main HTML template

The file with the global <head> that wraps every page, for example WordPress header.php, Next.js app/layout.tsx, a plain index.html, or Shopify theme.liquid.

Paste it high in the head

Place both tags inside <head>, as close to the opening tag as possible, so the stub and bundle load before visitors see the page.

Save and deploy

Deploy your change. A vs B can't detect the snippet until it's live on the URL you entered for the project.

Verify

Back in Settings → Snippet, the badge turns green and shows "Installed" once it's confirmed live. This updates on its own, no refresh needed: opening your own site once is usually enough.

Loading the snippet early prevents the "flash of original content", where the original page briefly shows before the variation is applied. See Anti-Flicker for more.

async vs no-async: the trade-off (advanced)

The default snippet includes async on the loader tag. The stub keeps early avsb.ready calls safe regardless of load order.

With async (default). The browser fetches the bundle in the background without blocking rendering. The trade-off is that visual experiments apply slightly later, which can cause a brief flicker above the fold.

Without async. The browser runs the bundle before drawing the rest of the page, for zero flicker on visual experiments. The cost is a brief pause while the bundle downloads. We keep it small on purpose: your site is served a build that carries only the parts your project uses, roughly 30 to 37 KB gzipped, each one under a size limit enforced at build time and served from a CDN. How brief the pause feels still depends on your visitor's own connection.

Our advice: use async (the default) unless you are running visual experiments that change above-the-fold content, in which case remove async from the loader tag and rely on the Anti-Flicker setup.

What happens next

With the snippet live, you're ready to build a test. Continue to Your first experiment.