--- metadata: - name: generator content: Diplodoc Platform v5.54.2 alternate: - https://yandex.com/support/varioqub/en/create/types/integrations.md - https://yandex.com/support/varioqub/ru/create/types/integrations.md - https://yandex.com/support/varioqub/tr/create/types/integrations.md - href: ru/create/types/integrations.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/ru/llms.txt # Виджеты Используйте для размещения информационных блоков с персональными предложениями, скидками или расскажите о новых возможностях. Выберите подходящий формат информационного блока и настройте его под свои задачи. При создании эксперимента используйте окно **Проверка эксперимента**, чтобы увидеть, как виджет будет выглядеть на вашем сайте. Добавьте ссылку для редиректа пользователей на нужную страницу. {% cut "Примеры использования" %} - Редирект на страницу с новой коллекцией. - Редирект в корзину с применением скидки. Для этого на вашем сайте должна быть реализована система скидок и возможность добавления промокода в параметры ссылки. {% endcut %} ## Тип эксперимента Выберите **Виджеты**. ![](../../_assets/widgets-1.png) ## Настройка вариантов страницы Для настройки доступны следующие типы виджетов: {% list tabs %} - Баннер в углу {% note info %} Доступно только для [тарифных планов «Стандартный» и «Расширенный»](https://yandex.com/support/varioqub/ru/paid-functionality.md). {% endnote %} Небольшое окно в углу страницы. Не мешает контенту и подойдет для любой верстки сайта. {% cut "Пример баннера в углу" %} ![Баннер в углу](../../_assets/integration-popup.png =800x) {% endcut %} 1. Если нужно проверить несколько вариантов текста или оформления, нажмите кнопку **Добавить вариант**. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента. 1. Для каждого варианта выберите тип виджета из выпадающего списка. 1. Укажите настройки: - **Положение** — положение виджета на странице сайта. Доступные варианты: **Сверху слева**, **Сверху справа**, **Снизу слева** и **Снизу справа**. - **Цветовая тема** — тип цветовой схемы виджета (темная или светлая). Выберите в зависимости от цветовой схемы вашего сайта. - **Заголовок** — текст заголовка виджета. По умолчанию заголовок выполняется более крупным шрифтом относительно других элементов виджета. Чтобы настроить его размер, воспользуйтесь **Ручной настройкой стилей**. - **Текст** — основной текст виджета, расположенный под заголовком и объясняющий суть виджета. - **Название ссылки** — текст ссылки, при нажатии на которую будет осуществляться переход на другую страницу. - **Адрес ссылки** — URL-адрес страницы, на которую будет осуществляться переход при нажатии на ссылки. - **Таймаут повторного показа после закрытия (дни)** — время в днях, через которое виджет будет показан повторно в случае, если пользователь закроет его. - **Расстояние до края экрана (пиксели)** — расстояние от края страницы до попапа, выраженное в пикселях. Измеряется от верхнего, нижнего, левого или правого края страницы в зависимости от положения попапа на странице (например, если положение попапа **Сверху слева**, то расстояние будет измеряться от верхней и левой границ страницы). - **Значение CSS свойства z-index** — положение виджета на странице относительно других слоев разметки. Если у каких-то из элементов разметки страницы указано собственное свойство `z-index` и оно больше значения по умолчанию для виджета, он будет перекрыт этим элементом. В этом случае увеличьте значение `z-index` для виджета, чтобы он оказался поверх всех элементов. - **Ручная настройка стилей** — настройка стилей вручную позволит настроить виджет под стиль вашего сайта. Такой виджет не выделяется из общей стилистики и смотрится более гармонично. {% note alert %} Для редактирования стилей доступны только CSS-классы, представленные ниже. Изменение других стилей может привести к изменению внешнего вида всей страницы. Для изменения этих настроек требуются знания CSS. {% endnote %} {% cut "Классы CSS, доступные для редактирования" %} - `.ymab-integration-popup-body` — стили размеров и начальной позиции попапа относительно страницы. - `.ymab-integration-popup-close` — стили кнопки **×** (**Закрыть**). - `.ymab-integration-popup-title` — стили заголовка. - `.ymab-integration-popup-text` — стили текста под заголовком. - `.ymab-integration-popup-link` — стили ссылки. **Пример: Добавление изображения через CSS** Чтобы добавить изображение после основного текста в виджете типа **«Баннер в углу»**, используйте приведенный ниже пример CSS-кода. Для этого применяется псевдоэлемент `::after` класса `.ymab-integration-popup-body`. **Код**: ```css .ymab-integration-popup-body::after { content: ""; display: block; width: 135px; height: 150px; background-image: url('https://avatars.mds.yandex.net/get-lpc/1220100/7b110c0f-1d2c-4330-8dd2-ca4de3e8acb5/orig'); background-size: cover; background-position: center; margin-top: 1em; justify-self: center; } ``` **Результат**: ![Баннер в углу](../../_assets/integration-popup-image-css.png =400x) {% endcut %} 1. Используйте окно **Проверка эксперимента** для визуальной проверки размещения виджета на вашем сайте. 1. Нажмите **Сохранить и запустить**. - Баннер в углу (ограниченная настройка) Небольшое окно в углу страницы. Не мешает контенту и подойдет для любой верстки сайта. В отличие от баннера в углу, доступного только в [расширенной версии](https://yandex.com/support/varioqub/ru/paid-functionality.md), не позволяет изменять стили, расстояния до края страницы и значение свойства `z-index`. {% cut "Пример баннера в углу (ограниченная настройка)" %} ![Баннер в углу (ограниченная настройка)](../../_assets/integration-popup.png =800x) {% endcut %} 1. Если нужно проверить несколько вариантов текста или оформления, нажмите кнопку **Добавить вариант**. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента. 1. Для каждого варианта выберите тип виджета из выпадающего списка. 1. Укажите настройки: - **Положение** — положение виджета на странице сайта. Доступные варианты: **Сверху слева**, **Сверху справа**, **Снизу слева** и **Снизу справа**. - **Цветовая тема** — тип цветовой схемы виджета (темная или светлая). Выберите в зависимости от цветовой схемы вашего сайта. - **Заголовок** — текст заголовка виджета. Заголовок выполняется более крупным шрифтом относительно других элементов виджета. Настроить его размер можно только в [расширенной версии Varioqub](https://yandex.com/support/varioqub/ru/paid-functionality.md). - **Текст** — основной текст виджета, расположенный под заголовком и объясняющий суть виджета. - **Название ссылки** — текст ссылки, при нажатии на которую будет осуществляться переход на другую страницу. - **Адрес ссылки** — URL-адрес страницы, на которую будет осуществляться переход при нажатии на ссылки. - **Таймаут повторного показа после закрытия (дни)** — время в днях, через которое виджет будет показан повторно в случае, если пользователь закроет его. {% cut "Интерфейс настроек баннера" %} ![](../../_assets/widgets-2.png) {% endcut %} 1. Используйте окно **Проверка эксперимента** для визуальной проверки размещения виджета на вашем сайте. 1. Нажмите **Сохранить и запустить**. - Баннер на ширину экрана {% note info %} Доступно только в [расширенной версии Varioqub](https://yandex.com/support/varioqub/ru/paid-functionality.md). {% endnote %} Всплывающее анимированное окно. Можно разместить в верхней или в нижней части экрана. Чтобы привлечь внимание пользователя к кнопке, используйте эффект **Пульсирование**. {% cut "Пример баннера на ширину экрана" %} ![Баннер на ширину экрана](../../_assets/integration-banner.png =800x) {% endcut %} 1. Если нужно проверить несколько вариантов текста или оформления, нажмите кнопку **Добавить вариант**. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента. 1. Для каждого варианта выберите тип виджета из выпадающего списка. 1. Укажите настройки: - **Положение** — положение виджета на странице сайта. Доступные варианты: **Сверху экрана**, **Снизу экрана**. - **Цветовая тема** — тип цветовой схемы виджета (темная или светлая). Выберите в зависимости от цветовой схемы вашего сайта. - **Заголовок** — текст заголовка виджета. По умолчанию заголовок выполняется более крупным шрифтом относительно других элементов виджета. Чтобы настроить его размер, воспользуйтесь **Ручной настройкой стилей**. - **Текст** — основной текст виджета, расположенный под заголовком и объясняющий суть виджета. - **Название ссылки** — текст кнопки, при нажатии на которую будет осуществляться переход на другую страницу. - **Адрес ссылки** — URL-адрес страницы, на которую будет осуществляться переход при нажатии на кнопку. - **Эффект кнопки для привлечения внимания** — анимация кнопки со ссылкой. Доступные варианты: **Без эффекта**, **Пульсирование**. - **Скорость анимации** — скорость анимации появления виджета. Доступные варианты: **Быстрая**, **Средняя**, **Медленная** и **Без анимации**. - **Таймер показа баннера (секунды)** — время в секундах, через которое виджет будет показан после загрузки страницы. - **Таймаут повторного показа после закрытия (дни)** — время в днях, через которое виджет будет показан повторно в случае, если пользователь закроет его. - **Значение CSS свойства z-index** — положение виджета на странице относительно других слоев разметки. Если у каких-то из элементов разметки страницы указано собственное свойство `z-index` и оно больше значения по умолчанию для виджета, он будет перекрыт этим элементом. В этом случае увеличьте значение `z-index` для виджета, чтобы он оказался поверх всех элементов. - **Ручная настройка стилей** — настройка стилей вручную позволит настроить виджет под стиль вашего сайта. Такой виджет не выделяется из общей стилистики и смотрится более гармонично. {% note alert %} Для редактирования стилей доступны только CSS-классы, представленные ниже. Изменение других стилей может привести к изменению внешнего вида всей страницы. Для изменения этих настроек требуются знания CSS. {% endnote %} {% cut "Классы CSS, доступные для редактирования" %} - `.ymab-integration-banner-body` — стили размеров и начальной позиции баннера относительно страницы. - `.ymab-integration-banner-body-visible` — стиль положения баннера относительно страницы после появления. - `.ymab-integration-banner-main` — основные стили внутренней части баннера. - `.ymab-integration-banner-text-block` — общие стили текстового блока баннера (заголовка и текста под заголовком). - `.ymab-integration-banner-title` — стили заголовка. - `.ymab-integration-banner-text` — стили текста под заголовком. - `.ymab-integration-banner-button-block` — общие стили блока кнопок баннера (кнопки со ссылкой и кнопки **Закрыть**). - `.ymab-integration-banner-button-link` — стили кнопки со ссылкой. - `.ymab-integration-banner-close` — стили кнопки **Закрыть**. **Пример: Добавление изображения через CSS** Чтобы добавить изображение после основного текста в виджете типа **«Баннер на ширину экрана»**, используйте приведенный ниже пример CSS-кода. Для этого применяется псевдоэлемент `::after` класса `.ymab-integration-banner-title`. **Код**: ```css .ymab-integration-banner-title::after { content: ""; display: block; width: 70px; height: 80px; position: absolute; right: 0; top: 0; background-image: url('https://avatars.mds.yandex.net/get-lpc/1220100/7b110c0f-1d2c-4330-8dd2-ca4de3e8acb5/orig'); background-size: cover; background-position: center; justify-self: center; } .ymab-integration-banner-text-block { position: relative; } ``` **Результат**: ![Баннер на ширину экрана](../../_assets/integration-banner-css.png =800x) {% endcut %} 1. Используйте окно **Проверка эксперимента** для визуальной проверки размещения виджета на вашем сайте. 1. Нажмите **Сохранить и запустить**. - Баннер на всю страницу {% note info %} Доступно только в [расширенной версии Varioqub](https://yandex.com/support/varioqub/ru/paid-functionality.md). {% endnote %} Самый заметный виджет на всю страницу сайта. Такой баннер точно заметит пользователь, который должен будет перейти по ссылке или закрыть окно. {% cut "Пример баннера на всю страницу" %} ![Баннер на всю страницу](../../_assets/integration-fullscreen.png =800x) {% endcut %} 1. Если нужно проверить несколько вариантов текста или оформления, нажмите кнопку **Добавить вариант**. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента. 1. Для каждого варианта выберите тип виджета из выпадающего списка. 1. Укажите настройки: - **Цветовая тема** — тип цветовой схемы виджета (темная или светлая). Выберите в зависимости от цветовой схемы вашего сайта. - **Заголовок** — текст заголовка виджета. По умолчанию заголовок выполняется более крупным шрифтом относительно других элементов виджета. Чтобы настроить его размер, воспользуйтесь **Ручной настройкой стилей**. - **Текст** — основной текст виджета, расположенный под заголовком и объясняющий суть виджета. - **Название ссылки** — текст кнопки, при нажатии на которую будет осуществляться переход на другую страницу. - **Адрес ссылки** — URL-адрес страницы, на которую будет осуществляться переход при нажатии на кнопку. - **Скорость анимации** — скорость анимации появления виджета. Доступные варианты: **Быстрая**, **Средняя**, **Медленная** и **Без анимации**. - **Таймаут повторного показа после закрытия (дни)** — время в днях, через которое виджет будет показан повторно в случае, если пользователь закроет его. - **Значение CSS свойства z-index** — положение виджета на странице относительно других слоев разметки. Если у каких-то из элементов разметки страницы указано собственное свойство `z-index` и оно больше значения по умолчанию для виджета, он будет перекрыт этим элементом. В этом случае увеличьте значение `z-index` для виджета, чтобы он оказался поверх всех элементов. - **Ручная настройка стилей** — настройка стилей вручную позволит настроить виджет под стиль вашего сайта. Такой виджет не выделяется из общей стилистики и смотрится более гармонично. {% note alert %} Для редактирования стилей доступны только CSS-классы, представленные ниже. Изменение других стилей может привести к изменению внешнего вида всей страницы. Для изменения этих настроек требуются знания CSS. {% endnote %} {% cut "Классы CSS, доступные для редактирования" %} - `.ymab-integration-fullscreen-body` — стили размеров и начальной позиции полноэкранного виджета относительно страницы. - `.ymab-integration-fullscreen-main` — основные стили внутренней части полноэкранного виджета. - `.ymab-integration-fullscreen-main-visible` — стиль положения полноэкранного виджета относительно страницы после появления. - `.ymab-integration-fullscreen-close` — стили кнопки **×** (**Закрыть**). - `.ymab-integration-fullscreen-block` — общие стили текстового блока баннера (заголовка и текста под заголовком) и кнопки со ссылкой. - `.ymab-integration-fullscreen-title` — стили заголовка. - `.ymab-integration-fullscreen-text` — стили текста под заголовком. - `.ymab-integration-fullscreen-button-link` — стили кнопки со ссылкой. **Пример: Добавление изображения через CSS** Чтобы добавить изображение после основного текста в виджете типа **«Баннер на всю страницу»**, используйте приведенный ниже пример CSS-кода. Для этого применяется псевдоэлемент `::after` класса `.ymab-integration-fullscreen-text`. **Код**: ```css .ymab-integration-fullscreen-text::after { content: ""; display: block; width: 110px; height: 120px; background-image: url('https://avatars.mds.yandex.net/get-lpc/1220100/7b110c0f-1d2c-4330-8dd2-ca4de3e8acb5/orig'); background-size: cover; background-position: center; margin-top: 1em; justify-self: center; } ``` **Результат**: ![Баннер на всю страницу](../../_assets/integration-fullscreen-css.png =800x) {% endcut %} 1. Используйте окно **Проверка эксперимента** для визуальной проверки размещения виджета на вашем сайте. 1. Нажмите **Сохранить и запустить**. {% endlist %} ## Вопросы и проблемы [При создании эксперимента все поля заблокированы.](https://yandex.com/support/varioqub/ru/faq.md#fields-blocked) [А если нужных условий нет в интерфейсе Varioqub?](https://yandex.com/support/varioqub/ru/faq.md#custom-condition) [Как отключить тип эксперимента на всем сайте или странице?](https://yandex.com/support/varioqub/ru/faq.md#disable-experiment-type)
Задайте вопрос Нейроэксперту — в правом нижнем углу нажмите кнопку ![](../../_assets/neuro-mod.png =150x). Если у вас остались вопросы, напишите в службу поддержки.
Написать в службу поддержки