Setările pentru Appearance (Aspect) controlează modul în care widgetul de chat al chatbotului dumneavoastră arată pentru vizitatorii de pe site-ul web - antetul, culorile și fonturile mesajelor, pictograma de lansare, ecranul de bun venit, dimensiunea widgetului și multe altele. Aici adaptați widgetul la identitatea mărcii dumneavoastră.
Aveți nevoie de un chatbot înainte de a-i putea personaliza stilul. Dacă nu ați creat încă unul, începeți cu Cum să vă creați primul chatbot.
Unde găsiți setările de aspect
Selectați chatbotul dumneavoastră și navigați la Settings > Appearance (Setări > Aspect). Din pagina principală ChatLab faceți clic pe Chatbots, deschideți chatbotul dumneavoastră, deschideți fila Settings (Setări), apoi alegeți Appearance (Aspect) din meniul din stânga.
O previzualizare în timp real a widgetului apare în partea dreaptă a paginii și se actualizează pe măsură ce modificați setările.
Chat Header
Configurați aspectul secțiunii superioare a widgetului de chat:
- Chatbot name (Nume chatbot) - numele afișat în antetul chatului (maximum 60 de caractere)
- Tagline (Slogan) - subtitlu opțional afișat sub numele chatbotului (maximum 60 de caractere)
- Avatar - încărcați o imagine personalizată pe care clienții o văd în timp ce interacționează cu chatbotul. Folosiți butonul Remove (Elimină, evidențiat mai jos) pentru a șterge imaginea curentă.
- Background (Fundal) - culoarea de fundal a zonei de antet
- Name color (Culoare nume) - culoarea textului pentru numele chatbotului
- Tagline color (Culoare slogan) - culoarea textului pentru slogan
- Reset conversation tooltip (Indiciu resetare conversație) - textul indiciului afișat atunci când vizitatorii trec cursorul peste butonul de resetare a conversației din antetul widgetului (maximum 40 de caractere, implicit "Reset conversation")
Message
Personalizați câmpul de introducere a mesajului și aspectul mesajelor din conversație:
- Input placeholder (Substituent câmp introducere) - textul substituent afișat în câmpul de introducere a mesajului nou din partea de jos a widgetului (maximum 50 de caractere, implicit "Type a message..."). Folosiți-l pentru a încuraja vizitatorii să înceapă să scrie.
- User background (Fundal utilizator) - culoarea de fundal a mesajelor trimise de vizitator
- User text (Text utilizator) - culoarea textului mesajelor vizitatorului
- Resp. background (Fundal răspuns) - culoarea de fundal a răspunsurilor chatbotului
- Response text (Text răspuns) - culoarea textului răspunsurilor chatbotului
Dimensiunea textului mesajelor se configurează în secțiunea Typography (Tipografie), împreună cu fontul widgetului.
Suggested Questions
Întrebările sugerate sunt mesaje gata pregătite pe care un vizitator le poate apăsa pentru a începe o conversație. Scrieți întrebările propriu-zise în Settings > Chat Conversation (Setări > Conversație chat); aici stilizați aspectul butoanelor:
- Background (Fundal) - culoarea de fundal a butoanelor cu întrebări sugerate
- Text - culoarea textului butoanelor cu întrebări sugerate
- Stack (Suprapunere) - când este activată, întrebările sugerate mai lungi se așază vertical unele sub altele în loc să afișeze o bară de derulare orizontală
Dimensiunea textului pentru întrebările sugerate se configurează în secțiunea Typography.
Minimized-Mode Settings
Controlați modul în care apare widgetul de chat atunci când este minimizat (înainte ca vizitatorul să deschidă chatul):
- Minimized display mode (Mod afișare minimizată) - alegeți între:
- Icon (Pictogramă) - pictograma circulară standard de lansare a chatului (implicit)
- Minified chat bar (Bară de chat minimizată) - bară compactă de introducere a textului afișată în partea de jos a paginii
- Icon with text (Pictogramă cu text) - un buton de lansare mai lat, în formă de capsulă: pictograma plus o scurtă descriere pe două rânduri
- Icon color / Mini bar color (Culoare pictogramă / Culoare mini-bară) - culoarea pictogramei de lansare sau a fundalului mini-barei
- Custom chat icon (Pictogramă personalizată de chat, doar în modul pictogramă) - activați pentru a încărca pictograme personalizate pentru deschiderea/închiderea chatului
- Position on screen (Poziție pe ecran) - plasați widgetul în partea stângă sau dreaptă a ecranului
- Move up chat icon/bar by (Mută în sus pictograma/bara de chat cu) - decalaj vertical în pixeli față de marginea de jos
- Move icon/bar left/right by (Mută pictograma/bara la stânga/dreapta cu) - decalaj orizontal în pixeli față de cea mai apropiată margine a ecranului
Icon with Text
Modul Icon with text îi oferă butonului de lansare o scurtă descriere, astfel încât vizitatorii să poată vedea scopul chatului înainte de a-l deschide. Este util atunci când o simplă pictogramă nu este suficient de evidentă - de exemplu "Scrieți-ne / Vă răspundem imediat" sau "Aveți nevoie de ajutor? / Întrebați asistentul nostru".
Alegerea acestui mod adaugă patru setări:
- Label line 1 (Rândul 1 de text) - primul rând, mai vizibil, al descrierii (maximum 60 de caractere)
- Label line 2 (Rândul 2 de text) - al doilea rând, mai discret (maximum 60 de caractere). Lăsați-l gol pentru un buton de lansare cu un singur rând
- Text color (Culoare text) - culoarea descrierii. Dacă nu o modificați, ChatLab alege automat alb sau negru, în funcție de cât de deschisă sau închisă este culoarea butonului dumneavoastră de lansare
- Show close cross (Afișează crucea de închidere) - adaugă o mică cruce butonului de lansare, astfel încât vizitatorii să îl poată ascunde
Ambele rânduri sunt scurtate cu puncte de suspensie dacă nu încap, astfel încât butonul de lansare să nu devină niciodată mai lat decât ecranul. Butonul revine la forma circulară cât timp chatul este deschis.
Dacă chatbotul dumneavoastră este multilingv, ambele rânduri ale descrierii sunt traduse la fel ca restul textelor vizibile pentru vizitatori, astfel încât fiecare vizitator vede descrierea în propria limbă.
Show close cross este dezactivată implicit și este disponibilă doar în acest mod. Când este activată, un vizitator care face clic pe cruce ascunde butonul de lansare pentru restul sesiunii de navigare - acesta rămâne ascuns pe măsură ce vizitatorul navighează între pagini și reapare la următoarea vizită sau într-o filă nouă. Un chatbot setat să se deschidă automat respectă această alegere și nu se va redeschide după ce vizitatorul l-a închis.
Auto Open Chat Widget After Page Load
Configurați chatul să se extindă automat atunci când vizitatorii încarcă pagina:
- Auto open on mobile (Deschidere automată pe mobil) - deschide automat chatul pe dispozitive mobile
- Auto open on desktop (Deschidere automată pe desktop) - deschide automat chatul pe ecrane de desktop
- Open chat with delay (Deschide chatul cu întârziere) - activează o întârziere înainte de deschiderea automată (disponibil doar când deschiderea automată este activată)
- Delay by (Întârziere cu) - numărul de secunde de așteptare înainte de deschidere (0-60 de secunde)
Human-Like Messaging
Simulează tastarea umană prin împărțirea răspunsurilor în mai multe baloane de mesaj, afișate treptat, propoziție cu propoziție:
- Human-Like Messaging - comutator pentru activarea/dezactivarea funcției
- Delay Between Bubbles (Întârziere între baloane) - timpul în secunde între afișarea fiecărui balon de mesaj (0-200 de secunde)
Welcome Message Bubble
Afișați mesajul de bun venit într-un balon deasupra pictogramei de lansare a chatului pentru a ajuta vizitatorii să observe chatul. Această funcție este disponibilă numai în modul pictogramă și nu funcționează în modul iframe sau când deschiderea automată este activată.
- Show on desktop (Afișează pe desktop) - afișează balonul cu mesajul de bun venit pe desktop
- Show on mobile (Afișează pe mobil) - afișează balonul cu mesajul de bun venit pe dispozitive mobile
- Delay (Întârziere) - numărul de secunde după încărcarea paginii înainte de afișarea balonului (0-60 de secunde)
Dacă aveți mai multe mesaje de bun venit, acestea vor apărea suprapuse deasupra pictogramei de chat.
Introducerea vocală (butonul cu microfon din zona de introducere a chatului) se configurează în Settings > Chat Conversation, nu aici în Appearance.
Welcome Screen
Comutați widgetul într-un aspect special de deschidere care întâmpină vizitatorii noi cu un mesaj mare de bun venit și întrebările sugerate așezate pe un card alb centrat. Ecranul de bun venit apare doar la începutul unei sesiuni noi și trece la vizualizarea standard de chat de îndată ce vizitatorul trimite primul mesaj.
- Special Welcome Screen (Ecran special de bun venit) - activează sau dezactivează modul de ecran de bun venit (dezactivat implicit)
- Suggested questions intro (Introducere întrebări sugerate) - scurtă etichetă afișată deasupra cardului cu întrebări sugerate pe ecranul de bun venit (de exemplu, "Selectați o opțiune sau scrieți un mesaj"). Lăsați câmpul gol pentru a ascunde eticheta. Necesită ca întrebările sugerate să fie configurate în Settings > Chat Conversation.
- Hide Human Contact Form (Ascunde formularul de contact uman) - ascunde acțiunea formularului de contact din antet în timp ce este afișat ecranul de bun venit
- Hide Live Chat (Ascunde Live Chat) - ascunde acțiunea de chat pe viu din antet în timp ce este afișat ecranul de bun venit
Ecranul de bun venit se integrează, de asemenea, cu colectarea de clienți potențiali (Lead Collection) și cu acordul pentru politica de confidențialitate (Privacy Policy consent) - dacă oricare dintre acestea este necesară la începutul conversației, formularul sau solicitarea de consimțământ este afișată pe cardul de bun venit în locul întrebărilor sugerate.
Pentru detalii complete, variante de aspect și capturi de ecran din perspectiva vizitatorului, consultați Ecranul de bun venit.
Header Actions
Controlează modul în care Live Chat și formularul de contact uman (Human Contact Form) sunt oferite în antetul widgetului de chat.
- Separate icons (Pictograme separate) - fiecare acțiune primește propria pictogramă în antet, lângă butonul de închidere
- Menu (dropdown) (Meniu derulant) - ambele acțiuni sunt mutate în meniul antetului (pictograma cu trei puncte), alături de opțiuni precum "Reset conversation" și comutatorul de limbă, atunci când acestea sunt activate
Chatboții noi folosesc meniul, ceea ce păstrează antetul aerisit pe măsură ce sunt adăugate mai multe acțiuni. Chatboții creați înainte de 2 septembrie 2026 păstrează pictogramele separate, astfel încât nimic nu se schimbă pentru vizitatorii lor. Puteți comuta în orice moment - setarea afectează doar prezentarea, nu și funcționalitatea acțiunilor.
Typography
Setează fontul și dimensiunile de text utilizate în întregul widget - mesaje, întrebări sugerate, antet, formulare și descrierea butonului de lansare.
- Widget font (Font widget) - unul dintre cele opt fonturi: System default (Implicit de sistem), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif și JetBrains Mono
- Message font size (Dimensiune font mesaje) - dimensiunea textului mesajelor (12-24 px)
- Suggested questions font size (Dimensiune font întrebări sugerate) - dimensiunea butoanelor pentru întrebări sugerate (12-24 px)
Inter este opțiunea implicită și corespunde aspectului pe care îl avea fiecare chatbot înainte de apariția acestei setări, așa că nimic nu se schimbă până când nu alegeți un alt font.
System default nu descarcă absolut nimic - widgetul folosește fontul deja instalat pe dispozitivul vizitatorului. Acest lucru îl face cea mai rapidă opțiune și se integrează perfect pe site-urile care folosesc fontul de sistem, însă chatul va arăta ușor diferit pe Windows, macOS și Android. Celelalte șapte sunt Google Fonts, descărcate o singură dată de browserul vizitatorului. Fiecare dintre ele are o variantă de rezervă, astfel încât, dacă rețeaua unui vizitator blochează Google Fonts, textul rămâne lizibil și structura nu se degradează.
Fișierul de font este încărcat direct în fereastra de chat. Acesta este adăugat pe pagina dumneavoastră numai atunci când widgetul afișează text în afara ferestrei de chat - butonul de lansare Icon with text, bara de chat minimizată sau baloanele cu mesajul de bun venit. Un chatbot care folosește butonul simplu de lansare cu pictogramă nu adaugă nicio solicitare suplimentară pe pagina dumneavoastră.
Widget Size
Ajustați cât de mare apare widgetul de chat deschis pe dispozitivele desktop și mobile. Fiecare glisor are un buton Default (Implicit) care restabilește dimensiunea prestabilită.
- Desktop width (Lățime desktop) - lățimea widgetului pe browserele desktop, în pixeli (330-800, implicit 448)
- Desktop height (Înălțime desktop) - înălțimea widgetului pe browserele desktop, în pixeli (300-770, implicit 660)
- Mobile size (Dimensiune mobil) - dimensiunea widgetului pe dispozitivele mobile, ca procent din ecran (60-100%, implicit 100%)
La valoarea implicită, widgetul folosește dimensionarea responsivă integrată a ChatLab. Orice altă valoare aplică o dimensiune fixă.
Pe mobil, valoarea implicită (100%) face ca chatul deschis să acopere întregul ecran. Alegerea unui procent mai mic reduce widgetul la acea porțiune din ecran și îl centrează pe fereastra de vizualizare, astfel încât vizitatorii pot vedea în continuare pagina din jurul chatului.
Lângă glisoare veți găsi două butoane Save & Preview (Salvează și previzualizează, evidențiate mai jos) - unul pentru rândurile de desktop și unul pentru rândul de mobil. Făcând clic pe un buton, salvați modificările nesalvate și deschideți chatul într-o fereastră de previzualizare folosind setările dumneavoastră curente:
- Butonul pentru desktop deschide o fereastră normală de browser, astfel încât să puteți vedea dimensiunea exactă pe un ecran de desktop.
- Butonul pentru mobil deschide o fereastră pop-up compactă (400 x 700), astfel încât widgetul să se redea în aspectul său mobil, ceea ce este util atunci când ajustați glisorul Mobile size de pe un computer desktop.
Drawer Mode
Modul sertar (Drawer mode) îi permite vizitatorului să comute chatul dintr-o fereastră plutitoare într-un panou pe toată înălțimea, fixat pe marginea ecranului, pagina dumneavoastră rămânând vizibilă lângă el. Este potrivit pentru conversațiile pe care vizitatorul le parcurge în timp ce citește pagina - răspunsuri lungi, comparații de produse, formulare sau orice conține mult text.
Activați-l și în antetul chatului va apărea un buton; vizitatorul decide dacă dorește să îl folosească. Opțiunea aleasă este reținută pentru restul sesiunii de navigare.
- Panoul are jumătate din lățimea ferestrei browserului, până la 720 px, și întotdeauna înălțimea completă. Se fixează pe aceeași parte ca butonul dumneavoastră de lansare, deci un widget poziționat în stânga deschide un sertar în stânga.
- Setările Desktop width și Desktop height nu se aplică aici - acestea dimensionează doar fereastra plutitoare normală.
- Butonul este afișat doar pe ecrane de desktop cu lățimea de cel puțin 1200 px, care folosesc un mouse. Pe telefoane și tablete nu apare niciodată, deoarece chatul ocupă deja întregul ecran acolo. Dacă un vizitator reduce dimensiunea browserului sub această lățime, sertarul se restrânge înapoi la fereastra normală.
- Butonul de lansare este ascuns cât timp sertarul este deschis; vizitatorul îl închide din antet sau iese din modul sertar folosind același buton.
Modul sertar este dezactivat implicit, așa că nimic nu se schimbă pentru vizitatorii dumneavoastră până când nu îl activați.
Other Appearance Settings
- Widget Shadow (Umbră widget) - activați sau dezactivați o umbră în jurul containerului widgetului de chat
- Open links in (Deschide linkurile în) - alegeți dacă linkurile din mesajele de chat se deschid într-o filă nouă (new tab) sau în aceeași filă (same tab)
Un buton de închidere (close (X) button) este afișat, de asemenea, în antetul chatului pe desktop, astfel încât vizitatorii să poată restrânge chatul înapoi la butonul de lansare fără a reîncărca pagina. Butonul de închidere rămâne ascuns atunci când chatul este încorporat ca iframe sau în modul pe tot ecranul.
Custom Chat Footer
Adăugați un text personalizat afișat în partea de jos a widgetului de chat (maximum 250 de caractere). Formatarea Markdown este acceptată pentru introducerea de linkuri. O utilizare frecventă este trimiterea către politica de confidențialitate sau termenii și condițiile dumneavoastră.
Exemplu de Markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS
Adăugați stiluri CSS personalizate pentru a ajusta și mai mult aspectul widgetului dumneavoastră de chat (maximum 5000 de caractere):
Articole asociate
- Cum să vă creați primul chatbot
- Setări de conversație - scrieți mesajul de bun venit și întrebările sugerate
- Ecranul de bun venit - aspectul de deschidere pe tot ecranul și variantele sale din perspectiva vizitatorului
- Formulare personalizate - colectați date de la vizitatori direct în chat
- Colectarea de clienți potențiali