Виджеты

Небольшое окно в углу страницы. Не мешает контенту и подойдет для любой верстки сайта. В отличие от баннера в углу, доступного только в расширенной версии, не позволяет изменять стили, расстояния до края страницы и значение свойства z-index.

1. Если нужно проверить несколько вариантов текста или оформления, нажмите кнопку Добавить вариант. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента.

2. Для каждого варианта выберите тип виджета из выпадающего списка.

3. Укажите настройки:

   • Положение — положение виджета на странице сайта. Доступные варианты: Сверху слева, Сверху справа, Снизу слева и Снизу справа.

   • Цветовая тема — тип цветовой схемы виджета (темная или светлая). Выберите в зависимости от цветовой схемы вашего сайта.

   • Заголовок — текст заголовка виджета. Заголовок выполняется более крупным шрифтом относительно других элементов виджета. Настроить его размер можно только в расширенной версии Varioqub.

   • Текст — основной текст виджета, расположенный под заголовком и объясняющий суть виджета.

   • Название ссылки — текст ссылки, при нажатии на которую будет осуществляться переход на другую страницу.

   • Адрес ссылки — URL-адрес страницы, на которую будет осуществляться переход при нажатии на ссылки.

   • Таймаут повторного показа после закрытия (дни) — время в днях, через которое виджет будет показан повторно в случае, если пользователь закроет его.

4. Используйте окно Проверка эксперимента для визуальной проверки размещения виджета на вашем сайте.

5. Нажмите Сохранить и запустить.

Всплывающее анимированное окно. Можно разместить в верхней или в нижней части экрана. Чтобы привлечь внимание пользователя к кнопке, используйте эффект Пульсирование.

1. Если нужно проверить несколько вариантов текста или оформления, нажмите кнопку Добавить вариант. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента.

2. Для каждого варианта выберите тип виджета из выпадающего списка.

3. Укажите настройки:

   • Положение — положение виджета на странице сайта. Доступные варианты: Сверху экрана, Снизу экрана.

   • Цветовая тема — тип цветовой схемы виджета (темная или светлая). Выберите в зависимости от цветовой схемы вашего сайта.

   • Заголовок — текст заголовка виджета. По умолчанию заголовок выполняется более крупным шрифтом относительно других элементов виджета. Чтобы настроить его размер, воспользуйтесь Ручной настойкой стилей.

   • Текст — основной текст виджета, расположенный под заголовком и объясняющий суть виджета.

   • Название ссылки — текст кнопки, при нажатии на которую будет осуществляться переход на другую страницу.

   • Адрес ссылки — URL-адрес страницы, на которую будет осуществляться переход при нажатии на кнопку.

   • Эффект кнопки для привлечения внимания — анимация кнопки со ссылкой. Доступные варианты: Без эффекта, Пульсирование.

   • Скорость анимации — скорость анимации появления виджета. Доступные варианты: Быстрая, Средняя, Медленная и Без анимации.

   • Таймер показа баннера (секунды) — время в секундах, через которое виджет будет показан после загрузки страницы.

   • Таймаут повторного показа после закрытия (дни) — время в днях, через которое виджет будет показан повторно в случае, если пользователь закроет его.

   • Значение CSS свойства z-index — положение виджета на странице относительно других слоев разметки.

     Если у каких-то из элементов разметки страницы указано собственное свойство z-index и оно больше значения по умолчанию для виджета, он будет перекрыт этим элементом. В этом случае увеличьте значение z-index для виджета, чтобы он оказался поверх всех элементов.

   • Ручная настройка стилей — настройка стилей вручную позволит настроить виджет под стиль вашего сайта. Такой виджет не выделяется из общей стилистики и смотрится более гармонично.

     Внимание

     Для редактирования стилей доступны только CSS-классы, представленные ниже. Изменение других стилей может привести к изменению внешнего вида всей страницы. Для изменения этих настроек требуются знания CSS.

   Классы 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 — стили кнопки Закрыть.

4. Используйте окно Проверка эксперимента для визуальной проверки размещения виджета на вашем сайте.

5. Нажмите Сохранить и запустить.

Самый заметный виджет на всю страницу сайта. Такой баннер точно заметит пользователь, который должен будет перейти по ссылке или закрыть окно.

1. Если нужно проверить несколько вариантов текста или оформления, нажмите кнопку Добавить вариант. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента.

2. Для каждого варианта выберите тип виджета из выпадающего списка.

3. Укажите настройки:

   • Цветовая тема — тип цветовой схемы виджета (темная или светлая). Выберите в зависимости от цветовой схемы вашего сайта.

   • Заголовок — текст заголовка виджета. По умолчанию заголовок выполняется более крупным шрифтом относительно других элементов виджета. Чтобы настроить его размер, воспользуйтесь Ручной настойкой стилей.

   • Текст — основной текст виджета, расположенный под заголовком и объясняющий суть виджета.

   • Название ссылки — текст кнопки, при нажатии на которую будет осуществляться переход на другую страницу.

   • Адрес ссылки — URL-адрес страницы, на которую будет осуществляться переход при нажатии на кнопку.

   • Скорость анимации — скорость анимации появления виджета. Доступные варианты: Быстрая, Средняя, Медленная и Без анимации.

   • Таймаут повторного показа после закрытия (дни) — время в днях, через которое виджет будет показан повторно в случае, если пользователь закроет его.

   • Значение CSS свойства z-index — положение виджета на странице относительно других слоев разметки.

     Если у каких-то из элементов разметки страницы указано собственное свойство z-index и оно больше значения по умолчанию для виджета, он будет перекрыт этим элементом. В этом случае увеличьте значение z-index для виджета, чтобы он оказался поверх всех элементов.

   • Ручная настройка стилей — настройка стилей вручную позволит настроить виджет под стиль вашего сайта. Такой виджет не выделяется из общей стилистики и смотрится более гармонично.

     Внимание

     Для редактирования стилей доступны только CSS-классы, представленные ниже. Изменение других стилей может привести к изменению внешнего вида всей страницы. Для изменения этих настроек требуются знания CSS.

   Классы 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 — стили кнопки со ссылкой.

4. Используйте окно Проверка эксперимента для визуальной проверки размещения виджета на вашем сайте.

5. Нажмите Сохранить и запустить.