Внешний вид окна «Ловца лидов» задают две карточки редактора: «Шаблон» и «Дизайн». Шаблон доступен на всех тарифах и сразу даёт готовый стиль: цвета, шрифты, форму окна, вид таймера и анимацию. В «Дизайне» на Pro и Business всё это можно подогнать под фирменный стиль сайта. Как создать окно и поставить его на сайт, описано в статье «Как создать и настроить «Ловец лидов»».
Пять шаблонов
Шаблон выбирается в карточке «Шаблон» кликом по миниатюре, превью справа меняется сразу.
| Шаблон | Как выглядит | Кому подходит |
|---|---|---|
| «Минимал» | Чистый лист: белое окно 460 px, много воздуха и одна яркая кнопка, таймер строкой | Сервисы, B2B, сайты в спокойном стиле |
| «Стекло» | Витрина: окно в две колонки 780 px, слева иллюстрация на цветном градиенте, справа форма на матовом стекле, таймер плитками. Выбран по умолчанию | Интернет-магазины, онлайн-школы, лид-магниты с картинкой |
| «Неон» | Распродажа: тёмный фон, свечение, крупный шрифт Unbounded, сильное затемнение страницы | Акции, «чёрная пятница», молодёжные бренды |
| «Премиум» | Приглашение: бежевый фон, заголовки с засечками, тонкая рамка и золотые акценты, мягкое растворение | Салоны, ювелирные и мебельные магазины, частные консультации |
| «Пастель» | Купон: окно-купон с перфорацией и вырезами по краям, пастельный фон, промокод в рамке и конфетти на экране «Спасибо» | Скидки и промокоды, товары для дома, детские и beauty-магазины |
Шаблон меняет только оформление. Тексты, поля формы, бонус и правила показа остаются прежними, поэтому шаблоны можно спокойно перебирать.
Иллюстрация или своя картинка
Блок «Картинка или иллюстрация» в карточке «Содержимое окна» предлагает пять встроенных иллюстраций: «Чек-лист», «Подарок», «Скидка», «Консультация» и «Запись». Они нарисованы в цветах шаблона и не требуют загрузки файлов. Чтобы поставить фото товара или обложку своего PDF, выберите «Своя картинка» и вставьте адрес картинки, он должен начинаться с https://. Заполните «Описание для незрячих (alt)», если картинка несёт смысл.
«Расположение» картинки: «Сбоку — окно в две колонки» или «Среди блоков, по порядку». На узких экранах и в карточке в углу боковая картинка скрывается или уменьшается, чтобы форма поместилась.
Карточка «Дизайн» на Pro и Business
На Free поля «Дизайна» видны, но заблокированы, поверх надпись «Цвета, шрифт, скругления и анимация — на тарифах Pro и Business. На Free доступен выбор шаблона.» и кнопка «Подключить Pro». На Pro и Business доступны все поля:
- Цвета: «Кнопка и акценты», «Градиент кнопки» (необязательный второй цвет), «Текст кнопки», «Фон окна», «Градиент фона», «Текст», «Фон иллюстрации».
- Шрифт и размеры: «Шрифт заголовков» и «Шрифт текста» (Inter, Montserrat, Nunito, Unbounded, Roboto, PT Serif или «Шрифт сайта»), «Размер заголовка» от 20 до 44 px, «Скругление углов» от 0 до 32 px, «Ширина окна» от 360 до 880 px, «Вид таймера»: «Плитки» или «Строка».
- Фон страницы и анимация: «Затемнение страницы» от 0 до 85%, «Появление»: «Увеличение», «Выезд», «Растворение» или «Без анимации», переключатели «Размыть страницу под окном» и «Тень окна».
Если фон окна тёмный, подписи, поля и рамки автоматически становятся светлыми. Кнопка «Вернуть значения шаблона» сбрасывает все поля к значениям выбранного шаблона. Если перейти с Pro на Free, окно на сайте снова будет выглядеть как исходный шаблон.
Как окно выглядит на телефоне
Отдельно настраивать мобильную версию не нужно. На экранах до 640 px окно перестраивается само:
- «Окно по центру» и «Боковая панель» становятся нижним листом: окно выезжает снизу, его можно закрыть крестиком или смахнуть вниз;
- «Карточка в углу» растягивается по ширине экрана внизу;
- у плашки кнопка занимает всю ширину, надзаголовок и таймер скрываются, чтобы плашка оставалась низкой;
- «Во весь экран» остаётся полноэкранным, иллюстрация уходит наверх.
Поля формы на телефоне крупные, у телефона цифровая клавиатура, крестик не меньше 44 px. Если у посетителя в системе включено уменьшение движения, анимации и конфетти не показываются. Посмотреть мобильный вид можно в превью кнопкой «Телефон».
White Label
Внизу окна мелким шрифтом стоит ссылка «работает на технологии Все Виджеты». На тарифе Business её можно убрать или заменить своей: в карточке «White Label» в поле «Брендирование» выберите «Отключить ссылку на сервис» или «Свой HTML-код» и впишите его в поле «Ваш HTML-код». На Free и Pro карточка заблокирована. Тарифы сравниваются на странице «Тарифы».
Что дальше: форматы окна, таймер, бонус и согласие на обработку данных описаны в статье «Форматы окна, таймер, бонус и согласие на обработку ПДн». Все возможности виджета собраны на странице «Ловец лидов».