/Docs

Snippet Settings

The Snippet tab is your central hub for everything related to the A vs B JavaScript on your website. Here you can copy your project's script tag, check whether the snippet is successfully detected on your live site, and write global JavaScript that runs as part of every experiment.

Accessing the Snippet tab

Open your project, click the gear icon in the left sidebar to open Project Settings, then click the Snippet tab.

Section 1: Install Snippet

Your script tag

At the top of the Snippet tab you will find your project's unique <script> tag. It looks like this:

Your project's snippet tag
html
1<script
2  id="avsb"
3  src="https://cdn.avsb.cloud/snippet.js?id=YOUR_SNIPPET_KEY"
4></script>

The YOUR_SNIPPET_KEYpart is replaced with your actual project key — a unique identifier that tells the A vs B network which project's experiments to load. Click the Copy button next to the code to copy the full tag to your clipboard, then paste it into the <head>section of your website's HTML.

Place the tag as early as possible
Add the script tag right after the opening <head> tag. The earlier the snippet loads, the less chance there is of visitors briefly seeing the original version before a variation is applied. See Anti-Flicker for more detail on preventing this flicker effect.

Snippet detection badge

Next to your script tag is a status badge that indicates whether A vs B has detected the snippet running on the domain you configured for this project:

  • Installed (green) — A vs B has successfully contacted the snippet on your website. Experiments can run. The badge shows the last time the snippet was detected.
  • Not detected(gray) — A vs B has not yet confirmed that the snippet is live at your project's domain. This can mean the snippet has not been installed yet, or it was installed but the changes have not been deployed to the live URL.

How detection works

Each time the snippet loads on your website, it sends a small "heartbeat" signal back to A vs B along with your project key. A vs B records this signal and updates the detection badge to green. Detection checks happen passively — there is no need for you to trigger a manual check.

After you install the snippet and deploy your site, the badge may take up to a minute to turn green. If it has been more than five minutes and the badge is still gray, check that:

  • The script tag is inside the <head> element
  • The domain in General Settings matches your deployed URL exactly
  • Your deployment has finished and the live page includes the updated HTML
  • No browser extension or firewall is blocking requests to cdn.avsb.cloud

Section 2: Global Custom Script (Project JS)

What is Project JS?

Project JS is a block of JavaScript (or TypeScript) that you can write once and have it run automatically before every experiment in this project executes its variation code. It is designed for setup logic that all experiments share — things like defining helper functions, setting global variables, or initializing a third-party SDK that your variation code depends on.

Common uses for Project JS include:

  • Defining a shared utility library your variations call into
  • Setting up event tracking wrappers
  • Fetching feature flags or user attributes that experiment conditions need
  • Initializing animation or UI libraries used across multiple experiments

Editing Project JS

Click Edit in the Project JS section to open the Monaco code editor — the same editor used in the Visual Experiment Builder. Use the language selector above the editor to choose between JavaScript and TypeScript. The editor supports syntax highlighting, auto-completion, and bracket matching.

When TypeScript is selected, the editor provides full autocomplete for the window.avsb API — including methods like onEvent, track.event(), getVariation(), and others — so you get inline documentation and type safety as you write. TypeScript is compiled to JavaScript at publish time, so there is no runtime cost.

Your edits are saved as a draft automatically as you type. A draft is private — it is not yet deployed to your live website. This lets you iterate on your script without affecting running experiments.

Draft and publish workflow

Project JS follows the same draft/publish workflow as experiment variations. The status badge next to the editor shows the current state:

  • Published (green) — the version in the editor is live. All experiments in this project are using this script.
  • Unpublished changes (yellow) — you have made edits that have not yet been published. Your live site is still running the previous version.
  • No code (gray) — no Project JS has been written or published yet. This is the default for new projects.

When you are ready to deploy your script to your live experiments, click Publish. The updated script will be included in the next experiment execution cycle.

Publishing affects all running experiments immediately
When you publish Project JS, the new script version is used by all running experiments in the project from that point forward. Test your changes carefully in a staging project before publishing to production.

Local IDE development

If you prefer writing project scripts in your own editor or IDE, you can use the A vs B CLI to pull the script to a local file, edit it locally with full IDE support, and push it back:

Pull project script with the CLI
bash
1avsb project pull PRJ-<id>

This downloads your current draft as project.js or project.ts (depending on the language you selected). After editing locally, push the file back with avsb project push PRJ-<id>. See the CLI reference for full details.

How Project JS is executed

For a detailed explanation of when Project JS runs relative to variation code, global scripts, and metrics, see How Experiments Execute › Project JavaScript.