AcasăDocumentație

Personalizarea widgetului

Faceți ca widgetul de chat să se potrivească cu marca dumneavoastră și să se comporte exact așa cum doriți. Toată personalizarea se realizează în tabloul de bord — modificările se aplică site-ului dumneavoastră automat, fără a atinge codul de embed.

Veți găsi setările la Tablou de bordChatbots → selectați chatbotul:

  • Tabul Widget controlează aspectul (poziție, culori, dimensiuni, texte)
  • Tabul Behavior controlează modul în care widgetul interacționează cu vizitatorii

Faceți clic pe Save Changes în partea de sus a paginii pentru a aplica modificările.

Tabul Widget: Aspect

Poziție

Alegeți unde apare widgetul pe site-ul dumneavoastră:

PozițieDescriere
Bottom RightBule de chat plutitoare în colțul din dreapta-jos (implicit)
Bottom LeftBule de chat plutitoare în colțul din stânga-jos
Inline (Embedded)Widgetul este integrat direct pe pagină în loc să plutească

Cu poziția Inline, chatul este integrat în locul în care este plasat scriptul de embed și este întotdeauna deschis — fără bulă, fără buton de închidere. Ideal pentru pagini dedicate de chat sau suport. Consultați Widget Embedding pentru detalii.

Schema de culori

Alegeți una dintre cele trei presetări de culoare:

PresetDescriere
DefaultSchema de culori standard ChatReact
BrandCulorile brandului companiei din Company Settings
CustomAlegeți propriile culori

Presetarea Brand este disponibilă doar după ce culorile brandului sunt setate. Mergeți la Company Settings pentru a extrage culorile de pe site-ul dumneavoastră.

Cu Custom selectat, puteți seta patru culori de bază:

  • Primary — bule, gradientul antetului, butoane și mesaje ale vizitatorilor
  • Secondary — a doua culoare a gradientului antetului
  • Background — fundalul ferestrei de chat
  • Text — culoarea textului mesajelor

Setări avansate de culoare

Aveți nevoie de mai mult control? Cu presetarea Custom selectată, extindeți Advanced Color Settings pentru a suprascrie culorile calculate automat:

  • Visitor Messages — fundalul și culoarea textului bulelor de mesaj ale vizitatorului
  • Bot Messages — fundalul și culoarea textului bulelor de mesaj ale botului
  • Header Text Color — culoarea titlului și subtitlului din antetul widgetului

Orice lăsați neatins este calculat automat pentru un contrast bun. Fiecare suprascriere are un buton Reset to automatic pentru a reveni la culoarea calculată.

Dimensiune și stil

SetareIntervalImplicit
Border Radius0–32 px24 px
Width300–500 px380 px
Height400–700 px600 px

Pe ecrane mobile mici, widgetul trece automat la un layout pe toată lățimea, indiferent de aceste dimensiuni.

Logo

Activați Use company logo in widget header pentru a afișa logo-ul companiei în antetul chatului. Logo-ul în sine se încarcă în Company Settings — recomandat: pătrat, cel puțin 200×200 px (JPG, PNG, GIF, WebP sau SVG, max. 5 MB).

Această opțiune este disponibilă pe planul Professional și mai sus, și pe toate planurile Agency.

Titlu antet, subtitlu și textul bulei

CâmpDescriereImplicit
Header TitleTitlu afișat în antetul ferestrei de chat"Chat with us"
Header SubtitleLinie mai mică sub titlu"We typically reply within minutes"
Bubble TextText afișat lângă bula de chat când widgetul este închisNiciunul

Dacă nu setați niciodată un titlu sau un subtitlu, widgetul afișează textul implicit — localizat automat în limba fiecărui vizitator.

Cum funcționează subtitlul antetului: Atâta timp cât nu ați configurat un subtitlu, widgetul afișează implicitul localizat, iar formularul de setări precompletă acest implicit astfel încât să puteți vedea și edita ceea ce primesc vizitatorii. Pentru a ascunde complet subtitlul, goliți câmpul și salvați — un subtitlu intenționat gol va rămâne ascuns.

Textul bulei apare ca o etichetă mică lângă bula de chat închisă (de ex. "Got questions?"). Lăsați-l gol pentru a afișa doar bula rotundă.

Traducerile widgetului

Dacă chatbotul dumneavoastră suportă mai multe limbi, apare o carte Widget Translations sub setările de aspect. Acolo puteți traduce mesajul de bun venit, mesajul de fallback, titlul antetului, subtitlul antetului și textul bulei pentru fiecare limbă activată.

Mesajele de bun venit și fallback sunt configurate în fila Persona a setărilor chatbotului.

Previzualizare live

Coloana din dreapta a tabului Widget afișează o Live Preview a widgetului dumneavoastră care se actualizează pe măsură ce modificați setările. Este interactivă: închideți fereastra de chat cu X pentru a vedea bula închisă (inclusiv textul bulei), și faceți clic pe bulă pentru a o redeschide.

Tabul Behavior: Interacțiune

Setări de comportament

SetareDescriereImplicit
Proactive GreetingBotul salută vizitatorii automat după o întârziere (1–10 secunde)On, 3 s
Auto-OpenWidgetul se deschide automat pentru vizitatori după o întârziere (1–15 secunde)Off, 5 s
Sound EnabledRedă sunete pentru notificăriOn
Typing IndicatorAfișează o animație în timp ce botul tasteazăOn
Pre-Chat FormColectează informații despre vizitator înainte de a începe chatulOff
Show on MobileAfișează widgetul pe dispozitive mobileOn

Lungimea maximă a mesajului

Limitați câte caractere pot introduce vizitatorii per mesaj (100–10.000 caractere, implicit 2.000). Acest lucru ajută la prevenirea utilizării excesive din cauza unor intrări foarte lungi. Goliți câmpul sau faceți clic pe Remove limit pentru a permite mesaje de orice lungime.

Formularul pre-chat

Când formularul pre-chat este activat, vizitatorii completează un formular scurt înainte ca conversația să înceapă. Configurați singur câmpurile:

  • Tipuri de câmpuri: Text, Email, Phone, Textarea
  • Fiecare câmp are o etichetă, un placeholder opțional și un comutator required
  • Reordonați câmpurile cu butoanele de mutare în sus/jos sau eliminați-le

Dacă chatbotul dumneavoastră suportă mai multe limbi, în editorul de câmpuri apare o secțiune pentru traduceri. Introduceți manual traducerile pentru fiecare limbă sau faceți clic pe Translate with AI pentru a traduce automat toate etichetele și placeholder-urile.

Live Chat

Tabul Behavior conține, de asemenea, cartea Live Chat Settings. Activați live chat pentru a permite vizitatorilor să vorbească cu agenții umani și alegeți un mod:

ModDescriere
Handoff OnlyLive chat doar când botul nu poate ajuta
StandaloneVizitatorii pot discuta direct cu agenții
BothDisponibile atât handoff, cât și live chat direct

Live Chat este disponibil pe planul Professional și mai sus, și pe toate planurile Agency. Consultați Live Chat pentru cum să gestionați conversațiile primite.

Branding

Pe planurile care includ white-label, apare o carte Branding în partea de jos a tabului Behavior. Brandingul ChatReact este ascuns implicit pe aceste planuri — activați Show "Powered by ChatReact" dacă doriți să îl afișați oricum în subsolul widgetului.

Faza de învățare

Când un chatbot nou este în faza de învățare, puteți controla cât de precaut răspunde — Cautious, Balanced (recomandat) sau Confident — în fila Confidence a aceleiași pagini de setări. Această filă apare pe planurile care includ Improvement Agent. Consultați ghidul Improvement Agent pentru detalii.


Pașii următori