Внешний вид уведомлений «Толпы» задаётся в двух карточках редактора. В «Шаблоне» выбирается готовый стиль и положение на экране, это доступно на любом тарифе. В «Дизайне» настраиваются цвета, шрифт, форма и анимация, это тарифы Pro и Business. Ниже описаны все пять шаблонов, все поля и то, как уведомление ведёт себя на телефоне.
Пять шаблонов
Шаблон задаёт сразу весь набор настроек: форму, цвета, иконку, шрифт и анимацию. Выберите тот, что ближе к стилю сайта, а на Pro доведите детали в «Дизайне».
| Шаблон | Описание в кабинете | Подробности |
|---|---|---|
| Минимал «Тост» | Белая карточка, иконка-плитка, мягкая тень | Шаблон по умолчанию. Шрифт Inter, синий акцент, выезд снизу, полоска времени показа. Подходит почти любому сайту. |
| Стекло «Фрост» | Матовое стекло с размытием, живая точка | Полупрозрачный фон (66 %) с размытием, круглая иконка, появление «пружиной». Хорошо смотрится на ярких и фотографических страницах. |
| Неон «Пульс» | Тёмная карточка, светящаяся полоска, цифры-табло | Тёмный фон, бирюзовый акцент, неоновое свечение, шрифт Montserrat. Цифры живого счётчика моноширинные и светятся цветом акцента, как на табло. Для тёмных сайтов, игр, IT. |
| Премиум «Бутик» | Кремовый фон, золото, шрифт с засечками | Шрифт PT Serif, без иконки, малое скругление, плавное растворение, без полоски времени. Для мебели, ювелирных изделий, ресторанов, услуг премиум-класса. |
| Пастель «Пилюля» | Компактная пилюля в одну строку, цвет по типу события | Уведомление в одну строку, шрифт Nunito, пастельный цвет зависит от вида уведомления. Самый компактный вариант, особенно удобен на телефонах. |
Положение на экране (любой тариф)
Под списком шаблонов в карточке «Шаблон» находится блок «Положение». Он бесплатный: место уведомления важно для удобства сайта, а не для украшения.
- «На компьютере»: «Снизу слева», «Снизу справа», «Сверху слева», «Сверху справа» или «Снизу по центру». Выберите угол, где нет чата, кнопки мессенджеров или кнопки «Наверх».
- «На телефоне»: «Сверху» или «Снизу».
- «Отступ на телефоне»: от 8 до 160 px от края экрана.
Карточка «Дизайн» (Pro и Business)
На тарифе Free поля «Дизайна» видны, но заблокированы с подсказкой «Цвета, шрифт, скругления и анимация — на тарифах Pro и Business» и кнопкой «Подключить Pro». На Pro и Business доступны три группы настроек.
«Вид»
- «Форма уведомления»: «Карточка в две строки» или «Пилюля в одну строку».
- «Размер»: «Компактный», «Обычный», «Крупный».
- «Иконка»: «Плитка», «Круг», «Кольцо» или «Без иконки». Иконки показывают вид события (корзина, трубка, глаз), лиц и аватаров людей среди них нет.
- «Ширина»: от 260 до 440 px на компьютере.
- «Отступ от края»: от 8 до 64 px на компьютере.
«Цвета»
- «Акцент», «Фон», «Заголовок», «Вторая строка» и необязательная «Обводка».
- «Непрозрачность фона»: от 40 до 100 %. Меньше 100 % даёт эффект стекла.
- «Пастельный цвет по типу события»: каждый вид уведомления получает свой мягкий фон (заявки, онлайн, объявления).
Если текст плохо читается на выбранном фоне (контраст ниже 4,5:1), редактор предупредит и подскажет, что сделать темнее или светлее.
«Форма, шрифт и движение»
- «Скругление»: от 0 до 28 px.
- «Тень»: «Без тени», «Мягкая», «Выразительная».
- «Шрифт»: Inter, Montserrat, Nunito, Unbounded, Roboto, PT Serif или «Шрифт сайта» (уведомление возьмёт шрифт вашей страницы).
- «Появление»: «Выезд», «Пружина», «Растворение», «Без анимации».
- «Неоновое свечение»: светящаяся полоска сбоку карточки.
- «Полоска времени показа»: тонкая линия внизу, которая показывает, сколько уведомление ещё будет на экране.
Кнопка «Вернуть значения шаблона» сбрасывает все поля «Дизайна» к значениям выбранного шаблона. При смене шаблона его значения тоже подставятся в поля «Дизайна» (блок «Положение» при этом не меняется), поэтому сначала выберите шаблон, а потом меняйте детали.
Как уведомление выглядит на телефоне
На узких экранах (до 600 px) уведомление становится шириной во весь экран без 12 px с каждой стороны (не шире 440 px) и встаёт по центру сверху или снизу, как выбрано в поле «На телефоне». Заголовок сокращается до одной строки, «Пилюля» всегда целиком помещается на экран, крестик остаётся видимым. Поля «Ширина» и «Отступ от края» действуют только на компьютере, на телефоне работает «Отступ на телефоне».
Виджет сам проверяет, нет ли у края экрана закреплённой шапки или нижней панели (например, кнопки «Купить»), и сдвигает уведомление так, чтобы их не закрывать. Учитываются вырезы экрана iPhone. Убрать уведомление можно свайпом в сторону. Если в настройках телефона включено уменьшение движения, уведомления появляются без выезда, простым проявлением.
Пауза между уведомлениями на телефоне не меньше 20 секунд, даже если в «Правилах показа» задано меньше. Чтобы вообще не показывать «Толпу» на телефонах, выключите «Показывать на мобильных» в «Основном» или выберите «Только компьютеры» в поле «Устройства».
White Label: строка о сервисе
Под уведомлением мелким шрифтом выводится строка «работает на технологии Все Виджеты», на телефоне тоже, тонкой строкой под текстом. На тарифе Business в карточке «White Label» есть поле «Брендирование» с вариантами «Отображать ссылку на сервис», «Отключить ссылку на сервис» и «Свой HTML-код». На Free и Pro строка остаётся.
Дальше: как создать и настроить «Толпу», источники данных, возможности виджета на странице «Толпа», сравнение тарифов на странице «Тарифы».