Настройки внешнего вида управляют тем, как виджет чата вашего чат-бота выглядит для посетителей на сайте - шапка, цвета и шрифты сообщений, иконка запуска, экран приветствия, размер виджета и многое другое. Здесь вы можете адаптировать виджет под стиль вашего бренда.
Для настройки оформления вам понадобится созданный чат-бот. Если вы еще этого не сделали, начните с руководства Как создать своего первого чат-бота.
Где найти настройки внешнего вида
Выберите своего чат-бота и перейдите в Settings > Appearance (Настройки > Внешний вид). На главной странице ChatLab нажмите Chatbots (Чат-боты), откройте чат-бота, перейдите на вкладку Settings (Настройки) и выберите Appearance (Внешний вид) в левом меню.
В правой части страницы отображается интерактивный предпросмотр виджета, который обновляется по мере изменения параметров.
Шапка чата (Chat Header)
Настройте внешний вид верхней части виджета чата:
- Chatbot name (Имя чат-бота) - отображаемое имя в шапке чата (максимум 60 символов)
- Tagline (Подзаголовок) - дополнительный подзаголовок под именем чат-бота (максимум 60 символов)
- Avatar (Аватар) - загрузите изображение, которое посетители будут видеть при общении с чат-ботом. Используйте кнопку Remove (Удалить), выделенную ниже, чтобы удалить текущую картинку.
- Background (Фон) - цвет фона области шапки
- Name color (Цвет имени) - цвет текста имени чат-бота
- Tagline color (Цвет подзаголовка) - цвет текста подзаголовка
- Reset conversation tooltip (Подсказка сброса диалога) - текст подсказки при наведении курсора на кнопку сброса диалога в шапке виджета (максимум 40 символов, по умолчанию "Reset conversation")
Сообщения (Message)
Настройте поле ввода и оформление сообщений в диалоге:
- Input placeholder (Плейсхолдер поля ввода) - текст подсказки в поле ввода нового сообщения внизу виджета (максимум 50 символов, по умолчанию "Type a message..."). Используйте его, чтобы побудить посетителей начать диалог.
- User background (Фон пользователя) - цвет фона сообщений посетителя
- User text (Текст пользователя) - цвет текста сообщений посетителя
- Resp. background (Фон ответа) - цвет фона ответов чат-бота
- Response text (Текст ответа) - цвет текста ответов чат-бота
Размер шрифта сообщений задается в разделе Типографика вместе с основным шрифтом виджета.
Подсказанные вопросы (Suggested Questions)
Подсказанные вопросы - это готовые кнопки с подсказками, нажав на которые посетитель может начать диалог. Сами вопросы настраиваются в Settings > Chat Conversation; здесь же оформляется внешний вид кнопок:
- Background (Фон) - цвет фона кнопок подсказанных вопросов
- Text (Текст) - цвет текста кнопок подсказанных вопросов
- Stack (Размещение друг под другом) - если включено, длинные вопросы располагаются вертикально стопкой вместо появления горизонтальной полосы прокрутки
Размер шрифта подсказанных вопросов задается в разделе Типографика.
Настройки свернутого режима (Minimized-Mode Settings)
Определяют, как выглядит виджет, когда он свернут (до того, как посетитель откроет чат):
- Minimized display mode (Режим отображения в свернутом виде) - выберите один из вариантов:
- Icon (Иконка) - стандартная круглая иконка запуска чата (по умолчанию)
- Minified chat bar (Компактная строка чата) - небольшая строка ввода в нижней части страницы
- Icon with text (Иконка с текстом) - широкая кнопка-плашка: иконка с короткой двухстрочной подписью
- Icon color / Mini bar color (Цвет иконки / цвет мини-строки) - цвет фона иконки запуска или компактной строки
- Custom chat icon (Своя иконка чата, только для режима Icon) - включите, чтобы загрузить собственные иконки для открытия и закрытия чата
- Position on screen (Позиция на экране) - расположение виджета в левой или правой части экрана
- Move up chat icon/bar by (Сместить иконку/строку вверх на) - вертикальный отступ в пикселях от нижнего края
- Move icon/bar left/right by (Сместить иконку/строку влево/вправо на) - горизонтальный отступ в пикселях от ближайшего края экрана
Иконка с текстом (Icon with Text)
Режим Icon with text добавляет к кнопке запуска короткую подпись, чтобы посетители сразу видели назначение чата еще до его открытия. Это полезно, если обычной иконки недостаточно - например, "Напишите нам / Отвечаем мгновенно" или "Нужна помощь? / Спросите ассистента".
При выборе этого режима появляются четыре параметра:
- Label line 1 (Строка подписи 1) - первая, более заметная строка подписи (максимум 60 символов)
- Label line 2 (Строка подписи 2) - вторая строка шрифтом посветлее (максимум 60 символов). Оставьте поле пустым для однострочной подписи
- Text color (Цвет текста) - цвет текста подписи. Если оставить поле нетронутым, ChatLab автоматически выберет черный или белый цвет в зависимости от того, насколько темная или светлая кнопка запуска
- Show close cross (Показывать крестик закрытия) - добавляет небольшой крестик на кнопку, чтобы посетители могли ее скрыть
Обе строки укорачиваются многоточием, если текст не помещается, поэтому кнопка запуска никогда не выходит за пределы экрана. При открытии чата плашка снова сворачивается в круглую иконку.
Если ваш чат-бот мультиязычный, обе строки подписи переводятся вместе с остальными текстами интерфейса, поэтому каждый посетитель видит подпись на своем языке.
Опция Show close cross по умолчанию выключена и доступна только в этом режиме. Если ее включить, клик по крестику скрывает кнопку запуска до конца текущей сессии - кнопка не отображается при переходе между страницами и появится снова только при следующем визите или в новой вкладке. Если в чат-боте настроено автоматическое открытие, виджет учтет выбор посетителя и повторно открываться не будет.
Автоматическое открытие виджета после загрузки страницы (Auto Open Chat Widget After Page Load)
Настройте автоматическое разворачивание чата при загрузке страницы:
- Auto open on mobile (Автооткрытие на мобильных) - автоматически открывает чат на мобильных устройствах
- Auto open on desktop (Автооткрытие на компьютерах) - автоматически открывает чат на экранах компьютеров
- Open chat with delay (Открывать чат с задержкой) - включает задержку перед автооткрытием (доступно, только если автооткрытие включено)
- Delay by (Задержка на) - время ожидания в секундах перед открытием (0-60 секунд)
Имитация набора текста человеком (Human-Like Messaging)
Имитирует набор текста человеком, разделяя ответы на несколько сообщений-облачков, которые появляются постепенно предложение за предложением:
- Human-Like Messaging - переключатель для включения или выключения функции
- Delay Between Bubbles (Задержка между сообщениями) - пауза в секундах между появлением каждого облачка с сообщением (0-200 секунд)
Всплывающее облачко приветствия (Welcome Message Bubble)
Показывает приветственное сообщение в облачке над иконкой запуска чата, привлекая внимание посетителей. Функция доступна только в режиме иконки и не работает во фреймах (iframe) или при включенном автооткрытии.
- Show on desktop (Показывать на компьютерах) - отображать облачко с приветствием на десктопах
- Show on mobile (Показывать на мобильных) - отображать облачко с приветствием на мобильных устройствах
- Delay (Задержка) - пауза в секундах после загрузки страницы перед показом облачка (0-60 секунд)
Если у вас настроено несколько приветственных сообщений, они появятся стопкой над иконкой чата.
Голосовой ввод (кнопка микрофона в поле ввода) настраивается в разделе Settings > Chat Conversation, а не здесь в Appearance.
Экран приветствия (Welcome Screen)
Переключает виджет в специальный стартовый режим, который встречает новых посетителей крупным приветственным сообщением и подсказанными вопросами на белой карточке по центру. Экран приветствия отображается только в начале новой сессии и переключается на стандартный вид чата, как только посетитель отправляет первое сообщение.
- Special Welcome Screen (Специальный экран приветствия) - включает или выключает режим экрана приветствия (по умолчанию выключен)
- Suggested questions intro (Вступление к подсказанным вопросам) - короткая надпись над карточкой вопросов на приветственном экране (например, "Выберите вариант или напишите сообщение"). Оставьте поле пустым, чтобы скрыть текст. Требует настроенных подсказанных вопросов в Settings > Chat Conversation.
- Hide Human Contact Form (Скрыть форму связи с оператором) - скрывает кнопку формы связи в шапке на время показа экрана приветствия
- Hide Live Chat (Скрыть Live Chat) - скрывает кнопку чата наживо в шапке на время показа экрана приветствия
Экран приветствия также интегрирован со сбором лидов (Lead Collection) и согласием с политикой конфиденциальности (Privacy Policy consent): если в начале диалога требуется заполнить форму или дать согласие, карточка приветствия покажет их вместо подсказанных вопросов.
Подробную информацию, варианты разметки и скриншоты со стороны посетителя смотрите в статье Welcome Screen.
Действия в шапке (Header Actions)
Определяет способ отображения кнопок Live Chat и формы связи (Human Contact Form) в шапке виджета.
- Separate icons (Отдельные иконки) - каждое действие получает свою иконку в шапке рядом с кнопкой закрытия
- Menu (dropdown) (Меню (выпадающий список)) - оба действия переносятся в меню шапки (иконка с тремя точками) вместе с пунктами вроде "Reset conversation" и переключателем языков (если они включены)
Новые чат-боты по умолчанию используют выпадающее меню, чтобы не перегружать шапку по мере добавления новых действий. У чат-ботов, созданных до 2 сентября 2026 года, сохраняются отдельные иконки, поэтому для их посетителей ничего не изменится. Переключить оформление можно в любой момент: параметр меняет только отображение, функции кнопок остаются прежними.
Типографика (Typography)
Задает семейство шрифтов и размеры текста для всего виджета: сообщений, подсказанных вопросов, шапки, форм и подписи на кнопке запуска.
- Widget font (Шрифт виджета) - один из восьми шрифтов: System default (Системный по умолчанию), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif и JetBrains Mono
- Message font size (Размер шрифта сообщений) - кегль текста сообщений (12-24 px)
- Suggested questions font size (Размер шрифта подсказанных вопросов) - кегль текста кнопок с вопросами (12-24 px)
Шрифт Inter выбран по умолчанию и полностью соответствует тому, как выглядели боты до появления этой настройки, поэтому до выбора другого шрифта ничего во внешнем виде не изменится.
Параметр System default ничего не скачивает: виджет использует шрифт, уже установленный на устройстве посетителя. Это самый быстрый вариант, который гармонично вписывается в сайты с системными шрифтами, однако чат будет выглядеть немного по-разному на Windows, macOS и Android. Остальные семь шрифтов - это Google Fonts, которые браузер посетителя загружает один раз. Для каждого предусмотрен запасной системный вариант шрифта, поэтому, если в сети посетителя заблокированы сервисы Google Fonts, текст останется читаемым, а верстка не сломается.
Файл шрифта загружается непосредственно внутри окна чата. На вашу страницу он подгружается только в тех случаях, когда текст выводится за пределами окна: кнопка запуска Icon with text, мини-строка чата или облачко приветствия. Чат-бот с обычной иконкой запуска не создает никаких дополнительных запросов к вашей странице.
Размер виджета (Widget Size)
Настройте размеры открытого виджета чата на экранах компьютеров и мобильных устройств. Рядом с каждым ползунком есть кнопка Default (По умолчанию), которая сбрасывает настройки к стандартным значениям.
- Desktop width (Ширина на десктопе) - ширина виджета в браузерах на компьютерах в пикселях (330-800, по умолчанию 448)
- Desktop height (Высота на десктопе) - высота виджета в браузерах на компьютерах в пикселях (300-770, по умолчанию 660)
- Mobile size (Размер на мобильных) - размер виджета на смартфонах в процентах от площади экрана (60-100%, по умолчанию 100%)
При значении по умолчанию виджет использует встроенную адаптивную верстку ChatLab. Любое другое значение устанавливает фиксированный размер.
На смартфонах значение по умолчанию (100%) раскрывает чат на весь экран. При выборе меньшего процента виджет уменьшается до указанного размера и центрируется по экрану, позволяя посетителям видеть саму страницу вокруг чата.
Рядом с ползунками расположены две кнопки Save & Preview (Сохранить и просмотреть), выделенные ниже: одна для настроек десктопа, вторая для мобильных. Нажатие на кнопку сохраняет изменения и открывает окно предпросмотра чата с текущими параметрами:
- Кнопка для десктопа открывает обычное окно браузера, чтобы вы могли увидеть точный размер на мониторе.
- Кнопка для мобильных открывает компактное всплывающее окно (400 x 700) в мобильной разметке, что удобно при подборе значения Mobile size с компьютера.
Боковая панель (Drawer Mode)
Режим Drawer mode позволяет посетителю переключить чат из плавающего окна в полноразмерную боковую панель, прикрепленную к краю экрана, при этом страница остается открытой рядом с ней. Это удобно для диалогов, с которыми посетитель работает параллельно с чтением страниц сайта: длинные ответы, сравнение товаров, заполнение форм или объемные тексты.
При включении функции в шапке чата появляется соответствующая кнопка; использовать ли боковую панель, решает сам посетитель. Выбор запоминается до конца сессии.
- Панель занимает половину ширины окна браузера (но не более 720 px) и всю высоту экрана. Она крепится к той же стороне, где расположена кнопка запуска: если виджет был слева, то и панель откроется слева.
- Параметры Desktop width и Desktop height в этом режиме не действуют - они задают размеры только для обычного плавающего окна.
- Кнопка появляется только на экранах компьютеров шириной от 1200 px при наличии мыши. На смартфонах и планшетах она не показывается, так как чат там и так занимает весь экран. Если посетитель уменьшит окно браузера ниже 1200 px, панель автоматически свернется обратно в стандартное окно.
- Пока открыта боковая панель, кнопка запуска скрыта; закрыть панель или выйти из этого режима посетитель может с помощью кнопки в шапке.
По умолчанию режим Drawer mode выключен, поэтому для посетителей ничего не изменится, пока вы сами его не активируете.
Другие настройки внешнего вида (Other Appearance Settings)
- Widget Shadow (Тень виджета) - включение или отключение тени вокруг контейнера виджета
- Open links in (Открывать ссылки в) - выбор места открытия ссылок из сообщений чата: в новой вкладке (new tab) или в текущей вкладке (same tab)
В шапке чата на десктопе также отображается кнопка закрытия (крестик), позволяющая посетителю свернуть чат обратно в иконку без перезагрузки страницы. Кнопка закрытия скрыта, если чат встроен через iframe или развернут на весь экран.
Пользовательский подвал чата (Custom Chat Footer)
Добавьте собственный текст в нижней части виджета чата (максимум 250 символов). Поддерживается разметка Markdown для добавления ссылок. Чаще всего поле используется для ссылки на политику конфиденциальности или условия использования.
Пример разметки:
By chatting you accept our [Privacy Policy](https://www.example.com)
Пользовательские стили CSS (Custom CSS)
Добавьте свои стили CSS для более тонкой настройки оформления виджета чата (максимум 5000 символов):
Похожие статьи
- Как создать своего первого чат-бота
- Настройки диалога - составление текста приветствия и подсказанных вопросов
- Welcome Screen - полноэкранный приветственный интерфейс и варианты его отображения
- Пользовательские формы - сбор контактных данных посетителей прямо в чате
- Сбор лидов