Preview Mode
Preview mode (Live Preview)
Random assignment is correct for a live test and terrible for QA. In everyday language, Live Preview means “show me variation B on purpose.” In CROForge, preview generates a link (via generatePreviewLink) that opens the real target URL with a preview token such as _croforge_preview. Smart Code detects that token, loads the chosen variation, and can remember preview view mode in storage until you clear it. Preview does not replace setting the campaign to Running, linking metrics, or reading the Report tab.
Words used on this page
| Word | Everyday meaning | Meaning in CROForge |
|---|---|---|
| Live Preview | Looking at a specific version on the real site without waiting to be randomly assigned. | A generated preview URL that forces one variation so QA and stakeholders can review it. |
| Preview token | A secret-looking extra on a link that unlocks a special view. | Query or token Smart Code recognizes (commonly _croforge_preview). Exact format is owned by the backend preview API. |
| generatePreviewLink | The action that builds that special link. | The app/API call (for example experimentService.generatePreviewLink) that opens a new tab to the target URL with preview parameters. |
| Variation / Variant | The alternative experience you want to inspect. | The variation whose JS/CSS preview mode loads, regardless of normal traffic buckets. |
| Editor URL | The page you are looking at while editing. | Preview should use the real targeted URL on an allowlisted domain, not a placeholder. |
| Smart Code | The site snippet. | Detects preview mode, applies the preview experience, and may persist preview view mode in storage until cleared. |
Screenshot
Filename: preview-mode.png (Live Preview action on a variation and the resulting preview tab). Place the file under docs/assets/placeholders/. Paste the screenshot into WordPress after you copy this article; do not add an image tag here.
How to open Live Preview
- Open the campaign → Configuration → Variations.
- Open the variation menu → Live Preview (or the equivalent control in your build).
- The app calls
generatePreviewLinkand opens a new tab to the target URL with preview parameters/token. - Confirm the forced variation’s JS and CSS on Desktop, Tablet, and Mobile if you are checking layout.
- Clear preview cookies/storage when you return to normal browsing so you are not stuck in a forced variation.
How it works (concept)
- A preview token / query (for example
_croforge_preview) is set on the URL. - Smart Code detects preview mode and loads the preview experience instead of rolling the normal traffic bucket.
- Storage may remember preview view mode until you clear it.
- Exact token format is owned by the backend preview API — treat the generated link as the source of truth, do not hand-craft tokens.
Tips
- Preview on the real target URL and an allowlisted domain. A preview of the wrong host will not match production CSS, fonts, or Smart Code.
- Clear preview cookies/storage when returning to normal browsing, or you may keep seeing a forced variation and think the live split is broken.
- Preview does not replace checking Running status, linked metrics, or report data. Stakeholders signing off a screenshot is not the same as a statistically useful sample.
- You can preview from Draft. That is the point: QA the experience before eligible traffic is assigned.
Developers: preview helpers live in Smart Code and
experimentService.generatePreviewLink. See Smart Code runtime for how detection and storage interact with normal assignment.
