Podešavanja izgleda (Appearance settings) kontrolišu kako vidžet za ćaskanje Vašeg četbota izgleda posetiocima na Vašem veb-sajtu - zaglavlje, boje i fontove poruka, ikonicu za pokretanje, ekran dobrodošlice, veličinu vidžeta i još mnogo toga. Ovde prilagođavate vidžet Vašem brendu.
Potrebno je da imate četbota pre nego što počnete sa stilizovanjem. Ako ga još niste kreirali, počnite sa člankom Kako da kreirate svog prvog četbota.
Gde pronaći podešavanja izgleda
Izaberite svog četbota i idite na Settings > Appearance (Podešavanja > Izgled). Sa glavne ChatLab stranice kliknite na Chatbots (Četboti), otvorite svog četbota, otvorite karticu Settings (Podešavanja), a zatim u levom meniju izaberite Appearance (Izgled).
Pregled vidžeta uživo prikazuje se na desnoj strani stranice i ažurira se kako menjate podešavanja.
Zaglavlje ćaskanja (Chat Header)
Podesite kako izgleda gornji deo Vašeg vidžeta za ćaskanje:
- Chatbot name (Naziv četbota) - prikazano ime koje se vidi u zaglavlju ćaskanja (maksimalno 60 znakova)
- Tagline (Podnaslov) - opcioni podnaslov prikazan ispod imena četbota (maksimalno 60 znakova)
- Avatar (Avatar) - otpremite prilagođenu sliku koju posetioci vide tokom interakcije sa četbotom. Koristite dugme Remove (Ukloni - označeno ispod) da obrišete trenutnu sliku.
- Background (Pozadina) - boja pozadine u delu zaglavlja
- Name color (Boja imena) - boja teksta za ime četbota
- Tagline color (Boja podnaslova) - boja teksta za podnaslov
- Reset conversation tooltip (Opis za resetovanje razgovora) - tekst opisa (tooltip) koji se prikazuje kada posetioci pređu mišem preko dugmeta za resetovanje razgovora u zaglavlju vidžeta (maksimalno 40 znakova, podrazumevano "Reset conversation")
Poruka (Message)
Prilagodite polje za unos poruka i izgled poruka u razgovoru:
- Input placeholder (Tekst čuvara mesta za unos) - tekst čuvara mesta prikazan u polju za unos nove poruke na dnu vidžeta (maksimalno 50 znakova, podrazumevano "Type a message..."). Koristite ga da podstaknete posetioce da počnu da kucaju.
- User background (Pozadina korisnika) - boja pozadine za poruke koje šalje posetilac
- User text (Tekst korisnika) - boja teksta za poruke posetioca
- Resp. background (Pozadina odgovora) - boja pozadine za odgovore četbota
- Response text (Tekst odgovora) - boja teksta za odgovore četbota
Veličina teksta poruka se podešava u odeljku Tipografija, zajedno sa fontom vidžeta.
Predložena pitanja (Suggested Questions)
Predložena pitanja su gotovi upiti koje posetilac može dodirnuti da započne razgovor. Sama pitanja pišete u Settings > Chat Conversation (Podešavanja > Razgovor ćaskanja); ovde stilizujete izgled dugmadi:
- Background (Pozadina) - boja pozadine dugmadi za predložena pitanja
- Text (Tekst) - boja teksta dugmadi za predložena pitanja
- Stack (Poređaj vertikalno) - kada je omogućeno, duža predložena pitanja se ređaju vertikalno jedno ispod drugog umesto da prikazuju horizontalnu traku za pomeranje
Veličina teksta predloženih pitanja se podešava u odeljku Tipografija.
Podešavanja minimizovanog režima (Minimized-Mode Settings)
Kontrolišite kako vidžet za ćaskanje izgleda kada je minimizovan (pre nego što posetilac otvori čet):
- Minimized display mode (Minimizovani režim prikaza) - izaberite između:
- Icon (Ikonica) - standardna kružna ikonica za pokretanje ćaskanja (podrazumevano)
- Minified chat bar (Smanjena traka za ćaskanje) - kompaktna traka za unos teksta prikazana na dnu stranice
- Icon with text (Ikonica sa tekstom) - širi pokretač u obliku pilule: ikonica plus kratak natpis u dva reda
- Icon color / Mini bar color (Boja ikonice / Boja mini trake) - boja ikonice pokretača ili pozadine mini trake
- Custom chat icon (Prilagođena ikonica ćaskanja - samo u režimu ikonice) - omogućite da otpremite prilagođene ikonice za otvaranje/zatvaranje ćaskanja
- Position on screen (Pozicija na ekranu) - postavite vidžet na levu ili desnu stranu ekrana
- Move up chat icon/bar by (Pomeri ikonicu/traku nagore za) - vertikalni pomak u pikselima od donje ivice
- Move icon/bar left/right by (Pomeri ikonicu/traku levo/desno za) - horizontalni pomak u pikselima od najbliže ivice ekrana
Ikonica sa tekstom (Icon with Text)
Režim Icon with text daje pokretaču kratak natpis, tako da posetioci mogu da vide čemu čet služi pre nego što ga otvore. Koristan je kada sama ikonica nije dovoljno očigledna - na primer „Pišite nam / Odgovaramo odmah“ ili „Treba Vam pomoć? / Pitajte našeg asistenta“.
Izbor ovog režima dodaje četiri podešavanja:
- Label line 1 (Red oznake 1) - prvi, istaknutiji red natpisa (maksimalno 60 znakova)
- Label line 2 (Red oznake 2) - drugi, svetliji red (maksimalno 60 znakova). Ostavite prazno za pokretač sa jednim redom teksta
- Text color (Boja teksta) - boja natpisa. Ostavite nepromenjeno i ChatLab će automatski izabrati crnu ili belu, u zavisnosti od toga koliko je svetla ili tamna boja Vašeg pokretača
- Show close cross (Prikaži krstić za zatvaranje) - dodaje mali krstić na pokretač kako bi posetioci mogli da ga sakriju
Oba reda se skraćuju sa tri tačke ako ne mogu da stanu, tako da pokretač nikada ne postaje širi od ekrana. Pokretač se ponovo skuplja u krug dok je čet otvoren.
Ako je Vaš četbot višejezičan, oba reda natpisa se prevode kao i ostali tekstovi vidljivi posetiocima, tako da svaki posetilac vidi natpis na svom jeziku.
Opcija Show close cross je podrazumevano isključena i dostupna je samo u ovom režimu. Kada je omogućena, posetilac koji klikne na krstić skriva pokretač za ostatak svoje sesije pregledanja - ostaje skriven dok se kreće između stranica i vraća se prilikom sledeće posete ili u novoj kartici. Četbot podešen da se automatski otvara poštuje taj izbor i neće se ponovo otvoriti nakon što ga posetilac zatvori.
Automatsko otvaranje vidžeta nakon učitavanja stranice (Auto Open Chat Widget After Page Load)
Podesite ćaskanje da se automatski otvori kada posetioci učitaju stranicu:
- Auto open on mobile (Automatsko otvaranje na mobilnim uređajima) - automatski otvara ćaskanje na mobilnim uređajima
- Auto open on desktop (Automatsko otvaranje na desktop računarima) - automatski otvara ćaskanje na desktop ekranima
- Open chat with delay (Otvori ćaskanje sa odlaganjem) - omogućava odlaganje pre automatskog otvaranja (dostupno samo kada je uključeno automatsko otvaranje)
- Delay by (Odloži za) - broj sekundi čekanja pre otvaranja (0-60 sekundi)
Pisanje nalik ljudskom (Human-Like Messaging)
Simulira kucanje nalik ljudskom tako što deli odgovore u više oblačića sa porukama, koji se prikazuju postepeno rečenicu po rečenicu:
- Human-Like Messaging - prekidač za uključivanje/isključivanje funkcije
- Delay Between Bubbles (Odlaganje između oblačića) - vreme u sekundama između prikazivanja svakog oblačića sa porukom (0-200 sekundi)
Oblačić sa porukom dobrodošlice (Welcome Message Bubble)
Prikažite poruku dobrodošlice u oblačiću iznad ikonice za pokretanje ćaskanja kako bi posetioci lakše primetili čet. Ova funkcija je dostupna samo u režimu ikonice i ne radi u iframe režimu niti kada je omogućeno automatsko otvaranje.
- Show on desktop (Prikaži na desktopu) - prikazuje oblačić sa porukom dobrodošlice na desktopu
- Show on mobile (Prikaži na mobilnim uređajima) - prikazuje oblačić sa porukom dobrodošlice na mobilnim uređajima
- Delay (Odlaganje) - broj sekundi nakon učitavanja stranice pre prikazivanja oblačića (0-60 sekundi)
Ako imate više poruka dobrodošlice, one će se prikazati naslagane jedna iznad druge iznad ikonice za ćaskanje.
Glasovni unos (dugme mikrofona u polju za unos ćaskanja) konfiguriše se u Settings > Chat Conversation, a ne ovde u delu Appearance.
Ekran dobrodošlice (Welcome Screen)
Prebacite vidžet u poseban početni raspored koji dočekuje nove posetioce velikom porukom dobrodošlice i predloženim pitanjima poređanim na beloj kartici u sredini. Ekran dobrodošlice se pojavljuje samo na početku nove sesije i prelazi u standardni prikaz ćaskanja čim posetilac pošalje svoju prvu poruku.
- Special Welcome Screen (Poseban ekran dobrodošlice) - uključuje ili isključuje režim ekrana dobrodošlice (podrazumevano isključeno)
- Suggested questions intro (Uvod za predložena pitanja) - kratka oznaka prikazana iznad kartice sa predloženim pitanjima na ekranu dobrodošlice (na primer, „Izaberite opciju ili unesite poruku“). Ostavite prazno da sakrijete oznaku. Zahteva da predložena pitanja budu konfigurisana u Settings > Chat Conversation.
- Hide Human Contact Form (Sakrij obrazac za kontakt sa ljudima) - skriva akciju obrasca za kontakt u zaglavlju dok je prikazan ekran dobrodošlice
- Hide Live Chat (Sakrij Live Chat) - skriva akciju za ćaskanje uživo u zaglavlju dok je prikazan ekran dobrodošlice
Ekran dobrodošlice se takođe integriše sa funkcijama Lead Collection i Privacy Policy consent (saglasnost sa politikom privatnosti) - ako je bilo šta od toga potrebno na početku razgovora, obrazac ili zahtev za saglasnost se prikazuju na kartici dobrodošlice umesto predloženih pitanja.
Za sve detalje, varijante rasporeda i snimke ekrana sa strane posetioca, pogledajte Welcome Screen.
Akcije u zaglavlju (Header Actions)
Kontroliše kako se Live Chat i Human Contact Form (obrazac za kontakt sa ljudima) nude u zaglavlju vidžeta za ćaskanje.
- Separate icons (Zasebne ikonice) - svaka akcija dobija svoju ikonicu u zaglavlju, pored dugmeta za zatvaranje
- Menu (dropdown) (Meni - padajući) - obe akcije prelaze u meni zaglavlja (ikonica sa tri tačke), pored stavki kao što su „Reset conversation“ i birač jezika kada su oni omogućeni
Novi četboti koriste meni, što sprečava pretrpavanje zaglavlja kako se dodaje više akcija. Četboti kreirani pre 2. septembra 2026. zadržavaju zasebne ikonice, tako da se ništa ne menja za njihove posetioce. Možete promeniti ovo podešavanje u bilo kom trenutku - ono utiče samo na prikaz, ne i na funkciju samih akcija.
Tipografija (Typography)
Podešava font i veličine teksta koji se koriste u celom vidžetu - poruke, predložena pitanja, zaglavlje, obrasci i natpis pokretača.
- Widget font (Font vidžeta) - jedan od osam fontova: System default, Inter, Nunito, Lato, Montserrat, Poppins, Source Serif i JetBrains Mono
- Message font size (Veličina fonta poruke) - veličina teksta poruke (12-24 px)
- Suggested questions font size (Veličina fonta predloženih pitanja) - veličina dugmadi sa predloženim pitanjima (12-24 px)
Inter je podrazumevani font i odgovara izgledu svakog četbota pre uvođenja ovog podešavanja, tako da se ništa ne menja dok ne izaberete drugi font.
System default ne preuzima ništa sa mreže - vidžet koristi font koji je već instaliran na uređaju posetioca. Zbog toga je to najbrža opcija i savršeno se uklapa u sajtove koji već koriste sistemski font, ali će ćaskanje izgledati malo drugačije na operativnim sistemima Windows, macOS i Android. Ostalih sedam su Google Fonts, koje pretraživač posetioca preuzima jednom. Svaki od njih ima rezervni font, pa ako mreža posetioca blokira Google Fonts, tekst ostaje čitljiv i raspored se ne narušava.
Fajl fonta se učitava u sam prozor za ćaskanje. Na Vašu stranicu se dodaje samo kada vidžet prikazuje tekst van prozora za ćaskanje - pokretač Icon with text, smanjena traka za ćaskanje ili oblačići sa porukom dobrodošlice. Četbot koji koristi običnu ikonicu kao pokretač ne šalje nikakve dodatne zahteve sa Vaše stranice.
Veličina vidžeta (Widget Size)
Podesite koliko veliki otvoreni vidžet za ćaskanje izgleda na desktop i mobilnim uređajima. Svaki klizač ima dugme Default (Podrazumevano) koje vraća fabričke dimenzije.
- Desktop width (Širina na desktopu) - širina vidžeta u pretraživačima na desktopu, u pikselima (330-800, podrazumevano 448)
- Desktop height (Visina na desktopu) - visina vidžeta u pretraživačima na desktopu, u pikselima (300-770, podrazumevano 660)
- Mobile size (Veličina na mobilnim uređajima) - veličina vidžeta na mobilnim uređajima, kao procenat ekrana (60-100%, podrazumevano 100%)
Pri podrazumevanoj vrednosti, vidžet koristi ChatLab-ovo ugrađeno responzivno prilagođavanje veličine. Bilo koja druga vrednost primenjuje fiksnu veličinu.
Na mobilnim uređajima, podrazumevana vrednost (100%) čini da otvoreno ćaskanje pokriva ceo ekran. Izbor nižeg procenta smanjuje vidžet na taj deo ekrana i centrira ga na ekranu, tako da posetioci i dalje mogu da vide stranicu oko ćaskanja.
Pored klizača pronaći ćete dva dugmeta Save & Preview (Sačuvaj i pregledaj - označena ispod) - jedno za redove za desktop i jedno za red za mobilne uređaje. Klik na dugme čuva sve nesačuvane promene i zatim otvara ćaskanje u prozoru za pregled koristeći Vaša trenutna podešavanja:
- Dugme za desktop otvara običan prozor pretraživača kako biste videli tačnu veličinu na desktop ekranu.
- Dugme za mobilne uređaje otvara kompaktni iskačući prozor (400 x 700) tako da se vidžet prikazuje u svom mobilnom rasporedu, što je korisno kada podešavate klizač Mobile size sa desktop računara.
Režim fioke (Drawer Mode)
Drawer mode omogućava posetiocu da prebaci ćaskanje iz plutajućeg prozora u bočni panel pune visine pričvršćen za ivicu ekrana, dok je Vaša stranica i dalje vidljiva pored njega. Pogodan je za razgovore koje posetilac vodi dok istovremeno čita stranicu - dugački odgovori, poređenja proizvoda, obrasci ili bilo šta sa puno teksta.
Uključite ga i u zaglavlju ćaskanja će se pojaviti dugme; posetilac odlučuje da li želi da ga koristi. Njegov izbor se pamti za ostatak sesije pregledanja.
- Panel zauzima polovinu širine prozora pretraživača, do najviše 720 px, i uvek je pune visine. Pričvršćuje se za istu stranu na kojoj se nalazi Vaš pokretač, tako da vidžet postavljen levo otvara fioku sa leve strane.
- Podešavanja Desktop width i Desktop height se ovde ne primenjuju - ona definišu samo veličinu normalnog plutajućeg prozora.
- Dugme se prikazuje samo na desktop ekranima širine najmanje 1200 px, uz korišćenje miša. Na telefonima i tabletima se nikada ne prikazuje, jer ćaskanje tamo već ispunjava ceo ekran. Ako posetilac smanji širinu pretraživača ispod te granice, fioka se vraća u normalan prozor.
- Pokretač je sakriven dok je fioka otvorena; posetilac je zatvara iz zaglavlja ili napušta režim fioke pomoću istog dugmeta.
Drawer mode je podrazumevano isključen, tako da se ništa ne menja za Vaše posetioce dok ga ne omogućite.
Ostala podešavanja izgleda (Other Appearance Settings)
- Widget Shadow (Senka vidžeta) - omogućite ili onemogućite senku oko kontejnera vidžeta za ćaskanje
- Open links in (Otvori linkove u) - izaberite da li se linkovi u porukama ćaskanja otvaraju u novoj kartici (new tab) ili u istoj kartici (same tab)
Dugme za zatvaranje (X) se takođe prikazuje u zaglavlju ćaskanja na desktopu, tako da posetioci mogu da skupe ćaskanje nazad u pokretač bez ponovnog učitavanja stranice. Dugme za zatvaranje ostaje skriveno kada je ćaskanje ugrađeno kao iframe ili u režimu celog ekrana.
Prilagođeno podnožje ćaskanja (Custom Chat Footer)
Dodajte prilagođeni tekst koji se prikazuje na dnu vidžeta za ćaskanje (maksimalno 250 znakova). Markdown je podržan za ubacivanje linkova. Uobičajena primena je postavljanje linka ka Vašoj politici privatnosti ili uslovima korišćenja.
Primer Markdown formata:
By chatting you accept our [Privacy Policy](https://www.example.com)
Prilagođeni CSS (Custom CSS)
Dodajte prilagođene CSS stilove kako biste dodatno prilagodili izgled Vašeg vidžeta za ćaskanje (maksimalno 5000 znakova):
Povezani članci
- Kako da kreirate svog prvog četbota
- Podešavanja razgovora - napišite poruku dobrodošlice i predložena pitanja
- Ekran dobrodošlice - raspored pri otvaranju preko celog ekrana i njegove varijante za posetioce
- Prilagođeni obrasci - prikupljajte podatke o posetiocima unutar ćaskanja
- Prikupljanje potencijalnih klijenata