Оформление виджета бронирования (визуал)
Настройка внешнего вида формы бронирования — цвета, шрифты, скругления, всё, что видит клиент.
Что такое «Стиль» и зачем их несколько
Стиль — это полностью независимый, самостоятельный набор оформления для формы бронирования: свои цвета, свой шрифт, свои скругления, свои цвета при наведении — вообще всё. Стили никак не связаны и не наследуются друг от друга (кроме одного нюанса — см. ниже).
Количество доступных стилей зависит от тарифного плана — на Start доступен только один, на старших тарифах больше, дополнительные помечены жёлтой меткой PRO.
Зачем это может понадобиться: один и тот же квест можно встроить на сайт сразу в нескольких местах с разным оформлением — например, форма на главной странице в тёмных тонах под общий дизайн сайта, а форма на отдельной рекламной посадочной странице — в ярких цветах под конкретную акцию. Не нужно создавать отдельный квест-дубликат ради другого цвета кнопки — просто настраиваете второй Стиль и при получении кода виджета (статья «Получение кода для сайта») выбираете, какой из стилей использовать именно для этой конкретной вставки на сайт.
Количество доступных стилей зависит от тарифного плана — на Start доступен только один, на старших тарифах больше, дополнительные помечены жёлтой меткой PRO.
Зачем это может понадобиться: один и тот же квест можно встроить на сайт сразу в нескольких местах с разным оформлением — например, форма на главной странице в тёмных тонах под общий дизайн сайта, а форма на отдельной рекламной посадочной странице — в ярких цветах под конкретную акцию. Не нужно создавать отдельный квест-дубликат ради другого цвета кнопки — просто настраиваете второй Стиль и при получении кода виджета (статья «Получение кода для сайта») выбираете, какой из стилей использовать именно для этой конкретной вставки на сайт.
Если у вас несколько квестов — кнопка «Скопировать стиль из другого квеста» позволяет перенести уже готовый, настроенный стиль с одного квеста на другой целиком, одним действием, вместо повторной ручной настройки каждого цвета.
Копирование стиля
Есть два разных способа копирования оформления — важно не перепутать, для чего каждый нужен.
«Скопировать стиль из другого квеста» — если у вас несколько квестов, переносит уже готовый стиль оформления с одного квеста на другой целиком. Открывает окно с выбором квеста-источника, номера стиля-источника и номера стиля, куда вставить.
«Взять из Стиль N» — копирование между стилями внутри одного и того же квеста. Показывается только если у вас доступно больше одного стиля по тарифу. Нажатие на кнопку конкретного стиля полностью перезаписывает текущий открытый стиль настройками выбранного — удобно, если вы уже настроили Стиль 1 и хотите Стиль 2 сделать похожим, поменяв только пару деталей, а не с нуля.
«Скопировать стиль из другого квеста» — если у вас несколько квестов, переносит уже готовый стиль оформления с одного квеста на другой целиком. Открывает окно с выбором квеста-источника, номера стиля-источника и номера стиля, куда вставить.
«Взять из Стиль N» — копирование между стилями внутри одного и того же квеста. Показывается только если у вас доступно больше одного стиля по тарифу. Нажатие на кнопку конкретного стиля полностью перезаписывает текущий открытый стиль настройками выбранного — удобно, если вы уже настроили Стиль 1 и хотите Стиль 2 сделать похожим, поменяв только пару деталей, а не с нуля.
Важно понимать: новый, ещё не тронутый стиль не наследует автоматически ваши настройки из Стиля 1 — он показывается с заводскими цветами по умолчанию, одинаковыми для всех новых стилей. Если хотите, чтобы новый стиль отталкивался от уже настроенного — используйте кнопку «Взять из Стиль N» сразу после открытия нового стиля, а не настраивайте его с нуля вручную.
Общие настройки и Слоты
Это оформление самого календаря — той сетки дат и времени, которую клиент видит первой, ещё до открытия формы бронирования.
- Шрифт / Ссылка на CSS шрифта — если хотите свой фирменный шрифт вместо стандартного, указываете его название и ссылку на файл шрифта;
- Фон страницы — общий фон всего виджета целиком;
- Фон навигации / Текст навигации — кнопки переключения между месяцами / днями сверху календаря;
- Скругление слота / Обводка слота — форма самих ячеек с временем в календаре (скруглённые уголки, толщина рамки);
- Дальше — три независимых набора цветов для трёх разных типов дней: обычный день, вечер (диапазон часов, который вы задаёте в общих настройках квеста — «Начало/Конец вечерних слотов») и выходной. Для каждого — свой Фон/Текст/Обводка слота, плюс отдельно «Цвет даты» и «Дни недели» (сама цифра дня и подпись дня недели над ней). Это позволяет визуально отличать, например, вечерние сеансы от дневных прямо в календаре, не открывая слот.
Занятые слоты
Занятый слот — тот, на который уже нельзя записаться. Такими становятся:
— Слоты с существующей записью;
— Соседние слоты, закрытые настройкой «Слотов закрыть» у Дня рождения или Праздника;
— Слоты, закрытые записью на связанном квесте (см. Настройка поля «Связанная группа»);
— Слоты, до начала которых осталось меньше времени, чем задано в поле «Блок за N минут»;
— Прошедшие слоты.
Все они выглядят одинаково и не кликаются. Четыре поля:
СКРУГЛЕНИЕ УГЛОВ
Отдельной настройки у занятых слотов нет. Скругление берётся общее, из поля «Скругление слота» в разделе «Общие настройки и Слоты», и применяется ко всем слотам сразу. Это сделано намеренно: разные радиусы у свободных и занятых слотов в одной сетке выглядят как сбой вёрстки.
КАК ВЫБРАТЬ ЦВЕТА
Задача занятого слота — быть понятным, но не перетягивать внимание. Свободные слоты должны бросаться в глаза первыми. Рабочий подход: фон занятого делают близким к фону страницы, текст — приглушённым серым, обводку — либо в цвет фона, либо убирают вовсе. Тогда занятые слоты уходят на второй план, а свободные читаются сразу.
Избегайте ярких и контрастных цветов. Занятых слотов в загруженный день больше, чем свободных, и виджет превратится в пёстрое полотно, где будет непонятно, куда нажимать.
— Слоты с существующей записью;
— Соседние слоты, закрытые настройкой «Слотов закрыть» у Дня рождения или Праздника;
— Слоты, закрытые записью на связанном квесте (см. Настройка поля «Связанная группа»);
— Слоты, до начала которых осталось меньше времени, чем задано в поле «Блок за N минут»;
— Прошедшие слоты.
Все они выглядят одинаково и не кликаются. Четыре поля:
- Фон занятых слотов — цвет заливки;
- Цвет текста занятых слотов — время и цена внутри слота;
- Цвет обводки занятых слотов — цвет рамки;
- Размер обводки занятых слотов (px) — толщина рамки. Значение 0 в размере обводки убирает рамку полностью.
СКРУГЛЕНИЕ УГЛОВ
Отдельной настройки у занятых слотов нет. Скругление берётся общее, из поля «Скругление слота» в разделе «Общие настройки и Слоты», и применяется ко всем слотам сразу. Это сделано намеренно: разные радиусы у свободных и занятых слотов в одной сетке выглядят как сбой вёрстки.
КАК ВЫБРАТЬ ЦВЕТА
Задача занятого слота — быть понятным, но не перетягивать внимание. Свободные слоты должны бросаться в глаза первыми. Рабочий подход: фон занятого делают близким к фону страницы, текст — приглушённым серым, обводку — либо в цвет фона, либо убирают вовсе. Тогда занятые слоты уходят на второй план, а свободные читаются сразу.
Избегайте ярких и контрастных цветов. Занятых слотов в загруженный день больше, чем свободных, и виджет превратится в пёстрое полотно, где будет непонятно, куда нажимать.
Дополнительно
- «Разделительная линия между датами» — тонкая полоса, разделяющая один день от другого в списке; включаете чекбоксом, настраиваете толщину и цвет;
- Цвет / Фон ползунка — здесь задаётся цвет и фон скроллбара (вертикальная полоса прокрутки справа экрана);
- Текст кнопки брони (px) — размер шрифта у надписи на самой кнопке.
Модальное окно и Поля ввода
Это уже оформление всплывающего окна, которое открывается при клике на конкретный слот времени — там, где клиент вводит имя/телефон и подтверждает бронь.
- Тип фона формы — сплошной цвет или CSS-градиент/картинка (для градиента подставляете свой CSS-код в поле «Значение»);
- Скругление / Обводка окна — форма самого всплывающего окна;
- Название квеста / Цвет времени / Сумма заказа / Фон суммы / Цвет крестика — отдельные элементы внутри окна: заголовок, выбранное время, итоговая цена и фон под ней, крестик закрытия окна;
- Фон / Текст / Обводка полей ввода — сами поля «Имя», «Телефон» и т. д., плюс отдельно «Актив обводка» — каким цветом подсвечивается рамка поля, когда клиент кликнул в него для ввода;
- Цвет заголовков / Цвет Placeholder — подписи над полями и бледный текст-подсказка внутри пустого поля;
- Опции селекта — цвет текста в выпадающих списках (например, при выборе пакета дня рождения);
- Фон галочки / Актив галочка — чекбоксы согласий (политика конфиденциальности, обработка персональных данных).
Дополнительные услуги
Как выглядят карточки доп. услуг внутри формы — раздельно для обычного состояния (услуга просто показана в списке) и выбранного (клиент кликнул на неё, чтобы добавить к брони): свой Фон / Текст / Обводка для каждого состояния, плюс общее скругление карточки.
Кнопка бронирования
Финальная кнопка отправки формы:
- Тип фона / Значение — сплошной цвет либо градиент;
- Текст кнопки — цвет текста надписи;
- Скругление / Обводка кнопки (цвет + толщина отдельно);
- Обводка текста — контур вокруг букв (эффект «обводки», редко нужен, но доступен);
- Написание текста — Обычное / ЗАГЛАВНЫМИ / строчными / С Большой Буквы.
Цвета при наведении (Hover)
Всё, что происходит визуально, когда клиент наводит курсор мышью (не кликает, а именно наводит) — отдельно для слотов дня, вечера и выходных в календаре, и отдельно для самой кнопки бронирования.
Эффект при наведении (Hover)
Если не хотите эффекта «поднятия» слота при наведении — есть отдельный чекбокс «Отключить анимацию слота при наведении (поднятие)» внизу всего раздела.
