Настройки внешнего вида управляют тем, как виджет чата вашего чат-бота выглядит для посетителей вашего сайта - шапка, цвета и шрифты сообщений, иконка запуска, экран приветствия, размер виджета и многое другое. Здесь вы можете адаптировать виджет под свой бренд.
Прежде чем настраивать внешний вид чат-бота, его необходимо создать. Если вы еще этого не сделали, начните со статьи Как создать своего первого чат-бота.
Где найти настройки внешнего вида
Выберите своего чат-бота и перейдите в 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 (Собственная иконка чата, только в режиме иконки) - включите, чтобы загрузить собственные иконки открытия/закрытия чата
- 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) - если что-либо из этого требуется в начале беседы, форма или запрос согласия отображаются прямо на приветственной карточке вместо предложенных вопросов.
Подробные сведения, варианты макета и скриншоты со стороны посетителя смотрите в статье Экран приветствия.
Действия в шапке (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, которые браузер посетителя загружает один раз. У каждого из них предусмотрен резервный вариант (fallback), поэтому, если сеть посетителя блокирует 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) позволяет посетителю переключить чат из плавающего окна в полноразмерную панель во всю высоту экрана, прикрепленную к его краю, сохраняя видимой страницу рядом. Это удобно для диалогов, с которыми посетитель взаимодействует параллельно с чтением страницы - длинные ответы, сравнения товаров, формы или любые материалы с большим объемом текста.
Включите опцию Maximise button (Кнопка развертывания) в разделе Widget Size, и в шапке чата появится кнопка; посетитель сам решает, использовать ли ее. Выбранный режим запоминается до конца сессии.
- Ширина панели составляет половину окна браузера (но не более 720 px), а высота всегда занимает 100%. Она закрепляется с той же стороны, где расположена кнопка запуска: виджет, размещенный слева, откроет панель слева.
- Параметры Desktop width и Desktop height здесь не действуют - они определяют размеры только для обычного плавающего окна.
- Кнопка отображается только на экранах ПК шириной от 1200 px при использовании мыши. На телефонах и планшетах она не появляется, так как там чат и так занимает весь экран. Если посетитель уменьшит окно браузера ниже этой ширины, панель вернется в стандартное плавающее окно.
- Пока панель открыта, кнопка запуска скрыта; посетитель может закрыть чат из шапки или выйти из режима панели с помощью той же кнопки.
Режим боковой панели по умолчанию выключен, поэтому для ваших посетителей ничего не изменится, пока вы его не активируете.
Другие настройки внешнего вида (Other Appearance Settings)
- Widget Shadow (Тень виджета) - включение или выключение тени вокруг контейнера виджета чата
- Open links in (Открывать ссылки в) - выберите, должны ли ссылки в сообщениях чата открываться в новой вкладке (new tab) или в той же вкладке (same tab)
На компьютерах в шапке чата также отображается кнопка закрытия (X), чтобы посетители могли свернуть чат обратно до иконки запуска без перезагрузки страницы. Кнопка закрытия не отображается, если чат встроен через iframe или открыт в полноэкранном режиме.
Пользовательский подвал чата (Custom Chat Footer)
Добавьте собственный текст, который будет отображаться в самом низу виджета чата (максимум 250 символов). Поддерживается разметка Markdown для вставки ссылок. Обычно здесь размещают ссылки на политику конфиденциальности или условия использования.
Пример разметки:
By chatting you accept our [Privacy Policy](https://www.example.com)
Пользовательский CSS (Custom CSS)
Добавьте собственные стили CSS для более тонкой настройки внешнего вида вашего виджета чата (максимум 5000 символов):
Связанные статьи
Изменения сохраняются автоматически. Дождитесь статуса Saved (Сохранено), затем проверьте Overview (Обзор) и встроенный виджет на ПК и мобильных устройствах. Предпросмотр в настройках показывает окно чата; расположение кнопки запуска и поведение автооткрытия на уровне страницы также следует проверить на встроенном виджете вашего сайта.
- Как создать своего первого чат-бота
- Настройки диалога - составление приветственного сообщения и предложенных вопросов
- Экран приветствия - полноэкранный начальный макет и его варианты отображения для посетителей
- Пользовательские формы - сбор данных о посетителях прямо в чате
- Сбор лидов