/Docs

Quick Install

Installing the A vs B snippet takes one line of HTML. Copy your snippet tag from Project Settings, paste it into your website's <head>, and you are done.

The snippet tag

Your snippet tag is pre-generated in your project settings. It looks like this (with your real key in place of YOUR_SNIPPET_KEY):

Snippet tag (recommended — no async)
html
1<script
2 id="avsb"
3 src="https://cdn.avsb.cloud/snippet.js?id=YOUR_SNIPPET_KEY"
4></script>

To get your actual snippet tag, go to Project Settings → Snippet in the A vs B dashboard and click Copy.

Where to place it

Paste the snippet tag inside the <head> element of every page where you want experiments to run. The best position is immediately after the opening <head> tag, before any other scripts or stylesheets:

Recommended placement
html
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <!-- A vs B snippet — place first in head -->
5 <script
6 id="avsb"
7 src="https://cdn.avsb.cloud/snippet.js?id=YOUR_SNIPPET_KEY"
8 ></script>
9
10 <meta charset="UTF-8" />
11 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12 <title>My Website</title>
13 <!-- rest of your head content -->
14 </head>
15 <body>
16 <!-- page content -->
17 </body>
18</html>
Earlier is better
Placing the snippet as early as possible in the <head> gives it more time to load before the visitor sees the page. This reduces the chance of the visitor seeing the original version for a split second before the variation is applied. See Anti-Flicker for a full explanation.

Should you use the async attribute?

The default snippet tag omits async, and we recommend keeping it that way for most websites.

Without async (recommended)

Without async, the browser downloads and executes the snippet before continuing to parse the rest of the page. This means variations are applied before visitors see any content — zero flicker. The snippet is around 12 KB gzipped, so the blocking delay is typically under 50 ms and imperceptible.

With async

Adding async lets the browser download the snippet in the background without pausing page rendering. This keeps your Lighthouse score unaffected, but introduces a higher chance of flicker — visitors may briefly see the original content before the variation loads. On slow connections, experiments may activate late or not at all.

Our recommendation
Keep the snippet without async and place it as the very first script in your <head>. The tiny blocking delay is worth the guarantee of zero flicker and reliable experiment delivery. Only add async if your site has strict performance budgets that cannot tolerate any render-blocking scripts. See Installing the Snippet for the full breakdown.

The id=“avsb” attribute

The id="avsb" on the script tag is a marker that lets other scripts on the page (and the A vs B snippet itself) quickly locate the tag to read its configuration attributes. Do not change or remove this attribute.

After you paste it

Save your file and deploy your changes to production. Then go to Project Settings → Snippet in A vs B. The status indicator will turn green and show “Snippet detected” once the snippet has been confirmed live on your website.

Info
The snippet detection check makes a request from A vs B's servers to your website. If your website is behind a firewall, is a staging environment not publicly accessible, or has a Content Security Policy that blocks external connections, the check may not work. In that case, verify installation manually using browser DevTools — see Verifying Installation.