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

# Demo: Feature experimentation

> Follow a step-by-step tutorial using a TypeScript sample app to configure feature flags in Kameleoon, enable them in the app, and observe how they affect page behavior.

This hands-on tutorial for developers demonstrates how feature experimentation works on the Kameleoon platform. You'll start with a sample app and follow step-by-step instructions to configure a set of feature flags in the Kameleoon app, enable them in the sample app, and see how the feature flags affect the visitor's page.

The sample is written in TypeScript, but you don't need to know TypeScript to complete this tutorial. Experience with any modern programming language should be enough to understand the important points.

## Prerequisites[​](#prerequisites "Direct link to Prerequisites")

Before you get started, you need to create a couple accounts:

* [Sign up](https://login.kameleoon.com/app/sign-up?utm_campaign=FM%26E%20Free%20Trial\&utm_source=documentation%20dev\&utm_medium=cta%20dev%20doc) for a free 30-day Kameleoon trial account. You'll need to complete this tutorial within 30 days after requesting the account, but the tutorial should only take about 30 minutes to complete.
* A [GitHub](https://github.com) account.

## Run the sample app[​](#run-the-sample-app "Direct link to Run the sample app")

First, you'll get the app running in GitHub Pages, so you don't need to worry about setting up a web server. You'll need to be logged into your [GitHub](https://github.com) account.

1. In the [Bouncing ball repo in GitHub](https://github.com/kameleoon/bouncing-ball), click **Fork**. Follow the prompts to create your own fork of the sample app in `github.com/<your_username>/bouncing-ball`. (Replace \<your\_username> throughout this tutorial with your GitHub account name.)
2. In your new `https://github.com/<your_username>/bouncing-ball` repo in GitHub, click the **Actions** tab and click the button to enable workflows.
3. In the **Settings** tab, click **Pages**, click the **Source** dropdown, and click **GitHub Actions**.
4. In the **Actions** tab, click **Deploy static content to Pages** > **Run workflow** > **Run workflow**.

Once the build and deploy process completes (this might take a minute or two), you should be able to see the demo app running in a browser at `https://<your_username>.github.io/bouncing-ball`! It should look something like this:

<Frame>
  ![Bouncing ball demo app](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/bouncing-ball.png)
</Frame>

To make project changes faster, the update interval at which the SDK checks for configuration changes in the Kameleoon account can be programmatically adjusted:

1. In your GitHub repo, in the **Code** tab, open the `src/main.ts` file.

2. Click the **Edit this file** button (with the pencil icon).

3. Find and edit the `/src/main.ts` file. Find the following line:

   ```js theme={null}
   const client = new KameleoonClient({ siteCode });
   ```

   Replace the line with the following code:

   ```js theme={null}
   const configuration = {   updateInterval: 1,};const client = new KameleoonClient({ siteCode, configuration });
   ```

   The new code adds a configuration with an `updateInterval` of 1. This value reduces the frequency with which the SDK polls for changes in the configuration to once every minute (from the default of 60 minutes). This frequent polling is not recommended for a production environment due to the performance impact, but it is helpful for the tutorial. Kameleoon also offers a [premium streaming option](../technical-reference/technical-considerations#streaming-premium-option-premium-option) that pushes configuration changes to the SDK immediately.

4. Click **Commit changes...**.

## Set up a Kameleoon project[​](#set-up-a-kameleoon-project "Direct link to Set up a Kameleoon project")

You'll need your Kameleoon trial account credentials before you start this section.

1. Sign in to the [Kameleoon app](https://app.kameleoon.com) using your trial account credentials.
2. In the left menu, expand **Admin** and click **Projects** > **New project**.
3. In the dialog, click **Site: Feature flags** in the first dropdown, and paste `https://<your_username>.github.io/bouncing-ball` as the **URL of site**. Remember to replace `<your_username>` with your GitHub account name. Click **Add**.
4. Copy the site code that's shown on the next page.

   <Frame>
     ![New project page with site code](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/sitecode.png)
   </Frame>
5. In your GitHub repo, in the **Code** tab, edit the `src/constants` file. Replace the `siteCode` value with the site code you just copied and click **Commit changes**.

If you check your app in the browser again (`https://<your_username>.github.io/bouncing-ball`), you should see that all the bouncing circles have disappeared. That's because the circles were added by a Kameleoon feature flag in a different project. You just changed the site code so the site is now controlled by your Kameleoon project, which you haven't fully configured yet. Don't worry, you'll add your own circles back to the app with your own feature flags.

<Check>
  Troubleshooting: If you still see the **Slow + Random + Big** text and bouncing circles, try opening the page in an Incognito (or Privacy mode) window.
</Check>

### Set up feature flags[​](#set-up-feature-flags "Direct link to Set up feature flags")

Feature flags allow for rolling out new features to a limited audience and testing effectiveness before a full rollout. Configuration can be managed by developers or other team members. Understanding how feature flags are configured in the Kameleoon interface helps in using variables effectively within the app.

1. In the Kameleoon app, in the **Activate** menu, click **Feature flags**.

2. Click **New feature flag**.

3. Complete the fields with the following values:

   * Name: `Bouncing ball demo`
   * Project: \{Select your project from the dropdown}
   * Flag type: **Permanent**
   * Feature key: `bouncing_ball_demo` You can leave the tags and description field empty.

4. Click **Validate**.

### Set up variables[​](#set-up-variables "Direct link to Set up variables")

[Variables](/user-manual/experimentation/feature-experimentation/configure-your-feature-flags/define-feature-variables) are strings, numbers, boolean, or JSON values that you use in your app code to modify the app's behavior. Their values change depending on which variation Kameleoon assigns the visitor to.

For example, to determine whether visitors stay on a site longer when served a "Party time" variation versus a "Hypnotize" variation, set up a variation for each option and run an experiment.

1. On the new page that appears, expand the **Set Up** menu and click **Variables**.

<Frame>
  ![Set Up menu](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/bb-feature-flag.png)
</Frame>

2. Use the **+ Add Variable** button to add 6 variables with the following values:

   | Variable key          | Type    | Default value                   |
   | --------------------- | ------- | ------------------------------- |
   | title\_text           | String  | Default variation: 1 green ball |
   | randomize\_on\_bounce | Boolean | False                           |
   | balls\_amount         | Number  | 1                               |
   | ball\_speed           | Number  | 10                              |
   | ball\_color           | String  | green                           |
   | ball\_size            | Number  | 20                              |

   <Warning>
     Watch for typos! The variable key names and types must match exactly. If you look at the `src/main.ts` file in your GitHub repo, you'll see why. The code sample uses these exact variable key names to retrieve the values of the variables, depending on the variation that Kameleoon assigns the visitor to.
   </Warning>

3. Click **Save**.

You've now set up a set of variables with default values. The default values are the values your app uses when there are no active campaigns for the visitor. If you turned on your feature flags now, you would see the default variation, with 1 green ball bouncing around slowly. This is because no variations have been set up yet.

### Set up variations[​](#set-up-variations "Direct link to Set up variations")

[Variations](/user-manual/experimentation/feature-experimentation/configure-your-feature-flags/define-feature-variations) define the possible combinations of variables that control what a visitor sees in your app. Kameleoon assigns each visitor a variation on their first visit to the app.

1. In **Set Up**, click **Variations**.

2. Use the **+ Add variation** button to add two new variations:

   * Name: `Party time`

     * ball\_size: `50`
     * ball\_color: `random`
     * ball\_speed: `75`
     * balls\_amount: `75`
     * randomize\_on\_bounce: `True`
     * title\_text: `Hey! Get up and dance!`

   * Name: `Hypnotize`

     * ball\_size: `200`
     * ball\_color: `blue`
     * ball\_speed: `2`
     * balls\_amount: `10`
     * randomize\_on\_bounce: `False`
     * title\_text: `You're getting very, very sleepy`

### Set up a goal[​](#set-up-a-goal "Direct link to Set up a goal")

Next, you'll set up a [goal](/user-manual/assets/goals/manage-goals). Goals define how you want to measure the effectiveness of your variations.

There are a number of different types of customizable goal types you can use, but this tutorial uses a basic "time spent" metric.

1. In the **Set Up** menu, click **Goals** > **+ Add goal**.

2. In the **Configure goals** section, click **+ Create a new goal** and complete the following fields:

   * Name: Time spent
   * Type: Time Spent
   * Project: \{Select your project}

3. Click **Next** and set the goal to: **The visitor spent more than 30 seconds**.

4. Click **Validate**.

## Roll out an experiment[​](#roll-out-an-experiment "Direct link to Roll out an experiment")

Now that your variations are configured, you can create an experiment that displays the two variations to a subset of your audience. You'll display one variation to 40% of your visitors and the other variation to a separate 40% of visitors. The remaining 20% of visitors will see an unmodified version of the app (the default).

1. In the Rollout Planner section, click **Production**.
2. Click **+ Add a rule** > **Experiment**.
3. Reduce the **Exposure** slider to **80%**.
4. Under **Variations to serve**, click **Party time** and change the **Exposition** value to **40.00%**.
5. Click **+ Add a variation**. The variation **Hypnotize** should be selected automatically (if not, select it). Change the **Exposition** value to **40.00%**.
6. Turn the **ON/OFF** toggle to **ON**.
7. Click **Save**.

## Test the app[​](#test-the-app "Direct link to Test the app")

Open the app in a browser. You should see one of the three possible variations: the Party time variation, the Hypnotize variation, or the Default variation.

<Frame>
  ![Party time variation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-party-time.png) *Party time variation*
</Frame>

<Frame>
  ![Hypnotize variation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-hypnotize.png) *Hypnotize variation*
</Frame>

<Frame>
  ![Default variation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-default-variation.png) *Default variation*
</Frame>

Now, try to simulate a new user until you see the other variations. This may take a few attempts as you may get assigned to the same variation multiple times. Because your browser saves a `visitorCode`, which is a unique ID that identifies you, you can't just refresh the page because you'll always see the variation that you were first assigned to. Instead, you need to look like a new visitor. Here are the simplest ways to do that:

* Switch to a different browser or device.
* Open the app in a new private window each time (depending on your chosen browser, this may be called "Incognito", "Private Browsing", or something similar).

After enough attempts, you should be able to see all three of the variations. If so, congratulations! You've successfully set up a feature experiment with Kameleoon! 🎉🎉🎉

## Next steps[​](#next-steps "Direct link to Next steps")

* In the **Reporting** section of your experiment, look through some of the initial results, available integrations, and activity log. You won't have access to a lot of results data yet, due to low traffic.
* Look through the sample code to understand how the variables are applied in the code. If you're comfortable writing TypeScript, try adding your own variable.
* Look through the rest of this developer documentation and the [Experimentation User Guide](/user-manual/experimentation/feature-experimentation/create-and-manage-flags/create-a-feature-flag) to learn more about all of the available options and features.
* Install the SDK of your choice and start building your own feature flags, personalizations, and other experiments.