---
metadata:
  - name: generator
    content: Diplodoc Platform v5.55.3
alternate:
  - https://yandex.com/support/varioqub-app/en/web/widgets.md
  - https://yandex.com/support/varioqub-app/ru/web/widgets.md
  - href: https://yandex.com/support/varioqub-app/en/web/widgets.md
    type: text/markdown
    title: Markdown version
  - href: https://yandex.com/support/varioqub-app/en/llms.txt?revision=r20853974
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/varioqub-app/en/llms.txt?revision=r20853974

# Widgets

Varioqub widgets are a new type of configuration flags which you can use to add visual elements to your mobile app. With widgets, you can dynamically show users personalized content, like discount notifications, without having to update your app.

We currently support the following widget types:

#|
|| **Widget type** | **Description** ||
|| **Discount notification** | A pop-up message with a discount offer. ||
|| **Banner** | A horizontal tile displayed at the top or bottom of the screen. It contains a title (string), body (string), text color, and background color. The text and background colors must be in `#RRGGBB` format (example: `#FFFFFF` for white) ||
|#

Example:

{% cut "Discount notification" %}

![](../_images/notification-example.png =350x)

{% endcut %}

{% cut "Banner" %}

![](../_images/banner-example.png =350x)

{% endcut %}

To use widgets, you need to add the `Varioqub UI SDK` module.
For more information, see **Varioqub UI SDK integration** for [iOS](https://yandex.com/support/varioqub-app/en/sdk/ios/integration-ui-sdk.md) and [Android](https://yandex.com/support/varioqub-app/en/sdk/android/integration-ui-sdk.md).

## Creating a widget in the AppMetrica interface

1. Log in to AppMetrica.
1. Select your app.
1. Go to **Varioqub** → **Flag configuration**.

    {% note info %}

    The first time you log in, you'll see the "Install SDK" window. If you've already installed it, click **Continue**.

    {% endnote %}

2. In the upper-right corner, click **Add** → **Widget**.

3. In the window that opens, complete all of the fields:
   - **Name**: Enter the name you'll use in your code (example: `discount_widget`).
   - **Type**: Select "Discount notification" from the dropdown list.
   - **Position**: Choose where the widget will appear on the phone screen.

4. Click **Save**.

5. After creating the widget, remember to publish the configuration:

    In the upper-right corner, click **Publish config**.

    The changes will take effect in your app immediately after saving, and your app will start receiving the widgets.


<!-- source: en/_includes/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.com/surveys/2617/?iframe=1&lang=en">
    </iframe>
</details>


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