Настроить оформление

Здесь настраивается внешний вид окна: фон, логотип, изображение и положение кнопки. Удобно быстро перебрать варианты, сразу посмотреть как выглядит окно и потестировать оформление. 

С фоном всё просто — в настройках уже есть готовые решения, остаётся выбрать тот, который лучше подходит под стиль сайта. 

Все настройки в разделе находятся тут, а на превью ниже показано, как окно выглядит с выбранным цветом фона:

Логотип можно добавить или оставить окошко пустым — ориентируйтесь на свой сайт и бренд. Лого загружается в форматах PNG или JPG. Самый безошибочный размер — 100×56 px, при таком масштабе ваш логотип аккуратно встанет на своё место и не обрежется.

Для наглядности приводим два примера: в одном логотип слишком большой, во втором — подходит по размеру.

Итог каков: чтобы не мучиться с подгоном логотипа, лучше сразу выбирать файл размером 100×56 px.

Изображение можно загрузить своё или выбрать из галереи. Оно задаёт настроение окна и усиливает смысл, если подходит по теме. Перед загрузкой посмотрите на окно целиком: не отвлекает ли картинка, связана ли она с продуктом, работает ли на задачу.

Как и у логотипа, поддерживаются форматы PNG и JPG, но здесь оптимальный размер — 264×90 px. Можно загрузить и больше, при настройке вы сами выберите нужный фрагмент. Главное, чтобы картинка не растягивалась, не теряла чёткость и нужные детали при обрезке. Ещё можете ставить картинку слева, справа или сверху. 

Пример оформления окна с загруженной картинкой:

Если сомневаетесь в выборе изображения, лучше оставить окно без картинки — это безопасный вариант. Не стоит добавлять её только ради заполнения или потому что она «классная», так как любой добавленный элемент может отвлекать от важного. 

Положение кнопки на мобильных устройствах позволяет подобрать оптимальное расположение плавающей кнопки, которая прибита к правому нижнему углу и скролится вместе со страницей. На телефонах элементы расположены плотнее, поэтому есть отдельная настройка — отступ от низа до 60 px вверх, чтобы кнопка аккуратно вписывалась в интерфейс и не перекрывала важные элементы сайта. Поиграйте с отступами и проверьте, удобно ли нажимать кнопку на вашем сайте.

Чтобы сразу увидеть, как эта настройка работает в реальном интерфейсе, ниже пример мобильного отображения: