Внешний вид мультикнопки задают две карточки редактора. В «Шаблоне» выбирается один из пяти готовых стилей, это доступно на всех тарифах. В «Дизайне» на Pro и Business можно поменять цвета, форму и размер кнопки, способ раскрытия, шрифт и анимацию. Ниже разобраны оба уровня, мобильная версия и подпись сервиса. Как создать виджет с нуля, описано в статье «Как создать и настроить Мультикнопку».
Пять шаблонов
Шаблон меняет сразу всё: цвета, форму главной кнопки, раскладку списка, шрифт и анимацию. Новый виджет создаётся с шаблоном «Стекло».
| Шаблон | Как выглядит | Раскрытие и подписи |
|---|---|---|
| Минимал «Капля» | Столбик круглых кнопок с подписями, синий акцент, шрифт Inter, анимация «Пульс» | Вертикальный список, подписи всегда, фирменные цвета каналов |
| Стекло «Панель» | Карточка с заголовком, статусом и списком каналов, матовое стекло, градиент на кнопке, анимация «Волна» | Панель-карточка, у каждого канала название и подпись |
| Неон «Орбита» | Тёмная кнопка, каналы раскрываются веером, шрифт Montserrat | Веер на компьютере, подписи при наведении, мягкие фирменные цвета |
| Премиум «Визитка» | Кнопка-ярлык с текстом и визитка менеджера с каналами, монохромные иконки, без анимации | Панель-карточка, форма кнопки «Пилюля с текстом» |
| Пастель «Док» | Плитки каналов в пастельных тонах, шрифт Nunito, анимация «Подпрыгивание» | Плитки, на телефоне — нижняя панель |
Шаблон «Премиум» лучше всего раскрывается с заполненной визиткой: в карточке «Главная кнопка и панель» укажите «Имя менеджера», «Должность» и «Фото», а в поле «Текст на кнопке» — надпись для кнопки-ярлыка, например «Персональный менеджер». Без имени шапка покажет заголовок и статус, как в «Стекле».
Рядом с шаблонами в той же карточке есть поле «Положение на странице»: «Справа внизу» или «Слева внизу». Оно тоже работает на бесплатном тарифе.
Карточка «Дизайн» на Pro и Business
На тарифах Pro и Business поля карточки «Дизайн» активны. Выбор шаблона подставляет его значения во все поля, дальше их можно менять по одному. Кнопка «Вернуть значения шаблона» сбрасывает ваши правки к выбранному шаблону.
| Группа | Поле | Варианты |
|---|---|---|
| Раскрытие | «Как раскрывается» | «Вертикальный список», «Веер (на компьютере)», «Панель-карточка», «Плитки» |
| Раскрытие | «Подписи у кнопок» | «Всегда», «При наведении», «Без подписей» |
| Раскрытие | «Иконки каналов» | «Фирменные цвета», «Фирменные, мягкие», «Монохромные», «В цвет акцента» |
| Главная кнопка | «Форма», «Размер» | «Круг», «Скруглённый квадрат», «Пилюля с текстом»; от 48 до 72 px |
| Главная кнопка | «Привлечение внимания», «Пауза между анимациями» | «Без анимации», «Пульс», «Волна», «Покачивание», «Подпрыгивание»; пауза от 10 до 60 секунд |
| Цвета | «Главная кнопка», «Градиент кнопки», «Иконка и текст на кнопке», «Фон панели», «Текст», «Второстепенный текст» | Любые цвета; градиент включается галочкой |
| Форма и шрифт | «Скругление панели», «Шрифт», «Тень», «Матовое стекло» | Скругление от 0 до 32 px; Inter, Montserrat, Nunito, Unbounded, Roboto, PT Serif или «Шрифт сайта» |
| Отступы от края экрана | «Компьютер: сбоку», «Компьютер: снизу», «Телефон: сбоку», «Телефон: снизу», «Телефон: сторона» | Отступы в пикселях; сторона на телефоне «Как на компьютере» или «Противоположная» |
Анимация привлечения внимания срабатывает редко: первый раз через несколько секунд после загрузки, затем с выбранной паузой, не больше пяти раз за страницу и только пока посетитель ни разу не раскрыл кнопку. Если в системе посетителя включено уменьшение движения, анимации нет.
Что видно на бесплатном тарифе
На Free карточка «Дизайн» видна, но поля в ней заблокированы, а сверху написано: «Цвета, шрифт, скругления и анимация — на тарифах Pro и Business. На Free доступен выбор шаблона». На сайте виджет показывается в чистом виде выбранного шаблона с вашим положением на странице. Если раньше вы настроили дизайн на Pro, а потом перешли на Free, настройки сохраняются в кабинете, но на сайте действует шаблон.
Мобильная версия
Отдельный виджет для телефонов делать не нужно: мультикнопка сама перестраивается на узком экране.
- Панель-карточка и плитки открываются нижним листом на всю ширину экрана, с затемнением страницы. Закрыть лист можно крестиком или нажатием вне него.
- Веер на телефоне превращается в вертикальный список, а подписи «При наведении» показываются всегда: наводить курсор на сенсорном экране нечем.
- Главная кнопка на телефоне не больше 60 px, даже если в «Размере» выбрано больше.
- Для телефона есть свои отступы и сторона экрана: например, на компьютере справа, а на телефоне слева, если справа у вас кнопка чата магазина.
- Отдельные действия можно показывать только на телефоне или только на компьютере: поле «Где показывать» в карточке действия.
Если в карточке «Основное» выключено «Показывать на мобильных», на телефонах кнопки не будет совсем.
Подъём над другими виджетами и панелями
Во многих магазинах внизу экрана телефона закреплена панель с ценой и кнопкой «В корзину», а на некоторых сайтах висит баннер cookie. Чтобы мультикнопка их не закрывала, в карточке «Действия» включите «Поднимать кнопку над нижней панелью сайта» (в новом виджете включено). Виджет сам находит закреплённую внизу полосу и встаёт над ней, а когда полоса исчезает, возвращается на место.
Подъём срабатывает на широкие полосы у нижнего края, а не на маленькие кнопки в углу. Если в том же углу стоит другой плавающий виджет, например кнопка чата, разнесите их: поставьте мультикнопку в другой угол полем «Положение на странице» или увеличьте отступ «снизу» на Pro.
White Label
Под списком каналов мультикнопка показывает маленькую подпись «работает на технологии Все Виджеты». На тарифе Business в карточке «White Label» в поле «Брендирование» можно выбрать «Отключить ссылку на сервис» или «Свой HTML-код», чтобы поставить на это место свою подпись. На Free и Pro карточка заблокирована, подпись остаётся.
Дальше: «Действия, расписание и QR-код Мультикнопки» — что вводить в каждое действие и как работает рабочее время. Возможности виджета кратко — на странице «Мультикнопка».