Налаштування зовнішнього вигляду визначають, як віджет чату вашого чатбота відображається для відвідувачів на вашому вебсайті - заголовок, кольори та шрифти повідомлень, іконка запуску, екран привітання, розмір віджета тощо. Тут ви можете адаптувати віджет до стилю вашого бренду.
Перш ніж налаштовувати зовнішній вигляд чатбота, його необхідно створити. Якщо ви ще цього не зробили, почніть зі статті Як створити свого першого чатбота.
Де знайти налаштування зовнішнього вигляду
Виберіть свого чатбота та перейдіть до 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 (Текст відповіді) - колір тексту у відповідях чатбота
Розмір тексту повідомлень задається в розділі Typography (Типографіка) разом зі шрифтом віджета.
Suggested Questions
Запропоновані запитання - це готові варіанти звернень, на які відвідувач може натиснути, щоб почати розмову. Самі запитання ви формулюєте в розділі Settings > Chat Conversation (Налаштування > Розмова чату), а тут налаштовується візуальний вигляд цих кнопок:
- Background (Тло) - колір тла кнопок запропонованих запитань
- Text (Текст) - колір тексту кнопок запропонованих запитань
- Stack (Розміщувати один під одним) - якщо цей параметр увімкнено, довгі запропоновані запитання розташовуються вертикально замість горизонтальної прокрутки
Розмір тексту запропонованих запитань задається в розділі Typography.
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) - якщо щось із цього обов'язкове на початку розмови, форма або запит на згоду відображатимуться на картці привітання замість запропонованих запитань.
Детальнішу інформацію, варіанти макетів і скріншоти того, як це виглядає для користувачів, дивіться у статті 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, які браузер відвідувача завантажує один раз. Кожен із них має резервний шрифт (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) дозволяє відвідувачу перемикати чат із плаваючого вікна на панель на всю висоту екрана, прикріплену до його краю, зберігаючи видимість вашої сторінки поруч. Це зручно для діалогів, з якими відвідувач працює паралельно з переглядом матеріалів на сторінці: для довгих відповідей, порівняння товарів, заповнення форм або будь-яких завдань із великим обсягом тексту.
Увімкніть його, і в заголовку чату з'явиться відповідна кнопка - користувач сам вирішує, чи користуватися цим режимом. Зроблений вибір запам'ятовується на всю поточну сесію.
- Панель займає половину ширини вікна браузера (максимум до 720 px) і завжди розгортається на повну висоту. Вона закріплюється з того ж боку, де розташована кнопка запуску: віджет, розташований ліворуч, відкриває панель з лівого краю.
- Параметри 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. Зазвичай це використовується для розміщення посилання на політику конфіденційності або умови використання.
Приклад розмітки Markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS
Додайте власні стилі CSS для подальшого налаштування зовнішнього вигляду вашого віджета чату (максимум 5000 символів):
Related Articles
- Як створити свого першого чатбота
- Налаштування розмови - написання вітального повідомлення та запропонованих запитань
- Welcome Screen - повноекранний початковий інтерфейс та його варіанти відображення для відвідувачів
- Власні форми - збір даних відвідувачів усередині чату
- Збір лідів