Getting Started3 min read

Quick Start

Drop the Otter A/B snippet into your site and start running tests.

Quick Start

Add the Otter A/B snippet to your site, verify it loaded, and you're ready to launch your first test in minutes.

Otter A/B runs as a single JavaScript file that you load in the head of every page on your site. Once it's there, the SDK fetches the visitor's active tests, assigns them to variants deterministically, applies any DOM changes the variants require, and tracks conversions back to the right variant — all without you writing a single line of application code.

The snippet below ships with an inline anti-flicker style that hides the page body (opacity: 0) until variants are resolved. That removes the “flash of original content” that visitors usually see with other A/B testing tools, and a 3 second failsafe guarantees the page still becomes visible if the SDK ever fails to load.

<!-- Otter A/B Testing -->
<style id="optimo-hide">body{opacity:0 !important}</style>
<script src="https://www.otterab.com/sdk/optimo.js"
  key="YOUR_API_KEY" async></script>

Step-by-step installation

  1. 1

    Grab your project API key

    Sign in to Otter A/B, open the project you want to instrument, and copy the key from Project Settings. Each project (website) gets its own key.
  2. 2

    Paste the snippet into your site’s <head>

    Replace YOUR_API_KEY with the key you copied, then add the snippet to your global layout, theme template, or every page's head. Place it as early as possible so the SDK starts loading before other scripts.
  3. 3

    Deploy and verify

    Open any page on your site and add ?optimo-verify=YOUR_API_KEY to the URL. Otter A/B pings the active endpoint and marks your project as verified in the dashboard.
  4. 4

    Build your first test

    Head to the dashboard and click New Test. The six-step wizard walks you from picking a test type to launching, including a sample-size estimate.

Install tips

Install once, run everywhere. Put the snippet in your shared layout, template, or theme header. Per-page installs are an anti-pattern and risk forgetting coverage.

Don't install via Google Tag Manager unless you have to. GTM injects scripts after page load, which means visitors see the unmodified page before variants apply. Direct <head> installs avoid this.

Use a separate project per environment. Create a Staging project with its own API key so dev traffic and reporting stay clean from production.

Frequently asked questions

Quick answers to the questions teams ask most about this part of Otter A/B.