Visual Editor
Build variants by editing your live site in a popup window. Apply changes to one element or all matching instances. 15-minute signed sessions, scoped to your verified project's domain.
Browse docs
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
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
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
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
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
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.
Apply to one element, or all of them
When you select an element, the inspector shows an Apply to control with two choices. It defaults to Only this one, which targets the single element you clicked. Flip it to All instances when you want the same change on every element that looks like the one you picked — repeated listing badges, card labels, star ratings, “Add to cart” buttons, result rows, and the like.
Choosing All instances swaps the unique selector the editor generated for a reusable one — for example, the single badge selector becomes .property-result.labels — and tells you how many elements match right now (e.g. All instances (12)). The preview applies to all of them immediately, so what you see in the popup is exactly what visitors will get. If an element has more than one reusable selector, a dropdown lets you pick the one you want.
The best part is what happens after the page loads. An all-instance change keeps watching the page, so elements that appear later — from infinite scroll, filtering, pagination, or a framework re-render — get the change automatically the moment they show up. You don't need one change per element, and you don't need to predict how many there will be.
Only this one
The default. Changes the first element matching the selector and nothing else. Best for one-off edits — a single hero headline, one CTA, a specific banner.
All instances
Changes every element matching a reusable selector — now and as new matches appear. Best for repeated UI: product cards, listing labels, badges, repeated buttons.
Prefer to add changes by hand instead of clicking around the page? The same Apply to toggle lives on the manual change form in the test wizard and on the test edit screen, so you can set Only this one or All instances against any selector you type in. Existing changes you made before this feature shipped keep behaving as Only this one — nothing changes underneath you.
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.
Reach for All instances on repeated UI. If you find yourself making the same edit to a row of cards or a list of badges, you're looking for Apply to → All instances. One change covers every match — and the new ones that load later — instead of a separate change per element.
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.