> ## Documentation Index
> Fetch the complete documentation index at: https://docs.abtestly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview links

> See any variant on your live site before you launch, without affecting your test data. Preview drafts, respect targeting, and share a link with your team.

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.

## Get a preview link

<Steps>
  <Step title="Open the experiment">
    In your dashboard, go into the site and open the experiment.
  </Step>

  <Step title="Find the variant">
    In the **Variations** list, each variant row has a **Preview** button.
  </Step>

  <Step title="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.
  </Step>
</Steps>

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-preview-badge)).

<Note>
  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.
</Note>

## 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.

<Tip>
  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](/targeting-overview) against the page
  you're opening.
</Tip>

## 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](#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.

<Note>
  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.
</Note>

## 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.

<Note>
  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.
</Note>

See [Single-page apps](/spa-support) for more on running tests in
client-side routed apps.

## Iterating locally without a preview link

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:

```js theme={null}
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](/spa-support#abtestlydevapplyexpid--local-qa-only).

<Warning>
  `abtestly.dev.*` is console / userscript only. Don't leave it in
  variant code, the dashboard editor will flag it.
</Warning>

## 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](/snippet-install).
* **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**.

<Warning>
  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.
</Warning>

## Troubleshooting

<AccordionGroup>
  <Accordion title="I opened the link but I still see the original page">
    Usually targeting. The link forces the variant *only* on pages and
    visitors that match the experiment's Locations and Audiences. Confirm
    you're on a targeted URL and that your context (country, device, etc.)
    matches. Also check the variant key in the link matches a real variant.
  </Accordion>

  <Accordion title="The link returns a 404 before the page loads">
    Your framework is rejecting the unknown query parameter. Use the
    [hash form](#single-page-apps-and-the-hash-form)
    (`#abtestly_preview=…`) instead, it never reaches the server.
  </Accordion>

  <Accordion title="Nothing happens at all, no badge, no change">
    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](/quickstart#4-verify-installation)).
    Preview also requires HTTPS and only activates on your registered domain or
    a subdomain of it.
  </Accordion>

  <Accordion title="Will previewing affect my test results?">
    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.
  </Accordion>
</AccordionGroup>

If a preview still behaves unexpectedly after these checks, email
[support@abtestly.com](mailto:support@abtestly.com) with the link and the page
you're testing, we'll help you track it down.

***

## Start testing

<Card title="Create a free ABTestly account" icon="flask" href="https://app.abtestly.com/sign-up" horizontal>
  The free tier covers 3,000 monthly tracked users and one active experiment, no credit card. Edge-served snippet, with sample size and confidence intervals shown on every result.
</Card>