Nastavenia vzhľadu

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 Typografia 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 Typografia.

Nastavenia minimalizovaného režimu

Nastavte, ako sa chat widget zobrazuje v minimalizovanom stave (predtým, ako návštevník otvorí chat):

• Minimized display mode (Režim minimalizovaného zobrazenia) - vyberte si z možností:
  • Icon (Ikona) - štandardná kruhová ikona spúšťača chatu (predvolené)
  • Minified chat bar (Zmenšená lišta chatu) - kompaktné textové vstupné pole zobrazené v spodnej časti stránky
  • Icon with text (Ikona s textom) - širší spúšťač v tvare pilulky: ikona doplnená krátkym dvojriadkovým textom
• Icon color / Mini bar color (Farba ikony / Farba mini lišty) - farba ikony spúšťača alebo pozadia mini lišty
• Custom chat icon (Vlastná ikona chatu) (len v režime ikony) - povoľte na nahratie vlastných ikon na otvorenie/zatvorenie chatu
• Position on screen (Pozícia na obrazovke) - umiestnenie widgetu na ľavej alebo pravej strane 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

Ikona s textom (Icon with text)

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 vtedy, keď samotná ikona nie je dostatočne výrečná - napríklad „Napíšte nám / Odpovedáme ihneď“ alebo „Potrebujete pomôcť? / Spýtajte sa nášho asistenta“.

Výberom tohto režimu pribudnú štyri nastavenia:

• Label line 1 (Textový riadok 1) - prvý, zvýraznený riadok textu (max. 60 znakov)
• Label line 2 (Textový riadok 2) - druhý, svetlejší riadok (max. 60 znakov). Nechajte ho prázdny, ak chcete iba jednoriadkový spúšťač
• Text color (Farba textu) - farba textu. Ak ju necháte bez zmeny, ChatLab automaticky zvolí čiernu alebo bielu farbu podľa toho, aká svetlá či tmavá je farba vášho spúšťača
• Show close cross (Zobraziť krížik na zatvorenie) - pridá na spúšťač malý krížik, aby ho návštevníci mohli skryť

Oba riadky sa v prípade potreby skrátia trojbodkou, takže spúšťač nikdy nebude širší ako obrazovka. Počas otvoreného chatu sa spúšťač opäť zmenší na kruh.

Ak je zapnutá podpora viacerých jazykov, oba textové riadky sa prekladajú rovnako ako ostatné texty určené pre návštevníkov.

Možnosť Show close cross je predvolene vypnutá a je k dispozícii iba v tomto režime. Keď je zapnutá, návštevník kliknutím na krížik spúšťač skryje na celú dobu svojej relácie prehliadania - zostane skrytý aj pri prechádzaní medzi stránkami a znova sa zobrazí až pri ďalšej návšteve alebo na novej karte. Chatbot nastavený na automatické otvorenie túto voľbu rešpektuje a po tom, ako ho návštevník zatvoril, sa znovu 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é chatboty používajú menu, vďaka čomu zostáva záhlavie prehľadné aj pri pridávaní ďalších akcií. Chatboty 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.

Veľkosť widgetu (Widget Size)

Nastavte, aký veľký sa má otvorený chatovací widget zobrazovať na počítačoch a mobilných zariadeniach. Každý posuvník obsahuje tlačidlo Default (Predvolené), ktoré obnoví pôvodné predvolené rozmery.

• 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 ako percento obrazovky (60-100 %, predvolená hodnota 100 %)

Pri predvolenej hodnote widget využíva vstavané responzívne prispôsobenie veľkosti od ChatLabu. Akákoľvek iná hodnota nastaví pevnú veľkosť.

Na mobilných zariadeniach predvolená hodnota (100 %) spôsobí, že otvorený chat pokryje celú obrazovku. Výber nižšieho percenta zmenší widget na danú časť obrazovky a vycentruje ho na displeji, takže návštevníci stále uvidia stránku okolo chatu.

Vedľa posuvníkov nájdete dve tlačidlá Save & Preview (Uložiť a zobraziť náhľad, zvýraznené nižšie) - jedno pre riadky nastavení počítača a jedno pre riadok mobilného zariadenia. Kliknutím na tlačidlo sa uložia všetky neuložené zmeny a následne sa otvorí chat v okne náhľadu s vašimi aktuálnymi nastaveniami:

• Tlačidlo pre počítač otvorí bežné okno prehliadača, aby ste videli presnú veľkosť na obrazovke počítača.
• Tlačidlo pre mobil otvorí kompaktné vyskakovacie okno (400 x 700), takže sa widget vykreslí v mobilnom rozložení, čo je praktické, keď posuvník Mobile size upravujete na počítači.

Tlačidlo maximalizácie (režim Drawer Mode)

Režim bočného panela (Drawer mode) umožňuje návštevníkovi prepnúť chat z plávajúceho okna na panel na celú výšku ukotvený k okraju obrazovky, pričom vaša stránka zostane vedľa neho stále viditeľná. Hodí sa na konverzácie, ktorým sa návštevník venuje počas čítania stránky - dlhé odpovede, porovnávanie produktov, formuláre alebo čokoľvek s veľkým množstvom textu.

Povoľte možnosť Maximise button (Tlačidlo maximalizácie) v sekcii Widget Size a v hlavičke chatu sa zobrazí tlačidlo; návštevník sa sám rozhodne, či ho použije. Jeho voľba sa zapamätá na zvyšok relácie prehliadania.

• Panel zaberá polovicu šírky okna prehliadača, maximálne 720 px, a vždy celú výšku. Ukotví sa na rovnakú stranu ako váš spúšťač (launcher), takže widget umiestnený vľavo otvorí bočný panel vľavo.
• Hodnoty Desktop width a Desktop height tu neplatia - určujú veľkosť iba bežného plávajúceho okna.
• Tlačidlo sa zobrazuje iba na obrazovkách počítačov so šírkou aspoň 1200 px a s myšou. Na telefónoch a tabletoch sa nezobrazuje nikdy, pretože chat tam už vypĺňa celú obrazovku. Ak návštevník zmenší okno prehliadača pod túto šírku, bočný panel sa zloží späť do bežného okna.
• Spúšťač je počas otvorenia bočného panela skrytý; návštevník ho zatvorí z hlavičky alebo rovnakým tlačidlom opustí režim bočného panela.

Režim bočného panela je v predvolenom stave vypnutý, takže pre vašich návštevníkov sa nič nezmení, kým ho nepovolíte.

Ď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

Zmeny sa ukladajú automaticky. Počkajte na hlásenie Saved (Uložené) a potom skontrolujte Overview (Prehľad) a vložený widget na počítači aj na mobile. Náhľad nastavení zobrazuje okno chatu; umiestnenie spúšťača a správanie automatického otvárania na úrovni stránky by ste mali skontrolovať aj na vašom vloženom widgete na webe.

• Ako vytvoriť svojho prvého chatbota
• Nastavenia konverzácie (Conversation settings) - napíšte uvítaciu správu a navrhované otázky
• Uvítacia obrazovka - celoobrazovkové rozloženie pri otvorení a jeho varianty pre návštevníkov
• Vlastné formuláre (Custom forms) - zbierajte údaje o návštevníkoch priamo v chate
• Zber leadov (Lead collection)