Building Tests5 min read

Preview Bar

A bottom toolbar that lets you view your live site as any test → variant, emulate devices, and watch your goals fire in real time — drafts included, results untouched.

Browse docs

Preview Bar

Browse your real site as any test → variant from a bar pinned to the bottom of the page. Emulate devices, watch your goals fire in real time, and never touch your results.

The Preview Bar is a thin toolbar — Shopify-admin style — fixed to the bottom of your own website. Pick a test, pick a variant, and the page instantly shows you what a visitor in that variant would see. It's how you sanity-check a variant on real content, on real pages, before a single visitor is enrolled.

It does three jobs at once: it switches variants on the live page (drafts included), it emulates mobile and tablet so you can check layout at every width, and it validates your goals — lighting up a checklist as each goal fires so you can confirm your tracking works before you launch. Because drafts are never served to your real traffic, the signed Preview Bar session is the only way to see a draft variant on your live site.

OtterOtterPreviewTestHomepage Hero · Draft ▾VariantNew Headline ▾Goals2/3▭▢▯✕

How it works

  1. 1

    Launch "Preview on site"

    From the test wizard's Variants step, a test's page, or the edit screen, click Preview on site. Otter checks your project's snippet is verified and that the URL belongs to your project's domain, then issues a short-lived signed session.
  2. 2

    Your site opens in a new tab

    Unlike the visual editor's popup, the Preview Bar opens a normal new tab so you can browse freely. The bar appears at the bottom, pre-loaded with every test in the project, each badged Draft, Running, or Paused.
  3. 3

    Pick a test, then a variant

    Choosing a variant applies it live: visual and personalization variants apply their DOM changes in place, custom CSS and custom JavaScript are injected exactly as the live runtime would, and redirect variants navigate to the variant's URL. Pick Original (control) to drop back to the unmodified page. Switching tests always resets the variant to Original first — no surprise mutations.
  4. 4

    Browse — the bar follows you

    As you click around your site the session rides along in the tab, so the bar re-appears on each new page and re-applies your current selection. Hit ✕ to exit and return to the clean page.

Validate your goals before launch

A test only earns you data if its goals actually fire. The Preview Bar's Goals panel lets you confirm that — live, on your real site, before you launch. Open it and you get a checklist of every goal on the selected test. Trigger each one the way a visitor would and it lights up ✓ Fired the instant Otter sees it, with a toast to confirm and a progress bar as you complete the set.

It's a genuine dry run: goal validation observes the trigger and updates the checklist, but it never records a conversion. Trigger anything as many times as you like — your results stay clean.

Click
Click any element matching the goal’s CSS selector.
✓ Fired
Page visit
Navigate to the goal’s target URL — the check follows SPA route changes too.
✓ Fired
Custom event
Fire optimo.track(‘event_name’) from your own code.
Waiting
Revenue
Call optimo.revenue({…}) or track a Purchase event.
Waiting

GA4-event goals aren't shown here — they're populated server-side from GA4, so there's no in-browser trigger to watch. Every other goal type validates live.

Emulate mobile and tablet

The device toggle on the right of the bar switches between Desktop, Tablet, and Mobile. Pick a size and your site renders inside a true-to-size device frame with the selected variant applied — a fast way to check a variant's layout at phone and tablet widths without resizing your browser. Goal validation runs on the desktop view (the detector watches the live page, not the device frame), so the Goals panel pauses in device mode and points you back to Desktop to validate.

Good to know

It never touches your results. The bar forces the variant you pick for your browser only — it bypasses normal assignment and fires no conversion or assignment tracking. Switch variants as much as you like; nothing is recorded against the experiment.

Goal validation is a dry run. The Goals panel confirms each goal fires by watching for its trigger, but it never POSTs a conversion. Use it freely to prove your tracking works before launch — nothing you trigger in preview reaches your results.

Viewers can preview too. Because previewing is read-only, every role — including viewers — can launch the Preview Bar. (The visual editor, which mutates variants, stays owner/admin/member only.)

Signed, scoped, and time-limited. Each session is signed, bound to your verified project's domain, and valid for 30 minutes. When it expires, relaunch from anywhere you see Preview on site.

One test at a time. The bar previews a single test → variant at once. Switching tests tears down the previous variant cleanly before applying the next.

Custom JavaScript previews reload on switch. Injected CSS can be removed cleanly, but executed JavaScript can't be un-run — so after previewing a variant with custom JS, switching to another selection reloads the page once and applies the new selection fresh. Your test and variant choice survives the reload.

Frequently asked questions

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