Podešavanja izgleda (Appearance settings) kontrolišu kako vidžet za ćaskanje Vašeg chatbota 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 chatbota pre nego što počnete sa stilizovanjem. Ako ga još niste kreirali, počnite sa člankom Kako da kreirate svog prvog chatbota.
Gde pronaći podešavanja izgleda
Izaberite svog chatbota i idite na Settings > Appearance (Podešavanja > Izgled). Sa glavne ChatLab stranice kliknite na Chatbots (Chatboti), otvorite svog chatbota, 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 chatbota) - prikazano ime koje se vidi u zaglavlju ćaskanja (maksimalno 60 znakova)
- Tagline (Podnaslov) - opcioni podnaslov prikazan ispod imena chatbota (maksimalno 60 znakova)
- Avatar (Avatar) - otpremite prilagođenu sliku koju posetioci vide tokom interakcije sa chatbotom. 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 chatbota
- 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
Prilagodite polje za unos poruke 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 (najviše 50 znakova, podrazumevano "Type a message..."). Iskoristite ga da ohrabrite posetioce da započnu kucanje.
- User background (Pozadina korisnika) - boja pozadine za poruke koje šalje posetilac
- User text (Tekst korisnika) - boja teksta u porukama posetioca
- Resp. background (Pozadina odgovora) - boja pozadine za odgovore chatbota
- Response text (Tekst odgovora) - boja teksta u odgovorima chatbota
Veličina teksta poruke podešava se u odeljku Tipografija, zajedno sa fontom vidžeta.
Predložena pitanja (Suggested Questions)
Predložena pitanja su gotovi upiti koje posetilac može da dodirne kako bi započeo razgovor. Sama pitanja pišete u Settings > Chat Conversation (Podešavanja > Razgovor na četu); ovde podešavate izgled dugmadi:
- Background (Pozadina) - boja pozadine dugmadi sa predloženim pitanjima
- Text (Tekst) - boja teksta dugmadi sa predloženim pitanjima
- Stack (Vertikalni raspored) - kada je omogućeno, duža predložena pitanja se ređaju vertikalno umesto prikazivanja horizontalne trake za pomeranje
Veličina teksta predloženih pitanja se podešava u odeljku Tipografija.
Podešavanja za umanjeni režim (Minimized-Mode Settings)
Kontrolišite kako chat widget izgleda kada je umanjen (pre nego što posetilac otvori chat):
- Režim umanjenog prikaza (Minimized display mode) - izaberite između:
- Ikona (Icon) - standardna kružna ikonica za pokretanje chata (podrazumevano)
- Umanjena chat traka (Minified chat bar) - kompaktna traka za unos teksta prikazana na dnu stranice
- Ikona sa tekstom (Icon with text) - šire dugme u obliku pilule: ikonica sa kratkim tekstualnim natpisom u dva reda
- Boja ikonice / Boja mini trake (Icon color / Mini bar color) - boja ikonice za pokretanje ili pozadine mini trake
- Prilagođena ikona chata (Custom chat icon) (samo za režim ikone) - uključite da biste otpremili sopstvene ikonice za otvaranje i zatvaranje chata
- Položaj na ekranu (Position on screen) - postavite widget na levu ili desnu stranu ekrana
- Pomerite ikonu/traku chata nagore za (Move up chat icon/bar by) - vertikalno odstupanje u pikselima od donje ivice
- Pomerite ikonu/traku levo/desno za (Move icon/bar left/right by) - horizontalno odstupanje u pikselima od najbliže ivice ekrana
Ikona sa tekstom (Icon with Text)
Režim Ikona sa tekstom (Icon with text) dodaje kratak natpis na dugme za pokretanje, tako da posetioci mogu da vide čemu chat služi pre nego što ga otvore. Koristan je kada sama ikonica nije dovoljno uočljiva - na primer „Pišite nam / Odgovaramo odmah“ ili „Treba Vam pomoć? / Pitajte našeg asistenta“.
Izbor ovog režima dodaje četiri podešavanja:
- Prvi red natpisa (Label line 1) - prvi, istaknutiji red natpisa (maksimalno 60 znakova)
- Drugi red natpisa (Label line 2) - drugi, svetliji red (maksimalno 60 znakova). Ostavite prazno ako želite dugme sa jednim redom teksta
- Boja teksta (Text color) - boja natpisa. Ako je ne promenite, ChatLab automatski bira crnu ili belu boju, u zavisnosti od toga koliko je svetla ili tamna boja Vašeg dugmeta za pokretanje
- Prikaži krstić za zatvaranje (Show close cross) - dodaje mali krstić na dugme za pokretanje kako bi posetioci mogli da ga sakriju
Oba reda se skraćuju sa tri tačke ako ne mogu da stanu, tako da dugme za pokretanje nikada ne prelazi širinu ekrana. Dugme se ponovo skuplja u krug dok je chat otvoren.
Ako je omogućena podrška za više jezika, oba reda natpisa se prevode kao i ostali tekstovi vidljivi posetiocima.
Opcija Prikaži krstić za zatvaranje (Show close cross) je podrazumevano isključena i dostupna je samo u ovom režimu. Kada je uključena, posetilac koji klikne na krstić sakriva dugme za pokretanje do kraja trenutne sesije pregledanja - ostaje sakriveno dok prelazi sa jedne stranice na drugu i ponovo se pojavljuje prilikom sledeće posete ili u novoj kartici. Chatbot 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 ljudskom podrškom) - 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 Ekran dobrodošlice.
Akcije u zaglavlju (Header Actions)
Kontroliše kako se Live Chat i Human Contact Form (obrazac za kontakt sa ljudskom podrškom) 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 chatboti koriste meni, što sprečava pretrpavanje zaglavlja kako se dodaje više akcija. Chatboti 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 chatbota 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 uklapa se 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 pregledač 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. Chatbot 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 se otvoreni vidžet za ćaskanje prikazuje na desktop i mobilnim uređajima. Svaki klizač ima dugme Podrazumevano (Default) koje vraća ugrađenu veličinu.
- Širina za desktop (Desktop width) - širina vidžeta u desktop pregledačima, u pikselima (330-800, podrazumevano 448)
- Visina za desktop (Desktop height) - visina vidžeta u desktop pregledačima, u pikselima (300-770, podrazumevano 660)
- Mobilna veličina (Mobile size) - veličina vidžeta na mobilnim uređajima, kao procenat ekrana (60-100%, podrazumevano 100%)
Pri podrazumevanoj vrednosti, vidžet koristi ugrađeno responzivno prilagođavanje veličine platforme ChatLab. Bilo koja druga vrednost primenjuje fiksnu veličinu.
Na mobilnim uređajima, podrazumevana vrednost (100%) čini da otvoreno ćaskanje pokriva ceo ekran. Izbor manjeg procenta smanjuje vidžet na taj deo ekrana i centrira ga na prikazu ekrana, tako da posetioci i dalje mogu da vide stranicu oko ćaskanja.
Pored klizača naći ćete dva dugmeta Sačuvaj i pregledaj (Save & Preview, istaknuto ispod) - jedno za desktop redove i jedno za mobilni red. Klikom na dugme čuvaju se sve nesačuvane promene i zatim se otvara ćaskanje u prozoru za pregled koristeći Vaša trenutna podešavanja:
- Desktop dugme otvara običan prozor pregledača kako biste mogli da vidite tačnu veličinu na desktop ekranu.
- Mobilno dugme 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č Mobilna veličina (Mobile size) sa desktop računara.
Dugme za uvećanje (režim fioke / Drawer Mode)
Režim fioke (Drawer mode) omogućava posetiocu da prebaci ćaskanje iz plutajućeg prozora u panel pune visine prikačen uz ivicu ekrana, dok je Vaša stranica i dalje vidljiva pored njega. Pogodan je za razgovore koje posetilac vodi dok čita stranicu - dugački odgovori, poređenja proizvoda, formulari ili bilo šta sa puno teksta.
Omogućite Dugme za uvećanje (Maximise button) u odeljku Veličina vidžeta (Widget Size) i u zaglavlju ćaskanja će se pojaviti dugme; posetilac sam odlučuje da li će ga koristiti. Njegov izbor se pamti do kraja sesije pregledanja.
- Panel je širok polovinu prozora pregledača, do maksimalno 720 px, i uvek je pune visine. Pričvršćuje se na istu stranu na kojoj je Vaš pokretač (launcher), tako da vidžet postavljen sa leve strane otvara fioku sa leve strane.
- Širina za desktop (Desktop width) i Visina za desktop (Desktop height) se ovde ne primenjuju - one određuju veličinu samo običnog 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 pojavljuje, jer ćaskanje tamo već ispunjava ceo ekran. Ako posetilac smanji prozor pregledača ispod te širine, fioka se vraća u običan prozor.
- Pokretač je sakriven dok je fioka otvorena; posetilac je zatvara iz zaglavlja ili izlazi iz režima fioke pomoću istog dugmeta.
Režim fioke je podrazumevano isključen, tako da se za Vaše posetioce ništa ne menja 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
Promene se automatski čuvaju. Sačekajte status Saved (Sačuvano), a zatim proverite karticu Overview (Pregled) i ugrađeni widget na računaru i mobilnom uređaju. Pregled u podešavanjima prikazuje prozor za chat; poziciju pokretača (launcher) i ponašanje automatskog otvaranja na nivou stranice takođe treba proveriti na widgetu ugrađenom u Vaš veb-sajt.
- Kako da kreirate svoj prvi chatbot
- Podešavanja razgovora (Conversation settings) - napišite poruku dobrodošlice i predložena pitanja
- Ekran dobrodošlice - početni raspored preko celog ekrana i njegove varijante za posetioce
- Prilagođene forme (Custom forms) - prikupite podatke o posetiocima unutar chata
- Prikupljanje leadova (Lead collection)