Nastavení vzhledu určují, jak se chatovací widget vašeho chatbota zobrazuje návštěvníkům vašeho webu - záhlaví, barvy a písma zpráv, ikona spouštěče, uvítací obrazovka, velikost widgetu a další. Zde přizpůsobíte widget své značce.
Abyste mohli chatbot nastylovat, musíte ho nejprve vytvořit. Pokud jste jej ještě nevytvořili, začněte článkem Jak vytvořit prvního chatbota.
Kde najít nastavení vzhledu
Vyberte svého chatbota a přejděte do Settings > Appearance (Nastavení > Vzhled). Na hlavní stránce ChatLab klikněte na Chatbots (Chatboti), otevřete svého chatbota, přejděte na záložku Settings (Nastavení) a v levé nabídce zvolte Appearance (Vzhled).
Na pravé straně stránky se zobrazuje živý náhled vašeho widgetu, který se aktualizuje při každé změně nastavení.
Záhlaví chatu (Chat Header)
Nakonfigurujte, jak bude vypadat horní část vašeho chatovacího widgetu:
- Chatbot name (Název chatbota) - zobrazované jméno uvedené v záhlaví chatu (max. 60 znaků)
- Tagline (Podtitul) - volitelný podtitul zobrazený pod názvem chatbota (max. 60 znaků)
- Avatar - nahrajte vlastní obrázek, který zákazníci uvidí při komunikaci s chatbotem. Tlačítkem Remove (Odstranit, zvýrazněno níže) aktuální obrázek smažete.
- Background (Pozadí) - barva pozadí oblasti záhlaví
- Name color (Barva názvu) - barva textu názvu chatbota
- Tagline color (Barva podtitulu) - barva textu podtitulu
- Reset conversation tooltip (Popisek tlačítka pro reset konverzace) - text popisku zobrazený po najetí myší na tlačítko pro resetování konverzace v záhlaví widgetu (max. 40 znaků, výchozí "Reset conversation")
Zpráva (Message)
Přizpůsobte pole pro zadávání zpráv i vzhled samotných zpráv v konverzaci:
- Input placeholder (Zástupný text pole pro zadání) - zástupný text v poli pro novou zprávu ve spodní části widgetu (max. 50 znaků, výchozí "Type a message..."). Pomáhá návštěvníky pobídnout k psaní.
- User background (Pozadí uživatele) - barva pozadí zpráv odeslaných návštěvníkem
- User text (Text uživatele) - barva textu zpráv návštěvníka
- Resp. background (Pozadí odpovědi) - barva pozadí odpovědí chatbota
- Response text (Text odpovědi) - barva textu odpovědí chatbota
Velikost textu zpráv se nastavuje v sekci Typografie společně s písmem widgetu.
Navrhované otázky (Suggested Questions)
Navrhované otázky jsou připravené podněty, na které může návštěvník klepnout a zahájit konverzaci. Samotné otázky píšete v Settings > Chat Conversation (Nastavení > Konverzace chatu); zde stylujete vzhled tlačítek:
- Background (Pozadí) - barva pozadí tlačítek navrhovaných otázek
- Text - barva textu tlačítek navrhovaných otázek
- Stack (Skládat pod sebe) - po zapnutí se delší navrhované otázky řadí svisle pod sebe místo vodorovného posuvníku
Velikost textu navrhovaných otázek se nastavuje v sekci Typografie.
Nastavení minimalizovaného režimu (Minimized-Mode Settings)
Určete, jak widget vypadá v minimalizovaném stavu (než návštěvník chat otevře):
- Minimized display mode (Režim minimalizovaného zobrazení) - vyberte z možností:
- Icon (Ikona) - standardní kulatá ikona spouštěče chatu (výchozí)
- Minified chat bar (Zmenšená lišta chatu) - kompaktní vstupní textová lišta zobrazená ve spodní části stránky
- Icon with text (Ikona s textem) - širší spouštěč ve tvaru pilulky: ikona doplněná krátkým dvouřádkovým popiskem
- Icon color / Mini bar color (Barva ikony / Barva mini lišty) - barva ikony spouštěče nebo pozadí zmenšené lišty
- Custom chat icon (Vlastní ikona chatu, pouze v režimu ikony) - zapněte pro nahrání vlastních ikon pro otevření/zavření chatu
- Position on screen (Pozice na obrazovce) - umístěte widget na levou nebo pravou stranu obrazovky
- Move up chat icon/bar by (Posunout ikonu/lištu chatu nahoru o) - svislé odsazení v pixelech od spodního okraje
- Move icon/bar left/right by (Posunout ikonu/lištu vlevo/vpravo o) - vodorovné odsazení v pixelech od nejbližšího okraje obrazovky
Ikona s textem (Icon with Text)
Režim Icon with text přidává ke spouštěči krátký popisek, takže návštěvníci ještě před otevřením vidí, k čemu chat slouží. Hodí se to, když samotná ikona není dostatečně výmluvná - například „Napište nám / Odpovídáme ihned" nebo „Potřebujete pomoc? / Zeptejte se našeho asistenta".
Výběr tohoto režimu přidá čtyři nastavení:
- Label line 1 (1. řádek popisku) - první, výraznější řádek popisku (max. 60 znaků)
- Label line 2 (2. řádek popisku) - druhý, méně nápadný řádek (max. 60 znaků). Chcete-li jednořádkový spouštěč, nechte jej prázdný
- Text color (Barva textu) - barva popisku. Pokud ji necháte beze změny, ChatLab automaticky zvolí černou nebo bílou podle světlosti barvy vašeho spouštěče
- Show close cross (Zobrazit křížek pro zavření) - přidá na spouštěč malý křížek, kterým jej návštěvníci mohou skrýt
Pokud se text nevejde, oba řádky se zkrátí výpustkou (...), takže spouštěč nikdy nebude širší než obrazovka. Během otevřeného chatu se spouštěč zmenší zpět na kruh.
Pokud máte vícejazyčného chatbota, oba řádky popisku se přeloží stejně jako ostatní texty určené pro návštěvníky, takže každý uvidí popisek ve svém jazyce.
Možnost Show close cross je ve výchozím stavu vypnutá a je dostupná pouze v tomto režimu. Pokud ji zapnete a návštěvník na křížek klikne, spouštěč se skryje po zbytek jeho relace - zůstane skrytý při procházení dalších stránek a znovu se objeví až při další návštěvě nebo na nové kartě. Pokud je chatbot nastaven na automatické otevírání, toto rozhodnutí respektuje a po zavření uživatelem se znovu neotevře.
Automatické otevření widgetu po načtení stránky (Auto Open Chat Widget After Page Load)
Nastavte automatické rozbalení chatu po načtení stránky návštěvníkem:
- Auto open on mobile (Automaticky otevřít na mobilu) - automaticky otevře chat na mobilních zařízeních
- Auto open on desktop (Automaticky otevřít na počítači) - automaticky otevře chat na počítačových obrazovkách
- Open chat with delay (Otevřít chat se zpožděním) - zapne prodlevu před automatickým otevřením (dostupné pouze při zapnutém automatickém otevírání)
- Delay by (Zpozdit o) - počet sekund čekání před otevřením (0-60 sekund)
Zprávy jako od člověka (Human-Like Messaging)
Simuluje přirozené psaní člověkem tím, že odpovědi rozdělí do několika bublin, které se zobrazují postupně větu po větě:
- Human-Like Messaging - přepínač pro zapnutí/vypnutí funkce
- Delay Between Bubbles (Prodleva mezi bublinami) - čas v sekundách mezi zobrazením jednotlivých bublin zpráv (0-200 sekund)
Uvítací bublina (Welcome Message Bubble)
Zobrazte uvítací zprávu v bublině nad ikonou spouštěče chatu, aby si návštěvníci chatu snáze všimli. Tato funkce je dostupná pouze v režimu ikony a nefunguje v režimu iframe ani při zapnutém automatickém otevírání.
- Show on desktop (Zobrazit na počítači) - zobrazí uvítací bublinu na počítači
- Show on mobile (Zobrazit na mobilu) - zobrazí uvítací bublinu na mobilních zařízeních
- Delay (Zpoždění) - počet sekund od načtení stránky do zobrazení bubliny (0-60 sekund)
Máte-li nastaveno více uvítacích zpráv, zobrazí se nad ikonou chatu naskládané na sobě.
Hlasový vstup (tlačítko mikrofonu v poli pro zadávání zpráv) se konfiguruje v Settings > Chat Conversation, nikoli zde ve vzhledu.
Uvítací obrazovka (Welcome Screen)
Přepněte widget do speciálního úvodního rozvržení, které nové návštěvníky přivítá velkou uvítací zprávou a navrhovanými otázkami uspořádanými na vycentrované bílé kartě. Uvítací obrazovka se zobrazuje pouze na začátku nové relace a na standardní zobrazení chatu se přepne, jakmile návštěvník odešle svou první zprávu.
- Special Welcome Screen (Speciální uvítací obrazovka) - zapíná nebo vypíná režim uvítací obrazovky (ve výchozím nastavení vypnuto)
- Suggested questions intro (Úvod k navrhovaným otázkám) - krátký text zobrazený nad kartou navrhovaných otázek na uvítací obrazovce (například „Vyberte možnost nebo napište zprávu"). Ponechte prázdné pro skrytí textu. Vyžaduje nastavené navrhované otázky v Settings > Chat Conversation.
- Hide Human Contact Form (Skrýt formulář lidského kontaktu) - skryje akci kontaktního formuláře v záhlaví po dobu zobrazení uvítací obrazovky
- Hide Live Chat (Skrýt Live Chat) - skryje akci Live Chat v záhlaví po dobu zobrazení uvítací obrazovky
Uvítací obrazovka se integruje také se sběrem kontaktů (Lead Collection) a souhlasem se zásadami ochrany osobních údajů (Privacy Policy consent) - pokud je některé z nich vyžadováno při zahájení konverzace, na uvítací kartě se místo navrhovaných otázek zobrazí příslušný formulář nebo výzva k udělení souhlasu.
Podrobné informace, varianty rozvržení a snímky obrazovky z pohledu návštěvníka najdete v článku Uvítací obrazovka.
Akce v záhlaví (Header Actions)
Určuje, jak jsou v záhlaví widgetu nabízeny funkce Live Chat a formulář pro lidský kontakt (Human Contact Form).
- Separate icons (Samostatné ikony) - každá akce má v záhlaví vlastní ikonu vedle tlačítka pro zavření
- Menu (dropdown) (Nabídka - rozbalovací) - obě akce se přesunou do nabídky v záhlaví (ikona tří teček) vedle položek jako „Reset conversation" a přepínače jazyků, pokud jsou zapnuté
Noví chatboti využívají nabídku, což udržuje záhlaví přehledné i při přidávání dalších akcí. Chatboti vytvoření před 2. zářím 2026 si ponechávají samostatné ikony, takže se pro jejich návštěvníky nic nemění. Nastavení můžete kdykoliv změnit - ovlivňuje pouze vzhled, nikoli fungování samotných akcí.
Typografie (Typography)
Nastavuje písmo a velikosti textu v celém widgetu - ve zprávách, navrhovaných otázkách, záhlaví, formulářích i popisku spouštěče.
- Widget font (Písmo widgetu) - jedno z osmi písem: System default (Výchozí systémové), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif a JetBrains Mono
- Message font size (Velikost písma zpráv) - velikost textu zpráv (12-24 px)
- Suggested questions font size (Velikost písma navrhovaných otázek) - velikost tlačítek s navrhovanými otázkami (12-24 px)
Písmo Inter je výchozí a odpovídá tomu, jak každý chatbot vypadal před zavedením tohoto nastavení; dokud nevyberete jiné písmo, nic se nemění.
Volba System default nestahuje vůbec nic - widget použije písmo, které už má návštěvník nainstalované v zařízení. Jde o nejrychlejší možnost, která hladce zapadne do webů používajících systémové písmo, ale chat bude vypadat mírně odlišně ve Windows, macOS a Androidu. Ostatních sedm písem pochází z Google Fonts a prohlížeč návštěvníka je stáhne jednou. Každé z nich má záložní písmo (fallback), takže pokud síť návštěvníka blokuje Google Fonts, text zůstane čitelný a rozvržení se nerozpadne.
Soubor písma se načítá do samotného okna chatu. Na vaši vlastní stránku se přidává pouze tehdy, když widget zobrazuje text mimo okno chatu - u spouštěče Icon with text, zmenšené lišty chatu nebo uvítacích bublin. Chatbot s jednoduchou ikonou spouštěče nepřenáší na vaši stránku žádné požadavky navíc.
Velikost widgetu (Widget Size)
Upravte velikost otevřeného chatovacího widgetu na počítačích a mobilních zařízeních. Každý posuvník má tlačítko Default (Výchozí), které obnoví původní rozměry.
- Desktop width (Šířka na počítači) - šířka widgetu v prohlížečích na počítači v pixelech (330-800, výchozí 448)
- Desktop height (Výška na počítači) - výška widgetu v prohlížečích na počítači v pixelech (300-770, výchozí 660)
- Mobile size (Velikost na mobilu) - velikost widgetu na mobilních zařízeních v procentech obrazovky (60-100 %, výchozí 100 %)
Při výchozí hodnotě používá widget responzivní rozměry vestavěné v ChatLabu. Jakákoli jiná hodnota nastaví pevnou velikost.
Na mobilech způsobuje výchozí hodnota (100 %), že otevřený chat zabere celou obrazovku. Zvolením nižšího procenta se widget zmenší na danou část obrazovky a vycentruje se v zobrazení, takže návštěvníci uvidí kolem chatu i původní stránku.
Vedle posuvníků najdete dvě tlačítka Save & Preview (Uložit a zobrazit náhled, zvýrazněná níže) - jedno pro řádky pro počítač a druhé pro mobilní řádek. Kliknutím na tlačítko uložíte neuložené změny a otevřete chat v okně náhledu podle aktuálního nastavení:
- Tlačítko pro počítač otevře běžné okno prohlížeče, abyste viděli přesnou velikost na obrazovce počítače.
- Tlačítko pro mobil otevře kompaktní vyskakovací okno (400 x 700), kde se widget vykreslí v mobilním rozvržení; to se hodí při nastavování posuvníku Mobile size z počítače.
Režim bočního panelu (Drawer Mode)
Drawer mode (Režim bočního panelu) umožňuje návštěvníkovi přepnout chat z plovoucího okna na panel přes celou výšku ukotvený k okraji obrazovky, zatímco vaše stránka zůstává vedle něj viditelná. Hodí se pro konverzace, kterými návštěvník prochází při čtení stránky - dlouhé odpovědi, porovnávání produktů, formuláře nebo cokoliv s velkým množstvím textu.
Po zapnutí se v záhlaví chatu zobrazí tlačítko a návštěvník se sám rozhodne, zda jej použije. Jeho volba se zapamatuje po zbytek relace prohlížení.
- Panel zabírá polovinu šířky okna prohlížeče (maximálně 720 px) a vždy má plnou výšku. Kotví se ke stejné straně jako váš spouštěč, takže widget umístěný vlevo otevře panel na levé straně.
- Volby Desktop width a Desktop height zde neplatí - určují velikost pouze pro běžné plovoucí okno.
- Tlačítko se zobrazuje pouze na počítačových obrazovkách o šířce alespoň 1200 px při ovládání myší. Na telefonech a tabletech se nezobrazuje vůbec, protože tam chat již zabírá celou obrazovku. Zmenší-li návštěvník okno prohlížeče pod tuto šířku, boční panel se složí zpět do normálního okna.
- Spouštěč je při otevřeném bočním panelu skrytý; návštěvník jej zavře ze záhlaví nebo stejným tlačítkem režim bočního panelu opustí.
Režim bočního panelu je ve výchozím stavu vypnutý, takže dokud jej nezapnete, pro návštěvníky se nic nemění.
Další nastavení vzhledu (Other Appearance Settings)
- Widget Shadow (Stín widgetu) - zapne nebo vypne stín kolem kontejneru widgetu chatu
- Open links in (Otevírat odkazy v) - zvolte, zda se odkazy ve zprávách chatu otevírají na nové kartě (new tab) nebo na stejné kartě (same tab)
V záhlaví chatu se na počítači zobrazuje také tlačítko pro zavření (X), díky kterému mohou návštěvníci sbalit chat zpět do spouštěče bez nutnosti obnovovat stránku. Tlačítko pro zavření zůstává skryté, pokud je chat vložen jako iframe nebo v režimu celé obrazovky.
Vlastní zápatí chatu (Custom Chat Footer)
Přidejte vlastní text zobrazený ve spodní části chatovacího widgetu (max. 250 znaků). Pro vkládání odkazů je podporován formát Markdown. Běžně se využívá pro odkaz na zásady ochrany osobních údajů nebo obchodní podmínky.
Příklad v Markdownu:
Zahájením chatu souhlasíte se [Zásadami ochrany osobních údajů](https://www.example.com)
Vlastní CSS (Custom CSS)
Přidejte vlastní CSS styly pro další úpravy vzhledu vašeho chatovacího widgetu (max. 5000 znaků):
Související články
- Jak vytvořit prvního chatbota
- Nastavení konverzace - napište uvítací zprávu a navrhované otázky
- Uvítací obrazovka - rozvržení úvodní obrazovky a její varianty pro návštěvníky
- Vlastní formuláře - sbírejte údaje od návštěvníků přímo v chatu
- Sběr leadů