Experiments and variations

An experiment compares the current version of a page (the original) with one or more variations: each visitor sees one of them, and Kameleoon measures which one converts best. In the Kameleoon panel, Experiments tab, you create the experiment, its variations and their code, then start it.

The experiment list

The Experiments tab shows the site’s experiments, most recently modified first (archived experiments don’t show up). Each card shows:

the experiment’s name;
its status: Draft, Running (with an animated dot), Paused, Stopped, Scheduled or Deactivated;
the number of variations;
its Kameleoon type (for example CLASSIC);
the last modified date.

Click a card to open the detail. The All experiments link takes you back to the list.

Create an experiment

In the Experiments tab, click New experiment.
Name: a meaningful name, for example “Hero: benefit-driven headline”.
Tested page: the address of the published site’s page the experiment applies to. It is pre-filled with the site address declared in Kameleoon; check it and add the page path if needed (https://my-app.highwind.site/pricing). It must start with https:// (or http://).
Hypothesis (optional): what you expect to observe, for example “A benefit-driven headline will increase sign-ups.”
Click Create experiment.

The experiment is created as a draft in Kameleoon, with a first variation, and its detail opens right away. Nothing changes for your visitors until you start it.

An experiment’s detail

The detail gathers everything you need to run the test:

Header: the name, the status, the hypothesis, then the id (#123), the type and the tested page.
Ask the agent: starts a message in the chat about this experiment (see below).
Action buttons depending on the status: Start, Pause, Resume, Stop.
Variations and Traffic split: the Original then each variation, with its share of traffic as a percentage and a bar. Variations are marked code: click one to open its code.
Tracked goals: the goals measured by the experiment, including the main goal. See Goals and results.
Results: the Compute results button and the per-goal table.

Start, pause, resume, stop

The available actions depend on the experiment’s status:

Status	Available actions
Draft	Start
Running	Pause, Stop
Paused	Resume, Stop
Other statuses	None from the panel

Each action asks for confirmation, because it affects your live site: for example “Start “Hero: benefit-driven headline”? This affects the site’s visitors.”. Click the action’s button to confirm, or Cancel.

Add a variation

In the experiment’s detail, below the variation list, click Add a variation.
Give it a name (Variation name), then confirm with the + button.
The new variation’s code editor opens.

Traffic is then split evenly between the original and all variations: 50 / 50 with one variation, about 33 / 33 / 33 with two, and so on. For a different split, set it in Kameleoon.

Write a variation’s code

A variation is JavaScript and CSS that the Kameleoon tag runs on the tested page, for visitors who land in that variation. Your app itself doesn’t change.

In the experiment’s detail, click a variation.
Change the Variation name if needed.
Choose the JavaScript or CSS tab and write your code in the editor (the same editor as Highwind’s Code tab, with syntax highlighting). The variation’s id (#456) is shown to the right of the tabs.
Click Save, or press Ctrl + S. The Saved in Kameleoon message confirms the save.

Until you save, Discard changes puts the code back as it is in Kameleoon. The link at the top (the experiment’s name) takes you back to the detail.

This code runs on the published site, where the Kameleoon tag is installed: that’s where you check the result, not in Highwind’s preview.

Example: change the main headline and the sign-up button’s color.

// Variation JavaScript
const title = document.querySelector('[data-section="hero"] h1');
if (title) title.textContent = "Launch your site in 5 minutes";

/* Variation CSS */
[data-cta="signup"] {
  background: #0f766e;
}

Have the agent write the variation

The Ask the agent button (in an experiment’s detail and in a variation’s editor) switches to Chat and pre-fills the input with the Kameleoon mention and the relevant ids:

@Kameleoon In the variation “Variation 1” (ID 456) of the experiment “Hero: benefit-driven headline” (ID 123),

The message isn’t sent: complete it, then send it.

@Kameleoon In the variation “Variation 1” (ID 456) of the experiment “Hero: benefit-driven headline” (ID 123),
replace the hero headline with “Launch your site in 5 minutes” and make the “Sign up” button green.

The agent knows your app’s code: it writes JavaScript and CSS that target the right elements, then saves them in the variation. Then click Refresh in the panel and reopen the variation to review its code.

From an experiment’s detail, the message starts with “For the experiment “…” (ID 123), “: handy to ask for several variations at once, or to have goals linked.

Targeting a React app reliably

A Highwind app is a React application: the page rebuilds itself when state changes or when the visitor navigates. A few rules for reliable variations:

Target stable attributes. Avoid generated classes or fragile selectors (div > div:nth-child(3)). Ask the agent to add dedicated attributes in the app, for example: “Add data-cta="signup" on the sign-up button and data-section="hero" on the hero”, then publish.
Prefer CSS for style changes: it applies even if React rebuilds the element.
Wait for the element in JavaScript: it may not exist yet when the variation runs, or be recreated after a re-render. Always check it exists before changing it.
Turn on support for dynamic websites in your Kameleoon project, so variations reapply on every navigation (see Setup).