Building Tests7 min read

Visual Editor

Build variants by editing your live site in a popup window. 15-minute signed sessions, scoped to your verified project's domain.

Visual Editor

Build A/B/n and personalization variants by editing your live site in a popup. No code, no iframes, no staging environment required.

The visual editor lets non-developers (and developers, honestly) build test variants by clicking around on the real page. You pick an element, change its text or style or visibility, repeat — and the resulting list of changes is saved as the variant's definition. When the test launches, the SDK replays those exact changes on the page for visitors assigned to that variant.

Unlike most visual editors, Otter A/B doesn't use an iframe. It opens your live site in a real popup window so the page renders in the same top-level browsing context a visitor would see — cookies work, CSP works, third-party scripts work. The main Otter A/B tab acts as a control panel that talks to the popup via a server-side message relay.

Launch requirements

  • Verified snippet. The project's Otter A/B snippet must be installed and verified before the editor can launch. Verify from Project Settings → Installation.
  • Role: owner, admin, or member. Viewers have read-only access to the dashboard and can't open the editor.
  • Compatible URL match type. Exact, simple, and trailing-wildcard URLs work (e.g. https://example.com/pricing*). Contains, regex, and patterns with embedded* characters are blocked — the editor needs one concrete page to load.
  • Target URL must match the project domain. Same host as the project URL, or a subdomain of it. This is enforced server-side at session creation.
  • Test type: Visual or Personalization. Redirect tests don't have in-page variants to edit, so the editor button is hidden for them.

How the session works

  1. 1

    Click Open Visual Editor

    In the Variants step of the test wizard, click Open Visual Editor on the variant you want to build. Otter A/B kicks off an editor session for your target URL and variant.
  2. 2

    A short-lived editor session is issued

    Behind the scenes Otter A/B checks your role, the project's snippet status, and that the URL belongs to the project's domain. If everything passes, a short-lived signed session is issued — scoped to one variant on one page, valid for 15 minutes, and bound to the project's origin so postMessage traffic from other pages is rejected.
  3. 3

    Popup launches your site with ?optimo-editor=…

    The dashboard opens a popup window pointing at your target URL with the token appended as ?optimo-editor=<token>. The SDK on your site sees that parameter, verifies the token, and switches into editor mode — rendering the toolbar, inspector, and change-history UI directly on the page.
  4. 4

    Edit, with two windows in sync

    Every action you take in the popup (pick selector, change text, toggle visibility, undo) is sent through a server-side message relay keyed by your token. The main tab's control panel mirrors the connection state and lets you close the session cleanly.
  5. 5

    Save sends changes back as variant config

    Hit save in the popup and the accumulated changes are pushed back through the relay to the main tab, which stores them on the variant. Close the popup — you're back in the wizard with the changes attached. Launch the test (or save as draft) to lock them in.

What you can change

Text

Rewrite an element's text content — headlines, button copy, body paragraphs.

Style

Override CSS properties: color, font-size, padding, background, display. Applied as inline style with high specificity.

DOM

Hide an element, show a hidden one, or insert new HTML at a chosen position relative to an existing element.

Editor tips

Pick stable selectors. The editor auto-generates a CSS selector for every change, preferring stable hooks (id, data-*) over deep descendant chains. If your site rebuilds the DOM frequently, add data-optimo-id attributes to elements you regularly test so the selectors don't go stale.

Allow popups for the dashboard. The editor is a popup, and most browsers block popups by default. Whitelist the Otter A/B dashboard in your popup settings, or just click the popup-blocked notification to allow it.

Don't leave the session open all day. Sessions expire after 15 minutes. If you walk away mid-edit, the popup may disconnect and you'll need to relaunch. Save often.

Editing is per-popup, not collaborative. Two people opening the editor on the same variant at the same time will fight — last save wins. Coordinate or split variants across people.

Frequently asked questions

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