Настройките за външен вид (Appearance settings) управляват как изглежда уиджетът за чат на Вашия чатбот за посетителите на уебсайта Ви - заглавната част (хедърът), цветовете и шрифтовете на съобщенията, иконата за стартиране, екранът за добре дошли, размерът на уиджета и други. Тук можете да съобразите уиджета с Вашия бранд.
Необходимо е да имате създаден чатбот, преди да можете да променяте стила му. Ако все още не сте създали такъв, започнете с Как да създадете първия си чатбот.
Къде да намерите настройките за външен вид
Изберете Вашия чатбот и отворете 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) добавя кратък надпис към бутона за стартиране, така че посетителите да виждат за какво служи чатът, преди да го отворят. Това е полезно, когато само иконата не е достатъчно ясна - например „Пишете ни / Отговаряме веднага“ или „Имате нужда от помощ? / Попитайте нашия асистент“.
Избирането на този режим добавя четири настройки:
- Ред 1 на етикета (Label line 1) - първият, по-удебелен ред на надписа (макс. 60 знака)
- Ред 2 на етикета (Label line 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%) прави така, че отвореният чат да покрива целия екран. Изборът на по-нисък процент смалява уиджета до съответната част от екрана и го центрира в изгледа (viewport), така че посетителите все още да виждат страницата около чата.
До плъзгачите ще намерите два бутона Запазване и преглед (Save & Preview, маркирани по-долу) - един за редовете за десктоп и един за реда за мобилни устройства. Кликването върху бутон запазва всички незапазени промени и след това отваря чата в прозорец за предварителен преглед с текущите Ви настройки:
- Бутонът за десктоп отваря стандартен прозорец на браузъра, за да видите точния размер на екран на настолен компютър.
- Мобилният бутон отваря компактен изскачащ прозорец (400 x 700), за да се зареди уиджетът в неговото мобилно оформление, което е полезно, когато настройвате плъзгача Mobile size от компютър.
Бутон за максимизиране (Режим на страничен панел / Drawer Mode)
Режимът на страничен панел (Drawer mode) позволява на посетителя да превключи чата от плаващ прозорец в панел с пълна височина, закотвен към края на екрана, като страницата Ви остава видима до него. Подходящ е за разговори, които посетителят чете успоредно с разглеждането на страницата - дълги отговори, сравнения на продукти, формуляри или съдържание с много текст.
Активирайте Maximise button (Бутон за максимизиране) в Widget Size и в заглавната част на чата ще се появи бутон; посетителят решава дали да го използва. Изборът му се запомня за останалата част от текущата сесия на браузване.
- Панелът заема половината от ширината на прозореца на браузъра, до 720 px, и винаги е на пълна височина. Той се закотвя към същата страна, където е Вашият бутон за стартиране (launcher), така че уиджет, позициониран вляво, отваря панела отляво.
- Настройките Desktop width и Desktop height не важат тук - те определят размера само на стандартния плаващ прозорец.
- Бутонът се показва само на настолни екрани с ширина поне 1200 px и свързана мишка. На телефони и таблети той никога не се показва, тъй като там чатът вече запълва екрана. Ако посетител смали прозореца на браузъра под тази ширина, панелът се свива обратно в нормален прозорец.
- Бутонът за стартиране (launcher) е скрит, докато страничният панел е отворен; посетителят може да го затвори от заглавната част или да напусне режима на страничен панел със същия бутон.
Режимът на страничен панел е изключен по подразбиране, така че нищо не се променя за Вашите посетители, докато не го активирате.
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)
Добавете персонализирани CSS стилове за допълнителна промяна на изгледа на Вашия чат уиджет (до 5000 знака):
Свързани статии
Промените се запазват автоматично. Изчакайте надписа Saved (Запазено), след което проверете Overview (Общ преглед) и вградения widget на десктоп и мобилни устройства. Предварителният преглед в настройките показва прозореца на чата; разположението на бутона за стартиране (launcher) и поведението за автоматично отваряне на ниво страница трябва да бъдат проверени и на Вашето вграждане в уебсайта.
- Как да създадете първия си чатбот
- Настройки на разговор - напишете съобщението за добре дошли и предложените въпроси
- Екран за добре дошли - началният изглед на цял екран и неговите варианти за посетителите
- Персонализирани формуляри - събирайте данни от посетителите директно в чата
- Събиране на лийдове