---
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/ru/web/widgets.md
    type: text/markdown
    title: Markdown version
  - href: https://yandex.com/support/varioqub-app/ru/llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/varioqub-app/ru/llms.txt

# Виджеты

Виджеты Varioqub — это новый тип флагов в конфиге, который позволяет добавлять визуальные элементы в ваше мобильное приложение. С помощью виджетов вы можете динамически показывать пользователям персонализированный контент, например уведомления о скидках, без обновления приложения.

На данный момент поддерживаются следующие типы виджетов:

#|
|| **Тип виджета** | **Описание** ||
|| **Уведомление о скидке** | Всплывающее сообщение с предложением скидки. ||
|| **Баннер** | Горизонтальная плитка, отображаемая сверху или снизу экрана. Содержит: заголовок (строка), содержимое (строка), цвет текста и цвет фона (текст и фон должны быть в формате `#RRGGBB`, например: `#FFFFFF` — белый) ||
|#

Пример отображения:

{% cut "Уведомление о скидке" %}

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

{% endcut %}

{% cut "Баннер" %}

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

{% endcut %}

Для использования виджетов необходимо добавить модуль `Varioqub UI SDK`.
Подробней в разделах **Интеграция Varioqub UI SDK** для [iOS](https://yandex.com/support/varioqub-app/ru/sdk/ios/integration-ui-sdk.md) и [Android](https://yandex.com/support/varioqub-app/ru/sdk/android/integration-ui-sdk.md).

## Создание виджета в интерфейсе AppMetrica

1. Войдите в AppMetrica.
1. Выберите ваше приложение.
1. Перейдите в раздел **Varioqub** → **Конфиг флагов**.

    {% note info %}

    При первом входе вас встретит окно "Установите SDK". Если у вас уже установлен SDK, нажмите кнопку **Продолжить**.

    {% endnote %}

2. В правом верхнем углу нажмите **Добавить** → **Виджет**.

3. В открывшемся окне заполните все поля:
   - **Название виджета** — укажите название, которое будете использовать в коде (например, `discount_widget`).
   - **Тип виджета** — выберите из выпадающего списка "Уведомление о скидке".
   - **Расположение** — выберите место, где будет располагаться виджет на экране телефона.

4. Нажмите **Сохранить**.

5. После создания виджета обязательно опубликуйте конфигурацию:

    В правом верхнем углу нажмите кнопку **Опубликовать конфиг**.

    Изменения применятся к приложению сразу после сохранения, и виджеты начнут приходить в приложение.


<!-- source: ru/_includes/neuroexpert.md -->
<hr>

Задайте вопрос Нейроэксперту — в правом нижнем углу нажмите ![](../_images/neuro.png =150x).
<!-- endsource: ru/_includes/neuroexpert.md -->