Подробная инструкция по настройке виджета

Баннер — Genium24

Цель виджета
Гибкий визуальный баннер (попап, плавающий блок, встроенный элемент) с полноценным drag-and-drop редактором.
Позволяет создавать:

• акции и таймерные предложения
• формы захвата лидов
• приветственные блоки
• промо-баннеры с кнопками
• кастомные попапы
• выделение важных элементов
• любые визуальные блоки с точным позиционированием

Ключевые преимущества

• визуальный редактор (перетаскивание текста, кнопок, фото, фигур)
• отдельные настройки для Desktop и Mobile
• слои, тени, радиус, прозрачность, overlay
• триггеры: загрузка, скролл, клик, бездействие, exit-intent
• фиксированное / центрированное / встроенное размещение

Структура настроек (3 вкладки)

• Визуальное редактирование — холст, элементы, слои
• Настройки — позиция на странице, затемнение, редирект
• Поведение — триггер показа, задержки, звук

1. Визуальное редактирование — создание дизайна

Холст

• Переключайтесь между Desktop и Mobile
• Масштаб: 50–100% для удобства редактирования
• Размеры по умолчанию: 500×563 px (меняйте под задачу)

Элементы (слева)
Перетаскивайте на холст:

• Текст
• Кнопка
• Изображение
• Фигуры: прямоугольник, круг
• Стрелка
• Звезда

Настройки элемента (справа)

• Текст: шрифт, размер, цвет, жирность, выравнивание
• Кнопка: текст, цвет фона/текста, радиус, ссылка/действие
• Изображение: загрузка, размер, обрезка, ссылка
• Фигура: цвет заливки/обводки, прозрачность, тень
• Общие: позиция X/Y, поворот, масштаб, порядок слоёв (вверх/вниз)

Фон холста

• Цвет
• Изображение (загрузить)
• Overlay (затемнение) → включить, прозрачность 0–100%

Стили холста

• Радиус углов
• Тень: включить/выключить, цвет, смещение X/Y, размытие
• Прозрачность всего баннера

2. Настройки — размещение на странице

Тип позиционирования

• По центру (автоматически) — классический попап (рекомендуется)
• Фиксировано (по координатам) — плавающий баннер
• Встроить баннер — вставить в конкретное место страницы

Затемнение фона

• Включить — затемняет страницу под баннером (для модальных окон)
• Выключить — для ненавязчивых плавающих блоков

Дополнительно

• Перенаправление при клике — включить, если баннер ведёт на другую страницу (/akciya, /kurs и т.д.)

3. Поведение — когда и как показывать

Триггер показа

• После загрузки страницы — самый простой
• По клику на элемент — укажите CSS-селектор (.btn-buy, #order)
• При скролле — укажите % прокрутки (30%, 50%, 70%)
• При бездействии — через сколько секунд без движения мыши
• При попытке уйти (exit-intent) — движение курсора к верху экрана

Задержка (сек)

• 0–10 сек
  Рекомендуется: 0–3 сек для загрузки, 5–8 сек для бездействия

Показывать один раз

• Включить — баннер показывается один раз за визит/день
• Выключить — показывать каждый раз при триггере

Звук при показе

• Включить — короткий звук появления (рекомендуется выключить для большинства случаев)

Проверка после сохранения

1. Нажмите Сохранить настройки
2. Откройте сайт в режиме инкогнито
3. Протестируйте триггер:
   • загрузка страницы
   • скролл
   • клик на элемент
   • бездействие 5–10 сек
   • движение курсора к крестику вкладки
4. Убедитесь:
   • баннер появляется в нужный момент
   • дизайн адаптирован под Desktop и Mobile
   • кнопки кликабельны и ведут куда нужно
   • затемнение работает (если включено)
   • закрытие возможно (крестик или кнопка)

ТОП-улучшения конверсии

• триггер «После загрузки» + задержка 2–4 сек
• яркая кнопка с текстом «Забрать -50%» / «Получить подарок»
• затемнение фона + возможность закрытия
• крупное фото подарка/товара
• конкретный оффер в заголовке («Только 2 часа!»)
• показ один раз + звук выключен (если не критично)

Ожидаемый результат

• рост кликов / заявок на 15–60% на целевых страницах
• отличный инструмент для акций, приветствий и удержания внимания

Удачной настройки и ярких баннеров! 🚀