---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.2
alternate:
  - https://yandex.com/support/varioqub/en/create/types/flags.md
  - https://yandex.com/support/varioqub/ru/create/types/flags.md
  - https://yandex.com/support/varioqub/tr/create/types/flags.md
  - href: en/create/types/flags.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/varioqub/en/llms.txt

# Flags in code

To define experimental changes, add special flags to your site code. You can use them for any element on your site. Each flag is a key-value pair. For example, as part of the experiment, you can set the color of a button: `color=red`.

In this type of experiment, data processing occurs as follows. The point in time at which you can get flag data depends on how your site processes data:

{% cut "Client-side rendering" %}

You can get flags after processing the page's code, but before rendering the UI. You can also make an asynchronous request for the flags and change the button color after retrieving the value. In this case, the site user may briefly see the page source code when the flag value is applied.

{% endcut %}

{% cut "Server-side rendering" %}

You can get flags when response is being created. Varioqub is fast enough to not slow down your site. In this case, you need to:

- Explicitly pass the user ID and, when you get a new ID (along with flags), set it in the HTTP response.

- Pass the technical data for the Yandex Metrica tag to the frontend and set it in the corresponding tag field. To learn more, see [Usersplit API](https://yandex.com/support/varioqub/en/api-usersplit.md).

{% endcut %}

{% cut "Examples of use" %}

- You want to introduce a new product line, such as credit cards in a bank.

    You can use flags to implement changes gradually: adding one feature, testing it, and — if this feature proves effective — rolling it out across the entire product.

- You have recently opened a new branch of your flower shop network. You want to understand how a personalized offer for new buyers will affect your conversion rate.

    To do this, you can assign a property to the selected audience, based on which you will provide a personal discount.

{% endcut %}

## Experiment type {#type}

Select **Flags**.

## Setting up page variants {#setting}

1. If you want to test several variants of text or design, click **Add variant**. This will add another variant for you to set up within your experiment. The variants will change during the experiment.

1. Specify flags for each variant: enter key-value pairs in the **Key** and **Value** fields. You may skip specifying flags for the control variant.

    To add another flag to the variant, click **Add flag**.

1. Click **Save**.

The examples of connecting Varioqub and creating experiments using flags are available on GitHub:

- [Processing flags on the frontend with JS](https://github.com/yandex/varioqub-extras/tree/master/web/flags_frontend).

- [Processing flags on the server side](https://github.com/yandex/varioqub-extras/tree/master/web/flags_backend).

## FAQ and troubleshooting

[I'm trying to create an experiment, but all the fields are locked.](https://yandex.com/support/varioqub/en/faq.md#fields-blocked)

[What if I want to use conditions that are not available in the Varioqub interface?](https://yandex.com/support/varioqub/en/faq.md#custom-condition)


<!-- source: en/_includes/feedback/feedback.md -->
<details>
    <summary class="button">Contact support</summary>
    <div style="padding: 15px;
     margin: 10px 0;
     background: #FFFFFF;
     border-radius: 10px;
     border: 1px solid var(--yc-color-line-generic);">
     <iframe style="background: #FFFFFF;"
        height="700"
        width="100%"
        frameborder="0"
        src="https://forms.yandex.ru/surveys/1705/?iframe=1&lang=en">
    </iframe>
</details>






<!-- endsource: en/_includes/feedback/feedback.md -->