Налаштування зовнішнього вигляду визначають, як віджет чату вашого чатбота виглядає для відвідувачів на вашому вебсайті - шапка, кольори та шрифти повідомлень, іконка запуску, екран привітання, розмір віджета тощо. Саме тут ви можете адаптувати віджет до стилю вашого бренду.
Перш ніж налаштовувати стиль, вам потрібен чатбот. Якщо ви ще не створили його, почніть із посібника Як створити свій перший чатбот.
Де знайти налаштування зовнішнього вигляду
Виберіть свого чатбота та перейдіть до 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, які браузер відвідувача завантажує один раз. Кожен із них має резервний шрифт, тому, якщо мережа відвідувача блокує 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 з настільного комп'ютера.
Кнопка розгортання: Maximise Button (Drawer Mode)
Drawer mode (Режим бічної панелі) дозволяє відвідувачу перетворити чат із плаваючого вікна на панель на всю висоту екрана, прикріплену до його краю, залишаючи вашу сторінку видимою поруч. Це зручно для розмов, які відвідувач веде одночасно з читанням сторінки - довгі відповіді, порівняння товарів, заповнення форм або робота з великими обсягами тексту.
Увімкніть Maximise button (Кнопка розгортання) у розділі Widget Size, і в шапці чату з'явиться кнопка; відвідувач сам вирішує, чи використовувати її. Його вибір запам'ятовується на всю поточну сесію перегляду.
- Панель займає половину ширини вікна браузера (максимум до 720 px) і завжди розгортається на повну висоту. Вона прикріплюється до того самого боку, де розташована ваша кнопка запуску: тобто віджет, розміщений ліворуч, відкриває панель ліворуч.
- Параметри Desktop width та Desktop height тут не застосовуються - вони регулюють розмір лише звичайного плаваючого вікна.
- Кнопка показується лише на екранах комп'ютерів завширшки не менше 1200 px за наявності миші. На смартфонах і планшетах вона ніколи не відображається, оскільки там чат і так займає весь екран. Якщо відвідувач зменшить вікно браузера нижче цього значення, бічна панель знову перетвориться на звичайне вікно.
- Поки панель відкрита, кнопка запуску прихована; відвідувач закриває її з шапки або повертається зі шторки тією ж кнопкою.
Режим Drawer mode вимкнено за замовчуванням, тому для ваших відвідувачів нічого не зміниться, доки ви його не ввімкнете.
Інші налаштування зовнішнього вигляду
- 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)
Додайте власні стилі CSS для глибшої адаптації вигляду вашого віджета чату (максимум 5000 символів):
Пов'язані статті
Зміни зберігаються автоматично. Зачекайте появи напису Saved (Збережено), після чого перевірте вкладку Overview (Огляд) та вбудований віджет на комп'ютері та мобільних пристроях. Вікно попереднього перегляду в налаштуваннях демонструє лише вікно чату; розміщення кнопки запуску та поведінку автоматичного відкриття на рівні сторінки також слід перевірити безпосередньо у вашому вбудовуванні на вебсайті.
- Як створити свій перший чатбот
- Налаштування розмови - написання привітального повідомлення та підказок запитань
- Welcome Screen - повноекранний початковий макет та його варіанти відображення для відвідувачів
- Власні форми - збір даних відвідувачів усередині чату
- Збір лідів