Nastavenia vzhľadu určujú, ako sa widget chatu vášho chatbota zobrazuje návštevníkom na vašej webovej stránke - záhlavie, farby a písma správ, ikona spúšťača, uvítacia obrazovka, veľkosť widgetu a ďalšie prvky. Na tomto mieste môžete widget prispôsobiť svojej značke.
Pred úpravou vzhľadu musíte mať vytvoreného chatbota. Ak ste ho zatiaľ nevytvorili, začnite článkom Ako vytvoriť svojho prvého chatbota.
Kde nájsť nastavenia vzhľadu
Vyberte svojho chatbota a prejdite do sekcie Settings > Appearance (Nastavenia > Vzhľad). Na hlavnej stránke ChatLab kliknite na Chatbots (Chatboti), otvorte svojho chatbota, prejdite na kartu Settings (Nastavenia) a v ľavom menu vyberte Appearance (Vzhľad).
Na pravej strane stránky sa zobrazuje živý náhľad widgetu, ktorý sa aktualizuje pri každej zmene nastavení.
Chat Header (Záhlavie chatu)
Nakonfigurujte vzhľad hornej časti widgetu chatu:
- Chatbot name (Názov chatbota) - zobrazované meno uvedené v záhlaví chatu (maximálne 60 znakov)
- Tagline (Podtitul) - voliteľný podtitul zobrazený pod názvom chatbota (maximálne 60 znakov)
- Avatar - nahrajte vlastný obrázok, ktorý zákazníci uvidia pri komunikácii s chatbotom. Tlačidlom Remove (Odstrániť; zvýraznené nižšie) môžete aktuálny obrázok vymazať.
- Background (Pozadie) - farba pozadia oblasti záhlavia
- Name color (Farba názvu) - farba textu s názvom chatbota
- Tagline color (Farba podtitulu) - farba textu podtitulu
- Reset conversation tooltip (Popis tlačidla reštartu konverzácie) - text popisu (tooltipu), ktorý sa zobrazí, keď návštevník prejde myšou ponad tlačidlo na resetovanie konverzácie v záhlaví widgetu (maximálne 40 znakov, predvolená hodnota "Reset conversation")
Message (Správa)
Prispôsobte pole na zadávanie správ a vzhľad správ v konverzácii:
- Input placeholder (Zástupný text poľa) - zástupný text zobrazený v poli na zadanie novej správy v spodnej časti widgetu (maximálne 50 znakov, predvolená hodnota "Type a message..."). Využite ho na motivovanie návštevníkov, aby začali písať.
- User background (Pozadie používateľa) - farba pozadia správ odoslaných návštevníkom
- User text (Text používateľa) - farba textu správ od návštevníka
- Resp. background (Pozadie odpovede) - farba pozadia odpovedí chatbota
- Response text (Text odpovede) - farba textu odpovedí chatbota
Veľkosť písma správ sa nastavuje v sekcii Typography spolu s písmom celého widgetu.
Suggested Questions (Navrhované otázky)
Navrhované otázky sú pripravené podnety, na ktoré môže návštevník kliknúť a jednoducho začať konverzáciu. Samotné otázky nastavíte v sekcii Settings > Chat Conversation (Nastavenia > Konverzácia chatu); tu upravujete vzhľad tlačidiel:
- Background (Pozadie) - farba pozadia tlačidiel s navrhovanými otázkami
- Text - farba textu tlačidiel s navrhovanými otázkami
- Stack (Usporiadať pod seba) - po zapnutí sa dlhšie navrhované otázky radia vertikálne pod seba namiesto vodorovného posuvníka
Veľkosť textu navrhovaných otázok sa nastavuje v sekcii Typography.
Minimized-Mode Settings (Nastavenia minimalizovaného režimu)
Nastavte, ako widget chatu vyzerá v minimalizovanom stave (predtým, než návštevník chat otvorí):
- Minimized display mode (Režim minimalizovaného zobrazenia) - vyberte z možností:
- Icon (Ikona) - štandardná okrúhla ikona spúšťača chatu (predvolené)
- Minified chat bar (Zmenšená lišta chatu) - kompaktný riadok na zadávanie textu umiestnený v spodnej časti stránky
- Icon with text (Ikona s textom) - širší spúšťač v tvare zaoblenej pilulky: ikona doplnená o krátky dvojriadkový popis
- Icon color / Mini bar color (Farba ikony / Farba mini lišty) - farba pozadia ikony spúšťača alebo mini lišty
- Custom chat icon (Vlastná ikona chatu; iba v režime ikony) - aktivujte na nahratie vlastných ikon pre otvorenie a zatvorenie chatu
- Position on screen (Umiestnenie na obrazovke) - umiestnite widget na ľavú alebo pravú stranu obrazovky
- Move up chat icon/bar by (Posunúť ikonu/lištu chatu nahor o) - vertikálne odsadenie v pixeloch od spodného okraja
- Move icon/bar left/right by (Posunúť ikonu/lištu doľava/doprava o) - horizontálne odsadenie v pixeloch od najbližšieho okraja obrazovky
Icon with Text (Ikona s textom)
Režim Icon with text pridáva k spúšťaču krátky text, aby návštevníci ešte pred otvorením videli, na čo chat slúži. Hodí sa to v situáciách, keď samotná ikona nie je dostatočne výrečná - napríklad "Napíšte nám / Odpovedáme ihneď" alebo "Potrebujete poradiť? / Spýtajte sa asistenta".
Výber tohto režimu sprístupní štyri nastavenia:
- Label line 1 (Text 1. riadku) - prvý, výraznejší riadok popisu (maximálne 60 znakov)
- Label line 2 (Text 2. riadku) - druhý, jemnejší riadok popisu (maximálne 60 znakov). Ak ho nevyplníte, spúšťač bude jednoriadkový
- Text color (Farba textu) - farba popisu. Ak hodnotu nezmeníte, ChatLab automaticky zvolí čiernu alebo bielu farbu podľa svetlosti farby spúšťača
- Show close cross (Zobraziť krížik na zatvorenie) - pridá na spúšťač malý krížik, ktorým môžu návštevníci spúšťač skryť
Ak sa text nezmestí, oba riadky sa skrátia trojbodkou, takže spúšťač nikdy nepresiahne šírku obrazovky. Počas otvoreného chatu sa spúšťač znova zmenší na kruh.
Ak máte viacjazyčného chatbota, oba riadky popisu sa prekladajú rovnako ako ostatné texty pre návštevníkov, takže každý návštevník uvidí text vo svojom jazyku.
Možnosť Show close cross je predvolene vypnutá a je dostupná iba v tomto režime. Po kliknutí na krížik návštevník spúšťač skryje na celú dobu svojej návštevy - zostane skrytý aj pri prechádzaní medzi stránkami a znova sa zobrazí až pri ďalšej návšteve alebo v novej karte. Ak je chatbot nastavený na automatické otváranie, túto voľbu rešpektuje a po zatvorení používateľom sa znova sám neotvorí.
Auto Open Chat Widget After Page Load (Automatické otvorenie widgetu chatu po načítaní stránky)
Nastavte automatické otvorenie chatu po načítaní stránky návštevníkom:
- Auto open on mobile (Automaticky otvoriť na mobile) - automaticky otvorí chat na mobilných zariadeniach
- Auto open on desktop (Automaticky otvoriť na počítači) - automaticky otvorí chat na počítačových obrazovkách
- Open chat with delay (Otvoriť chat s oneskorením) - zapne časové oneskorenie pred automatickým otvorením (dostupné iba pri zapnutom automatickom otváraní)
- Delay by (Oneskorenie o) - počet sekúnd čakania pred otvorením (0-60 sekúnd)
Human-Like Messaging (Písanie pripomínajúce človeka)
Simuluje prirodzené písanie človeka rozdelením odpovedí do viacerých bublín so správami, ktoré sa zobrazujú postupne po jednotlivých vetách:
- Human-Like Messaging - prepínač na zapnutie alebo vypnutie funkcie
- Delay Between Bubbles (Oneskorenie medzi bublinami) - čas v sekundách medzi zobrazením jednotlivých bublín správ (0-200 sekúnd)
Welcome Message Bubble (Bublina s uvítacou správou)
Uvítaciu správu môžete zobraziť v bubline nad ikonou spúšťača chatu, aby si návštevníci chat ľahšie všimli. Táto funkcia je dostupná len v režime ikony a nefunguje v režime iframe ani pri zapnutom automatickom otváraní.
- Show on desktop (Zobraziť na počítači) - zobrazí bublinu s uvítacou správou na počítači
- Show on mobile (Zobraziť na mobile) - zobrazí bublinu s uvítacou správou na mobilných zariadeniach
- Delay (Oneskorenie) - počet sekúnd po načítaní stránky, po ktorých sa bublina zobrazí (0-60 sekúnd)
Ak máte nastavených viacero uvítacích správ, zobrazia sa navrstvené nad ikonou chatu.
Hlasový vstup (tlačidlo mikrofónu v poli na zadávanie správ v chate) sa nastavuje v sekcii Settings > Chat Conversation, nie tu v nastaveniach vzhľadu.
Welcome Screen (Uvítacia obrazovka)
Prepnite widget do špeciálneho úvodného rozloženia, ktoré privíta nových návštevníkov veľkou uvítacou správou a navrhovanými otázkami usporiadanými na vycentrovanej bielej karte. Uvítacia obrazovka sa zobrazuje iba na začiatku novej relácie a hneď po odoslaní prvej správy návštevníkom sa prepne do štandardného zobrazenia chatu.
- Special Welcome Screen (Špeciálna uvítacia obrazovka) - zapína alebo vypína režim uvítacej obrazovky (predvolene vypnuté)
- Suggested questions intro (Úvod navrhovaných otázok) - krátky text zobrazený nad kartou navrhovaných otázok na uvítacej obrazovke (napríklad "Vyberte možnosť alebo napíšte správu"). Ak chcete text skryť, nechajte pole prázdne. Vyžaduje nastavenie navrhovaných otázok v sekcii Settings > Chat Conversation.
- Hide Human Contact Form (Skryť kontaktný formulár) - skryje akciu kontaktného formulára v záhlaví, kým je uvítacia obrazovka zobrazená
- Hide Live Chat (Skryť Live Chat) - skryje akciu Live Chat v záhlaví, kým je uvítacia obrazovka zobrazená
Uvítacia obrazovka je integrovaná aj so zberom leadov (Lead Collection) a Privacy Policy consent (súhlasom so zásadami ochrany osobných údajov) - ak sa niektorý z týchto prvkov vyžaduje na začiatku konverzácie, formulár alebo výzva na udelenie súhlasu sa namiesto navrhovaných otázok zobrazia priamo na uvítacej karte.
Kompletné podrobnosti, varianty rozloženia a snímky obrazovky z pohľadu návštevníka nájdete v článku Uvítacia obrazovka.
Header Actions (Akcie v záhlaví)
Nastavuje spôsob zobrazovania funkcií Live Chat a Human Contact Form (kontaktný formulár) v záhlaví widgetu chatu.
- Separate icons (Samostatné ikony) - každá akcia má v záhlaví vlastnú ikonu vedľa tlačidla na zatvorenie
- Menu (dropdown) (Menu (rozbaľovacie)) - obe akcie sa presunú do ponuky v záhlaví (ikona s tromi bodkami), kde sa nachádzajú aj položky ako "Reset conversation" (Resetovať konverzáciu) a prepínač jazykov, ak sú tieto funkcie zapnuté
Noví chatboti používajú menu, vďaka čomu zostáva záhlavie prehľadné aj pri pridávaní ďalších akcií. Chatboti vytvorení pred 2. septembrom 2026 si ponechávajú samostatné ikony, takže sa pre ich návštevníkov nič nemení. Nastavenie môžete kedykoľvek zmeniť - ovplyvňuje iba vizuálnu prezentáciu, nie funkčnosť samotných akcií.
Typography (Typografia)
Nastavuje typ písma a veľkosti textu používané v celom widgete - v správach, navrhovaných otázkach, záhlaví, formulároch aj v popise spúšťača.
- Widget font (Písmo widgetu) - jedno z ôsmich písiem: System default (Predvolené systémové), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif a JetBrains Mono
- Message font size (Veľkosť písma správ) - veľkosť textu správ (12-24 px)
- Suggested questions font size (Veľkosť písma navrhovaných otázok) - veľkosť písma tlačidiel navrhovaných otázok (12-24 px)
Písmo Inter je predvolené a zodpovedá pôvodnému vzhľadu každého chatbota pred zavedením tohto nastavenia, takže kým nezvolíte iné písmo, nič sa nezmení.
Možnosť System default nesťahuje žiadne externé súbory - widget využíva písmo nainštalované priamo v zariadení návštevníka. Ide o najrýchlejšiu voľbu, ktorá prirodzene splynie s webmi využívajúcimi systémové písma, no chat sa bude mierne líšiť na systémoch Windows, macOS a Android. Ostatných sedem možností tvoria Google Fonts, ktoré prehliadač návštevníka stiahne raz. Každé písmo obsahuje záložné riešenie (fallback), takže aj keď sieť návštevníka blokuje Google Fonts, text zostane čitateľný a rozloženie sa nepokazí.
Súbor s písmom sa načítava priamo do okna chatu. Na vašu vlastnú stránku sa pridáva iba vtedy, keď widget zobrazuje text mimo okna chatu - pri spúšťači v režime Icon with text, zmenšenej lište chatu alebo bublinách s uvítacou správou. Chatbot využívajúci jednoduchú ikonu spúšťača nevytvára pre vašu stránku žiadnu požiadavku navyše.
Widget Size (Veľkosť widgetu)
Upravte rozmery otvoreného widgetu chatu na počítačoch a mobilných zariadeniach. Pri každom posuvníku sa nachádza tlačidlo Default (Predvolené), ktoré obnoví pôvodnú veľkosť.
- Desktop width (Šírka na počítači) - šírka widgetu v prehliadačoch na počítači v pixeloch (330-800, predvolená hodnota 448)
- Desktop height (Výška na počítači) - výška widgetu v prehliadačoch na počítači v pixeloch (300-770, predvolená hodnota 660)
- Mobile size (Veľkosť na mobile) - veľkosť widgetu na mobilných zariadeniach vyjadrená percentom z obrazovky (60-100 %, predvolená hodnota 100 %)
Pri predvolenej hodnote widget využíva vstavané responzívne prispôsobenie veľkosti platformy ChatLab. Akákoľvek iná hodnota nastaví pevnú veľkosť.
Na mobilných zariadeniach predvolená hodnota (100 %) zabezpečí, že otvorený chat prekryje celú obrazovku. Výberom nižšieho percenta widget zmenšíte na danú časť obrazovky a zarovnáte ho na stred zobrazovacej plochy, takže návštevníci okolo chatu stále uvidia pôvodnú stránku.
Vedľa posuvníkov nájdete dve tlačidlá Save & Preview (Uložiť a zobraziť náhľad; zvýraznené nižšie) - jedno pre nastavenia na počítači a druhé pre riadok na mobilných zariadeniach. Kliknutím na tlačidlo sa uložia neuložené zmeny a otvorí sa chat v okne s náhľadom podľa vašich aktuálnych nastavení:
- Tlačidlo pre počítač otvorí bežné okno prehliadača, kde uvidíte presnú veľkosť na obrazovke počítača.
- Tlačidlo pre mobil otvorí kompaktné vyskakovacie okno (400 x 700), v ktorom sa widget vykreslí v mobilnom rozložení, čo oceníte pri nastavovaní posuvníka Mobile size z počítača.
Drawer Mode (Režim vysúvacieho panelu)
Drawer mode umožňuje návštevníkovi prepnúť chat z plávajúceho okna do bočného panelu na celú výšku, ktorý je ukotvený k okraju obrazovky, pričom vaša stránka zostáva vedľa neho plne viditeľná. Hodí sa to na konverzácie, ktoré návštevník vedie počas čítania stránky - dlhé odpovede, porovnania produktov, formuláre alebo čokoľvek s väčším množstvom textu.
Po zapnutí tejto funkcie sa v záhlaví chatu zobrazí tlačidlo; o jeho použití rozhoduje návštevník. Jeho voľba sa zapamätá na celú dobu relácie prehliadania.
- Panel zaberá polovicu šírky okna prehliadača (maximálne 720 px) a vždy celú výšku. Ukotví sa na rovnakej strane ako váš spúšťač - widget umiestnený vľavo teda otvorí panel na ľavej strane.
- Nastavenia Desktop width a Desktop height tu neplatia - určujú iba rozmery bežného plávajúceho okna.
- Tlačidlo sa zobrazuje iba na obrazovkách počítačov so šírkou aspoň 1200 px a pripojenou myšou. Na telefónoch a tabletoch sa nezobrazuje, pretože chat tam už celú obrazovku vypĺňa. Ak návštevník zmenší okno prehliadača pod túto šírku, vysúvací panel sa automaticky vráti do bežného okna.
- Kým je panel otvorený, spúšťač je skrytý; návštevník ho zatvorí zo záhlavia alebo režim vysúvacieho panelu opustí rovnakým tlačidlom.
Režim Drawer mode je predvolene vypnutý, takže kým ho nezapnete, pre návštevníkov sa nič nemení.
Ďalšie nastavenia vzhľadu
- Widget Shadow (Tieň widgetu) - zapnutie alebo vypnutie tieňa okolo kontajnera widgetu chatu
- Open links in (Otvárať odkazy v) - nastavte, či sa odkazy v správach chatu otvárajú na novej karte alebo na rovnakej karte
Na počítačoch sa v záhlaví chatu zobrazuje aj tlačidlo na zatvorenie (X), aby návštevníci mohli chat zbaliť späť do podoby spúšťača bez nutnosti opätovného načítania stránky. Tlačidlo na zatvorenie zostáva skryté, ak je chat vložený ako iframe alebo beží v režime celej obrazovky.
Custom Chat Footer (Vlastná pätička chatu)
Pridajte vlastný text zobrazený v spodnej časti widgetu chatu (maximálne 250 znakov). Na vkladanie odkazov je podporovaný formát Markdown. Bežným využitím je odkaz na zásady ochrany osobných údajov alebo obchodné podmienky.
Príklad formátu Markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS (Vlastné štýly CSS)
Pridajte vlastné štýly CSS pre ešte podrobnejšie prispôsobenie vzhľadu widgetu chatu (maximálne 5000 znakov):
Súvisiace články
- Ako vytvoriť svojho prvého chatbota
- Nastavenia konverzácie - vytvorenie uvítacej správy a navrhovaných otázok
- Uvítacia obrazovka - celoobrazovkové úvodné rozloženie a jeho varianty pre návštevníkov
- Vlastné formuláre - zber údajov od návštevníkov priamo v chate
- Zber leadov