Skip to main content

Preview links

A preview link opens your real site with one specific variant rendered — exactly as a matching visitor would see it — without starting the test and without recording any data. Use it to QA a change before you launch, to sanity-check a running variant, or to send a colleague a link so they can see the variant for themselves. It works on draft experiments (before you’ve ever launched) and on running ones, and the link is shareable — anyone who opens it on your site sees the same thing.
1

Open the experiment

In your dashboard, go into the site and open the experiment.
2

Find the variant

In the Variations list, each variant row has a Preview button.
3

Open or copy

Click Preview, then Open in new tab to view it yourself, or Copy URL to test in another browser or share with a teammate.
The link is just your test’s page URL with one extra parameter:
https://acme.com/checkout?abtestly_preview=<experimentId>:<variantKey>
When you open it on your site, the snippet renders that variant and shows a small Preview badge in the corner (see The preview badge).
The page the link points at comes from the target URL you set in the experiment’s Basics step. If you didn’t set one, it falls back to your site’s home page — so set a target URL if your test runs on a specific page.

What you can preview

  • Drafts, before launch. You don’t have to start a test to see it on your live site. This is the main reason to use a preview link — check your work on the real page first.
  • Running variants. Confirm a live variant looks right, or compare it against the control.
  • The control. Pick the control variant’s key (often control) to preview the original, unchanged page within the same flow.

Targeting is respected

A preview link forces the variant choice — but it still runs the experiment’s normal targeting, locations, and audiences. So the preview shows what a real matching visitor would see:
  • If the page and visitor match the experiment’s conditions, the variant renders.
  • If they don’t match (wrong URL, wrong country/device, etc.), you see the original page — the same as a non-eligible visitor.
If your variant doesn’t appear, the most common cause is targeting: you’re previewing on a page or in a context the test doesn’t target. Double-check the experiment’s Locations and Audiences against the page you’re opening.

Preview multiple tests at once

To see how several tests look combined on one page, separate the pairs with commas:
https://acme.com/?abtestly_preview=<expA>:<v1>,<expB>:<v2>
Each test is resolved and targeting-checked independently — if one doesn’t match the page, the others still apply. You can preview up to 10 tests in a single link.

The preview badge

While a preview link is active, a small Preview badge appears in the corner of the page. Each previewed test is shown as a row in the badge — Homepage CTA: [Variant B ▾] — with the dropdown letting you switch to a different variant of that test in place.
  • Switch variants from the badge. Open the dropdown next to a test name and pick a different variant. The page does a full reload with the new variant forced — you don’t have to go back to the dashboard or copy a new link. The full reload guarantees the snippet re-runs cleanly against the new variant whether the link uses the query-string form or the hash form (see Single-page apps and the hash form). When previewing multiple tests, you get one dropdown per test on the same badge.
  • Drag it anywhere. The badge is a floating pill you can grab and move, so it never hides the element you’re trying to check. Its position is remembered for the rest of your session.
  • Exit preview. Click Exit ✕ on the badge to leave preview mode — it clears the session and strips the preview parameter from the URL, returning you to the normal page.
Variant labels in the dropdown come from the variant name you set in the dashboard (“Shorter headline”, “Sticky CTA”). If a variant has no name, it’s labeled Original for the control row or Variant 1 / 2 / … for the others.

Staying in preview as you click around

Once you open a preview link, preview mode persists across pages in the same browser tab for up to 1 hour, even if you navigate to URLs that don’t carry the parameter. This lets you click through a multi-step flow (e.g. a checkout funnel) while still seeing your variants. It ends when the hour elapses, when you click Exit ✕, or when you close the tab.

Single-page apps and the hash form

Most preview links use a normal query parameter (?abtestly_preview=…). A few frameworks (some Next.js, Remix, and Nuxt setups) reject unknown query parameters at the server and return a 404 before the page ever loads. If your query-parameter link 404s, use the hash form instead — a hash fragment never reaches the server, so the app can’t reject it:
https://acme.com/checkout#abtestly_preview=<experimentId>:<variantKey>
It also works inside hash-router URLs, e.g. https://acme.com/#/products/123?abtestly_preview=<expId>:<variant>. Both shapes are parsed identically and pass the same security checks.
Switching variants from the badge’s dropdown writes the updated token back to whichever channel you started with — a hash-form preview keeps using the hash on subsequent switches, so SPAs that reject unknown query params don’t break mid-session. Each switch triggers a full page reload either way, so the snippet always boots fresh on the new variant rather than trying to swap variants in place.
See Single-page apps for more on running tests in client-side routed apps. If you’re writing variant code locally and want fast feedback in your own browser (devtools console, a userscript, a browser extension) you can activate the experiment without a preview URL by calling, from the console on your own site:
window.abtestly.dev.apply('your-exp-id');
This treats the experiment as active for the rest of the tab session — your onApply callbacks fire, and SPA navigations re-cycle the lifecycle (cleanup, then re-apply) the same way they would for a real visitor. It does NOT inject the variant’s CSS or JS from the dashboard; it’s a flag-flip for the lifecycle hooks. Read more in Single-page apps → dev.apply.
abtestly.dev.* is console / userscript only. Don’t leave it in variant code — the dashboard editor will flag it.

Requirements and safety

For a preview link to work, and to keep it from being abused:
  • The snippet must be installed on the page, loaded over HTTPS. See Installing the snippet.
  • Preview only activates on your registered domain (or any of its subdomains — and localhost for local development). The same link pasted on a different site does nothing, so it can’t be used to inject your variant code onto a third-party page.
  • A link can only preview your own site’s tests. Even on your domain, the snippet refuses to render an experiment that belongs to a different site.
  • No data is ever recorded. Preview never buckets the visitor and never sends analytics — so previewing, or sharing the link with your whole team, cannot pollute your results.
A preview link is public: anyone who has it, and who meets the targeting conditions on your domain, can see the variant — including unlaunched drafts. The link doesn’t expose your dashboard or any visitor data, but treat it like any shareable URL and don’t post it somewhere you wouldn’t want a draft test seen.

Troubleshooting

The snippet probably isn’t loading, or you’re not on the registered domain. Open DevTools → Console and check window.__ABTESTLY_CONFIG__ returns your config (see Verify installation). Preview also requires HTTPS and only activates on your registered domain or a subdomain of it.
No. Preview mode never assigns the visitor to a bucket and never sends any analytics events. You can preview and share links freely without touching your numbers.
If a preview still behaves unexpectedly after these checks, email support@abtestly.com with the link and the page you’re testing — we’ll help you track it down.