Внешний вид сообщений «Фокуса» задаётся в двух карточках редактора. В «Шаблоне» выбирается одно из пяти готовых оформлений, это доступно на любом тарифе. В «Дизайне» на тарифах Pro и Business можно поменять цвета, шрифт, скругление, затемнение страницы и анимацию. Ниже о каждом шаблоне, обо всех полях дизайна и о том, как сообщения выглядят на телефоне. Как создать виджет, рассказано в статье «Как создать и настроить «Фокус»».
Пять шаблонов
Шаблон задаёт сразу всё: цвета карточки и кнопки, шрифт, форму кнопки, скругление, силу затемнения для окна и прожектора, цвет рамки подсветки и анимацию появления. Шаблон по умолчанию — «Минимал».
| Шаблон | Описание в кабинете | Чем отличается |
|---|---|---|
| Минимал | Записка: белая карточка, ничего лишнего | Синяя кнопка с заливкой, шрифт Inter, скругление 16 px, всплывает снизу. Подходит почти любому сайту. |
| Стекло | Линза: матовое стекло и светящийся прожектор | Полупрозрачная карточка с размытием, фиолетовый акцент, шрифт Montserrat, белая светящаяся рамка вокруг подсвеченного элемента, появление «пружинкой». |
| Неон | Маяк: тёмная карточка с неоновой обводкой | Тёмный фон, бирюзовый акцент, моноширинный заголовок, самое сильное затемнение страницы, свечение рамки и маячка, выезжает сбоку. |
| Премиум | Консьерж: слоновая кость, засечки, золото | Светлый тёплый фон, шрифт с засечками, кнопка-ссылка со стрелкой вместо заливки, почти прямые углы, золотистая рамка подсветки, плавно проявляется. |
| Пастель | Стикер: тёплый листок с лёгким наклоном | Жёлтый листок с коралловой кнопкой, шрифт Nunito, лёгкий наклон «стикер», мягкое затемнение. Когда посетитель открывает форму, стикер выпрямляется, чтобы удобно было печатать. |
Те же пять стилей есть у других новых виджетов AllWidgets: квиза, калькулятора, «Ловца лидов», «Толпы» и «Мультикнопки». Поэтому все виджеты на сайте можно одеть в один стиль.
Угол для сообщения
Под шаблонами в той же карточке поле «Угол для сообщения»: «Справа внизу» или «Слева внизу». Оно доступно на любом тарифе. Выберите угол, который не занят кнопкой чата или другим виджетом.
Как выглядят форматы показа
Формат выбирается у каждого сообщения на вкладке «Сообщение» в поле «Как показать». Шаблон оформляет все четыре формата одинаково:
- Сообщение в углу — карточка в выбранном углу экрана, страницу не закрывает;
- Окно по центру — окно с затемнением страницы, для важного, например при уходе;
- Подсветка элемента — прожектор: страница затемняется, нужная кнопка или блок остаются яркими, рядом подсказка со стрелкой;
- Маячок на элементе — пульсирующая точка на блоке, подсказка открывается при наведении или касании.
Когда какой формат выбирать и как указать элемент страницы, рассказано в статье «Триггеры и сценарии «Фокуса»».
Карточка «Дизайн» на тарифах Pro и Business
Здесь можно поправить шаблон под фирменный стиль. Поля сгруппированы:
- Цвета: «Акцент и кнопка», «Фон карточки», «Текст». Цвет задаётся палитрой или кодом вида #2F6BFF. Если акцент плохо читается на фоне карточки, виджет сам делает его темнее или светлее для текста и обводок, а надпись на кнопке становится белой или тёмной под цвет кнопки.
- Форма и шрифт: «Поверхность» (сплошная или матовое стекло), «Кнопка» (заливка, контур или ссылка со стрелкой), «Скругление» от 0 до 32 px, «Ширина карточки» от 280 до 440 px, «Шрифт» (Inter, Montserrat, Nunito, Unbounded, Roboto, PT Serif или шрифт вашего сайта), «Заголовок» (шрифтом карточки, моноширинный или с засечками).
- Прожектор и маячок: «Затемнение страницы» от 0 до 85 % для окна по центру и подсветки, «Свой цвет рамки подсветки», «Свой цвет маячка» (без галочки берётся цвет акцента), «Свечение рамки и маячка».
- Анимация: «Появление» (всплывает снизу, пружинка, выезжает сбоку, проявляется или без анимации), «Наклон «стикер»», «Тень».
Кнопка «Вернуть значения шаблона» сбрасывает все поля к выбранному шаблону. Удобно так: выберите шаблон, близкий по настроению, и поменяйте только акцент и шрифт.
На тарифе Free поля «Дизайна» видны, но заблокированы, сверху надпись «Цвета, шрифт, скругления и анимация — на тарифах Pro и Business» и кнопка «Подключить Pro». На сайте сообщение выглядит точно по шаблону. Если тариф Pro закончится, сообщения вернутся к оформлению выбранного шаблона.
Сообщения изолированы от стилей сайта: CSS вашей темы не ломает карточку, а карточка не меняет вид страницы. Если у посетителя в системе включено уменьшение движения, сообщения появляются без анимации.
Мобильная версия
Отдельно настраивать телефон не нужно. На экранах уже 600 px сообщения перестраиваются сами:
- сообщение в углу и окно по центру становятся нижним листом во всю ширину экрана;
- подсветка затемняет страницу, поднимает элемент повыше, а подсказка с кнопками появляется нижним листом, чтобы не закрывать подсвеченное;
- маячок остаётся на элементе, подсказка открывается касанием и тоже показывается снизу.
Проверить телефонный вид можно в превью редактора, переключателем «Телефон». Чтобы «Фокус» вообще показывался на телефонах, в карточке «Основное» должно быть включено «Показывать на мобильных». Если одно сообщение нужно только на компьютере, выберите устройство на вкладке «Кому и где» этого сообщения.
Отправитель и аватар
В шапке сообщения стоят имя, подпись и аватар из карточки «Отправитель»: эмодзи, первая буква имени, картинка или ничего. Аватар оформляется в стиле шаблона: у «Премиума», например, он крупнее, с тонкой обводкой цвета акцента, а имя написано курсивом с засечками. Логотип для аватара лучше квадратный, от 96×96 px.
White Label
Внизу каждого сообщения мелкая строка «работает на технологии Все Виджеты». В карточке «White Label» на тарифе Business в поле «Брендирование» можно выбрать «Отключить ссылку на сервис» или «Свой HTML-код», например ссылку на ваш сайт. На других тарифах карточка заблокирована. Подробнее на странице White Label.