Интеграции

Небольшое окно в углу страницы. Не мешает контенту и подойдет для любой верстки сайта. В отличие от баннера в углу, доступного только в расширенной версии, не позволяет изменять стили, расстояния до края страницы и значение свойства 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. Нажмите Сохранить и запустить.