Настройките за външен вид (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 (Текст на отговора) - цвят на текста на отговорите от чатбота
Размерът на текста на съобщенията се настройва в секцията 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%) кара отворения чат да покрие целия екран. Избирането на по-нисък процент смалява уиджета до съответната част от екрана и го центрира в изгледа (viewport), така че посетителите все още виждат страницата около чата.
До плъзгачите ще намерите два бутона Save & Preview (Запазване и предварителен преглед) - посочени по-долу - един за редовете за десктоп и един за реда за мобилни устройства. Кликването върху бутона записва всички незапазени промени и отваря чата в прозорец за предварителен преглед с текущите Ви настройки:
- Бутонът за десктоп отваря нормален прозорец на браузъра, за да видите точния размер на десктоп екран.
- Бутонът за мобилни устройства отваря компактен изскачащ прозорец (400 x 700), така че уиджетът да се зареди в мобилния си изглед, което е полезно при настройка на плъзгача Mobile size от настолен компютър.
Drawer Mode (Режим на страничен панел)
Drawer mode позволява на посетителя да превключи чата от плаващ прозорец към панел с пълна височина, фиксиран към ръба на екрана, докато Вашата страница остава видима до него. Това е удобно при разговори, през които посетителят преминава, докато чете страницата - дълги отговори, сравнения на продукти, формуляри или съдържание с много текст.
Включете го и в хедъра на чата ще се появи бутон; посетителят решава дали да го използва. Изборът му се запомня за остатъка от сесията на разглеждане.
- Панелът заема половината от ширината на прозореца на браузъра, до максимум 720 px, и винаги е с пълна височина. Той се закрепва от същата страна, на която се намира Вашият стартов бутон, така че уиджет, позициониран вляво, отваря страничен панел отляво.
- Desktop width и Desktop height не важат тук - те определят размера само на стандартния плаващ прозорец.
- Бутонът се показва само на десктоп екрани с ширина най-малко 1200 px и свързана мишка. Той никога не се появява на телефони и таблети, тъй като там чатът вече заема целия екран. Ако посетителят свие браузъра под тази ширина, страничният панел се прибира обратно в стандартния прозорец.
- Стартовият бутон остава скрит, докато страничният панел е отворен; посетителят го затваря от хедъра или излиза от режим drawer със същия бутон.
Drawer mode е изключен по подразбиране, така че нищо не се променя за посетителите Ви, докато не го активирате.
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 знака):
Свързани статии
- Как да създадете първия си чатбот
- Настройки на разговора - въвеждане на приветственото съобщение и предложените въпроси
- Welcome Screen - оформление на цял екран при стартиране и неговите варианти от страната на посетителя
- Персонализирани формуляри - събиране на данни от посетителите директно в чата
- Събиране на лийдове