Setările de aspect controlează modul în care widgetul de chat al chatbotului dumneavoastră apare vizitatorilor de pe site - antetul, culorile și fonturile mesajelor, pictograma de deschidere (launcher), 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). De pe pagina principală ChatLab faceți clic pe Chatbots, deschideți chatbotul dorit, accesaț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.
Antetul chatului (Chat Header)
Configurați modul în care arată secțiunea superioară 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 vizitatorii o văd în timp ce interacționează cu chatbotul. Utilizaț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 (Tooltip resetare conversație) - textul afișat la trecerea cursorului peste butonul de resetare a conversației din antetul widgetului (maximum 40 de caractere, implicit „Reset conversation”)
Mesaj (Message)
Personalizați câmpul de introducere a mesajului și aspectul mesajelor din conversație:
- Input placeholder (Placeholder câmp introducere) - textul implicit afișat în câmpul de introducere a mesajelor din partea de jos a widgetului (maximum 50 de caractere, implicit „Type a message...”). Utilizaț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 din mesajele vizitatorului
- Resp. background (Fundal răspuns) - culoarea de fundal a răspunsurilor chatbotului
- Response text (Text răspuns) - culoarea textului din răspunsurile chatbotului
Dimensiunea textului mesajelor se configurează în secțiunea Tipografie, împreună cu fontul widgetului.
Întrebări sugerate (Suggested Questions)
Întrebările sugerate sunt mesaje predefinite pe care vizitatorii pot apăsa pentru a începe o conversație. Textul întrebărilor se definește în Settings > Chat Conversation (Setări > Conversație chat); aici personalizați aspectul butoanelor:
- Background (Fundal) - culoarea de fundal a butoanelor cu întrebări sugerate
- Text - culoarea textului de pe butoanele cu întrebări sugerate
- Stack (Stivuire) - când este activată opțiunea, întrebările sugerate mai lungi sunt afișate una sub alta, în loc să apară o bară de derulare orizontală
Dimensiunea textului pentru întrebările sugerate se configurează în secțiunea Tipografie.
Setări mod minimizat (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 pentru deschiderea chatului (implicită)
- Minified chat bar (Bară de chat compactă) - o bară compactă de introducere a textului afișată în partea de jos a paginii
- Icon with text (Pictogramă cu text) - un buton alungit de tip capsulă: pictograma însoțită de un scurt text pe două rânduri
- Icon color / Mini bar color (Culoare pictogramă / Culoare bară compactă) - culoarea pictogramei de lansare sau a fundalului barei compacte
- Custom chat icon (Pictogramă personalizată de chat, doar în modul Icon) - activați pentru a încărca pictograme personalizate pentru deschiderea și î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 (Deplasare pictogramă/bară în sus cu) - distanța verticală în pixeli față de marginea de jos
- Move icon/bar left/right by (Deplasare pictogramă/bară la stânga/dreapta cu) - distanța orizontală în pixeli față de cea mai apropiată margine a ecranului
Pictogramă cu text (Icon with Text)
Modul Icon with text (Pictogramă cu text) adaugă un scurt mesaj butonului de deschidere, astfel încât vizitatorii să înțeleagă rolul chatului înainte de a-l deschide. Este util atunci când o simplă pictogramă nu este suficient de clară - 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 etichetă) - primul rând, afișat mai proeminent (maximum 60 de caractere)
- Label line 2 (Rândul 2 etichetă) - al doilea rând, afișat mai estompat (maximum 60 de caractere). Lăsați-l liber pentru un buton cu un singur rând
- Text color (Culoare text) - culoarea textului. Dacă nu o modificați, ChatLab alege automat negru sau alb, în funcție de luminozitatea culorii de fundal a butonului
- Show close cross (Afișează cruce de închidere) - adaugă o mică cruce pe buton pentru ca vizitatorii să îl poată ascunde
Ambele rânduri sunt trunchiate cu puncte de suspensie dacă nu încap, astfel încât butonul să nu depășească niciodată lățimea ecranului. Când chatul este deschis, butonul revine la forma circulară standard.
Dacă este activat suportul multilingv, ambele rânduri ale textului sunt traduse la fel ca restul textelor afișate vizitatorilor.
Opțiunea Show close cross este dezactivată implicit și este disponibilă doar în acest mod. Când este activată, dacă un vizitator face clic pe cruce, butonul este ascuns pentru restul sesiunii de navigare - 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 a fost închis de vizitator.
Deschiderea automată a widgetului după încărcarea paginii (Auto Open Chat Widget After Page Load)
Configurați chatul să se deschidă automat la încărcarea paginii:
- Auto open on mobile (Deschidere automată pe mobil) - deschide automat chatul pe dispozitivele mobile
- Auto open on desktop (Deschidere automată pe desktop) - deschide automat chatul pe computere
- Open chat with delay (Deschide chatul cu întârziere) - activează o întârziere înainte de deschiderea automată (opțiune disponibilă doar dacă deschiderea automată este activată)
- Delay by (Întârziere de) - numărul de secunde de așteptare înainte de deschidere (0-60 de secunde)
Trimiterea mesajelor în stil uman (Human-Like Messaging)
Simulează tastarea umană prin împărțirea răspunsurilor în mai multe bule de mesaj, afișate treptat, frază cu frază:
- Human-Like Messaging - comutator pentru activarea/dezactivarea funcției
- Delay Between Bubbles (Întârziere între bule) - intervalul în secunde dintre afișarea fiecărei bule de mesaj (0-200 de secunde)
Bula cu mesaj de bun venit (Welcome Message Bubble)
Afișează mesajul de bun venit într-o bulă deasupra pictogramei de lansare a chatului, atrăgând atenția vizitatorilor. Această funcție este disponibilă doar în modul pictogramă și nu funcționează în modul iframe sau atunci când deschiderea automată este activată.
- Show on desktop (Afișează pe desktop) - afișează bula cu mesajul de bun venit pe desktop
- Show on mobile (Afișează pe mobil) - afișează bula cu mesajul de bun venit pe dispozitive mobile
- Delay (Întârziere) - numărul de secunde după încărcarea paginii înainte de afișarea bulei (0-60 de secunde)
Dacă ați configurat mai multe mesaje de bun venit, acestea vor apărea suprapuse deasupra pictogramei de chat.
Introducerea vocală (butonul de microfon din câmpul de mesaj) se configurează în Settings > Chat Conversation (Setări > Conversație chat), nu aici în secțiunea Appearance.
Ecran de bun venit (Welcome Screen)
Comută widgetul într-un aspect introductiv special, care întâmpină vizitatorii noi cu un mesaj generos de bun venit și întrebările sugerate afișate pe un card alb centrat. Ecranul de bun venit apare doar la începutul unei sesiuni noi și trece la vizualizarea standard a chatului imediat ce vizitatorul trimite primul mesaj.
- Special Welcome Screen (Ecran special de bun venit) - activează sau dezactivează modul de ecran de bun venit (implicit este dezactivat)
- Suggested questions intro (Introducere întrebări sugerate) - etichetă scurtă afișată deasupra cardului cu întrebări sugerate pe ecranul de bun venit (de exemplu, „Alegeți o opțiune sau scrieți un mesaj”). Lăsați câmpul liber 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 atât timp cât este afișat ecranul de bun venit
- Hide Live Chat (Ascunde Live Chat) - ascunde acțiunea Live Chat din antet atât timp cât este afișat ecranul de bun venit
Ecranul de bun venit se integrează și cu Lead Collection (Colectare leaduri) și Privacy Policy consent (Consimțământ politică de confidențialitate) - dacă oricare dintre acestea este obligatorie 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 articolul Welcome Screen.
Acțiuni antet (Header Actions)
Controlează modul în care funcțiile Live Chat și Human Contact Form (Formular de contact uman) sunt oferite în antetul widgetului de chat.
- Separate icons (Pictograme separate) - fiecare acțiune primește o pictogramă proprie î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 selectorul de limbă, atunci când acestea sunt activate
Chatboții noi utilizează meniul, păstrând antetul aerisit pe măsură ce se adaugă mai multe acțiuni. Chatboții creați înainte de 2 septembrie 2026 își păstrează pictogramele separate, astfel încât experiența vizitatorilor nu se modifică. Puteți comuta oricând - setarea influențează doar prezentarea vizuală, nu și funcționalitatea acțiunilor.
Tipografie (Typography)
Setează familia de fonturi și dimensiunile textului utilizate în întregul widget - mesaje, întrebări sugerate, antet, formulare și eticheta butonului de deschidere.
- Widget font (Font widget) - una dintre cele opt familii de caractere: System default, Inter, Nunito, Lato, Montserrat, Poppins, Source Serif și JetBrains Mono
- Message font size (Dimensiune font mesaj) - dimensiunea textului din mesaje (12-24 px)
- Suggested questions font size (Dimensiune font întrebări sugerate) - dimensiunea textului de pe butoanele cu întrebări sugerate (12-24 px)
Inter este opțiunea implicită și corespunde aspectului inițial al oricărui chatbot, astfel că nimic nu se schimbă până când nu selectați un alt font.
Opțiunea System default nu descarcă niciun fișier suplimentar - widgetul utilizează fontul deja instalat pe dispozitivul vizitatorului. Aceasta este cea mai rapidă variantă și se integrează perfect în site-urile care folosesc fontul de sistem, însă chatul va arăta ușor diferit pe Windows, macOS și Android. Celelalte șapte opțiuni sunt fonturi Google Fonts, descărcate o singură dată de browserul vizitatorului. Fiecare dintre ele dispune de o variantă de rezervă (fallback), astfel încât dacă rețeaua vizitatorului blochează Google Fonts, textul rămâne lizibil, iar structura vizuală nu este afectată.
Fișierul de font este încărcat în interiorul ferestrei de chat. Este descărcat pe pagina dumneavoastră doar dacă widgetul afișează text în afara ferestrei de chat - butonul Icon with text, bara de chat compactă sau bulele cu mesajul de bun venit. Un chatbot care folosește doar pictograma simplă nu generează cereri suplimentare pe pagina dumneavoastră.
Dimensiunea widgetului (Widget Size)
Ajustați cât de mare apare fereastra deschisă a chatului pe desktop și pe dispozitive mobile. Fiecare glisor dispune de un buton Default (Implicit) care readuce dimensiunea la valorile prestabilite.
- Desktop width (Lățime desktop) - lățimea widgetului în browserele desktop, în pixeli (330-800, implicit 448)
- Desktop height (Înălțime desktop) - înălțimea widgetului în browserele desktop, în pixeli (300-770, implicit 660)
- Mobile size (Dimensiune mobil) - dimensiunea widgetului pe dispozitive mobile, ca procent din ecran (60-100%, implicit 100%)
La valoarea implicită, widgetul utilizează dimensionarea adaptivă încorporată ChatLab. Orice altă valoare aplică o dimensiune fixă.
Pe mobil, valoarea implicită (100%) determină fereastra de chat deschisă să ocupe întregul ecran. Selectarea unui procent mai mic reduce widgetul la acea proporție a ecranului și îl centrează pe ecran, permițând vizitatorilor să vadă î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 destinate versiunii desktop și unul pentru rândul destinat versiunii mobile. Făcând clic pe un buton, salvați modificările nesalvate și deschideți chatul într-o fereastră de previzualizare cu setările curente:
- Butonul pentru desktop deschide o fereastră normală de browser pentru a vedea dimensiunea exactă pe un ecran mare.
- Butonul pentru mobil deschide o fereastră pop-up compactă (400 x 700) pentru a reda widgetul în aspectul său mobil, utilă atunci când reglați glisorul Mobile size de la un computer.
Butonul de maximizare (modul sertar / Drawer Mode)
Modul sertar (Drawer mode) permite vizitatorului să comute chatul dintr-o fereastră flotantă într-un panou pe întreaga înălțime a ecranului, andocat la marginea acestuia, pagina rămânând vizibilă alături. Este potrivit pentru conversații pe care vizitatorul le parcurge în timp ce citește conținutul paginii - răspunsuri detaliate, comparații de produse, formulare sau texte voluminoase.
Activați opțiunea Maximise button (Buton de maximizare) în Widget Size și va apărea un buton în antetul chatului; vizitatorul decide dacă dorește să îl folosească. Preferința este memorată pentru restul sesiunii de navigare.
- Panoul ocupă jumătate din lățimea ferestrei browserului, până la cel mult 720 px, și întotdeauna întreaga înălțime. Se andochează pe aceeași parte cu butonul de lansare; astfel, un widget poziționat în stânga va deschide panoul în partea stângă.
- Setările Desktop width și Desktop height nu se aplică aici - acestea controlează exclusiv dimensiunile ferestrei flotante normale.
- Butonul apare doar pe ecrane desktop cu o lățime de cel puțin 1200 px, la utilizarea unui mouse. Pe telefoane și tablete nu este afișat niciodată, deoarece chatul ocupă deja întregul ecran. Dacă un vizitator reduce lățimea browserului sub această valoare, panoul revine automat la fereastra normală.
- Butonul de lansare este ascuns în timp ce panoul este deschis; vizitatorul îl poate închide din antet sau poate părăsi modul sertar apăsând același buton.
Modul sertar este dezactivat implicit, astfel încât comportamentul pentru vizitatori rămâne neschimbat până la activarea lui.
Alte setări de aspect (Other Appearance Settings)
- Widget Shadow (Umbră widget) - activați sau dezactivați umbra din 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)
Pe desktop este afișat și un buton de închidere (X) în antetul chatului, astfel încât vizitatorii să poată restrânge chatul la pictograma inițială fără a reîncărca pagina. Butonul de închidere rămâne ascuns atunci când chatul este încorporat printr-un iframe sau în modul ecran complet.
Subsol personalizat al chatului (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 inserarea linkurilor. O utilizare frecventă este adăugarea unui link către politica de confidențialitate sau termenii de utilizare.
Exemplu Markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
CSS personalizat (Custom CSS)
Adăugați stiluri CSS personalizate pentru a adapta și mai mult aspectul widgetului dumneavoastră de chat (maximum 5000 de caractere):
Articole similare
Modificările se salvează automat. Așteptați mesajul Saved (Salvat), apoi verificați secțiunea Overview (Prezentare generală) și widgetul integrat atât pe desktop, cât și pe mobil. Previzualizarea din setări prezintă doar fereastra de chat; poziționarea pictogramei de lansare și comportamentul de deschidere automată la nivel de pagină trebuie verificate și pe site-ul dumneavoastră unde este integrat chatbotul.
- Cum să vă creați primul chatbot
- Setări de conversație - scrieți mesajul de bun venit și întrebările sugerate
- Ecran de bun venit - structura introductivă pe ecran complet și variantele pentru vizitatori
- Formulare personalizate - colectați date de la vizitatori direct în chat
- Colectare leaduri