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 chatbota 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)
Nastavte, jak má chatovací widget vypadat po minimalizaci (než návštěvník chat otevře):
- Režim zobrazení po minimalizaci (Minimized display mode) - vyberte si z možností:
- Ikona (Icon) - standardní kulatá ikona pro spuštění chatu (výchozí)
- Zmenšený chatovací panel (Minified chat bar) - kompaktní řádek pro zadání textu zobrazený ve spodní části stránky
- Ikona s textem (Icon with text) - širší spouštěcí tlačítko ve tvaru pilulky: ikona a krátký dvouřádkový popisek
- Barva ikony / Barva mini panelu (Icon color / Mini bar color) - barva ikony spouštěče nebo pozadí mini panelu
- Vlastní ikona chatu (Custom chat icon) (pouze pro režim Ikona) - povolte nahrání vlastních ikon pro otevření a zavření chatu
- Pozice na obrazovce (Position on screen) - umístění widgetu na levé nebo pravé straně obrazovky
- Posunout ikonu/panel chatu nahoru o (Move up chat icon/bar by) - svislý posun v pixelech od spodního okraje
- Posunout ikonu/panel doleva/doprava o (Move icon/bar left/right by) - vodorovný posun v pixelech od nejbližšího okraje obrazovky
Ikona s textem (Icon with Text)
Režim Ikona s textem (Icon with text) přidává ke spouštěči krátký text, aby návštěvníci ještě před otevřením chatu věděli, k čemu slouží. Hodí se, když samotná ikona není dostatečně výmluvná - například „Napište nám / Odpovíme hned“ nebo „Potřebujete poradit? / Zeptejte se našeho asistenta“.
Výběrem tohoto režimu se zobrazí čtyři další nastavení:
- Řádek popisku 1 (Label line 1) - první, výraznější řádek popisku (max. 60 znaků)
- Řádek popisku 2 (Label line 2) - druhý, méně výrazný řádek (max. 60 znaků). Pokud chcete mít spouštěč pouze s jedním řádkem, nechte toto pole prázdné
- Barva textu (Text color) - barva popisku. Pokud ji nezměníte, ChatLab automaticky vybere černou nebo bílou podle toho, jak světlou či tmavou barvu spouštěče máte nastavenou
- Zobrazit křížek pro zavření (Show close cross) - přidá ke spouštěči malý křížek, kterým ho návštěvníci mohou skrýt
Pokud se text na řádky nevejde, zkrátí se třemi tečkami, 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 zapnutou vícejazyčnou podporu, přeloží se oba řádky popisku stejně jako ostatní texty určené pro návštěvníky.
Volba Zobrazit křížek pro zavření (Show close cross) je ve výchozím stavu vypnutá a je k dispozici pouze v tomto režimu. Když ji zapnete a návštěvník na křížek klikne, spouštěč se skryje po zbytek jeho návštěvy - zůstane skrytý i při přecházení mezi stránkami a znovu se zobrazí až při další návštěvě nebo v nové záložce. Chatbot nastavený na automatické otevření tuto volbu respektuje a po zavření návštěvníkem se již sám 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ář pro kontaktování podpory) - 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 kontaktování podpory (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)
Nastavte, jak velký se otevřený chatovací widget zobrazuje na počítačích a mobilních zařízeních. U každého posuvníku najdete tlačítko Default (Výchozí), které obnoví výchozí 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í hodnota 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í hodnota 660)
- Mobile size (Velikost na mobilu) - velikost widgetu na mobilních zařízeních v procentech obrazovky (60-100 %, výchozí hodnota 100 %)
Při výchozí hodnotě widget používá vestavěnou responzivní velikost ChatLabu. Jakákoli jiná hodnota nastaví pevnou velikost.
Na mobilu výchozí hodnota (100 %) způsobí, že otevřený chat pokryje celou obrazovku. Pokud zvolíte nižší procento, widget se zmenší na danou část obrazovky a vycentruje se v okně, takže návštěvníci kolem chatu stále uvidí 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 počítače a jedno pro mobilní řádek. Kliknutím na tlačítko se uloží všechny neuložené změny a chat se otevře v okně náhledu s vaším aktuálním nastavením:
- Tlačítko pro počítač otevře běžné okno prohlížeče, abyste viděli přesnou velikost na monitoru počítače.
- Mobilní tlačítko otevře kompaktní vyskakovací okno (400 x 700), takže se widget zobrazí ve svém mobilním rozvržení, což se hodí při ladění posuvníku Mobile size přímo z počítače.
Tlačítko pro maximalizaci (režim Drawer Mode)
Režim Drawer mode (boční panel) 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, přičemž vaše stránka zůstane vedle něj stále viditelná. Hodí se pro konverzace, se kterými návštěvník pracuje při čtení stránky - dlouhé odpovědi, porovnávání produktů, formuláře nebo cokoli s velkým množstvím textu.
Povolte volbu Maximise button v sekci Widget Size a v záhlaví chatu se objeví tlačítko; návštěvník se pak sám rozhodne, zda jej použije. Jeho volba se zapamatuje po zbytek relace procházení.
- Panel má šířku poloviny okna prohlížeče, maximálně 720 px, a je vždy přes celou výšku. Ukotvuje se ke stejné straně jako spouštěcí tlačítko, takže widget umístěný vlevo otevře boční panel vlevo.
- Nastavení Desktop width a Desktop height zde neplatí - ta určují velikost pouze pro běžné plovoucí okno.
- Tlačítko se zobrazuje pouze na obrazovkách počítačů o šířce alespoň 1200 px s myší. Na telefonech a tabletech se nezobrazuje vůbec, protože tam chat obrazovku zaplňuje automaticky. Pokud návštěvník zmenší okno prohlížeče pod tuto šířku, boční panel se složí zpět do běžného okna.
- Spouštěcí tlačítko je po dobu otevření panelu skryté; návštěvník panel zavře v záhlaví, případně ze stejného tlačítka režim bočního panelu opustí.
Režim Drawer mode je ve výchozím stavu vypnutý, takže se pro vaše návštěvníky nic nezmění, dokud jej sami nezapnete.
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, který se zobrazí v dolní části widgetu chatu (max. 250 znaků). Pro vkládání odkazů je podporován Markdown. Běžným využitím je odkaz na vaše zásady ochrany osobních údajů nebo obchodní podmínky.
Příklad formátu markdown:
By chatting you accept our [Privacy Policy](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
Změny se ukládají automaticky. Počkejte na Uloženo (Saved) a poté zkontrolujte Přehled (Overview) i vložený widget na počítači a mobilu. Náhled v nastavení zobrazuje okno chatu; umístění spouštěcího tlačítka a chování automatického otevření na úrovni stránky byste měli zkontrolovat také přímo na svém webovém embedu.
- Jak vytvořit svého prvního chatbota
- Nastavení konverzace - napište uvítací zprávu a navrhované otázky
- Uvítací obrazovka - celoobrazovkové úvodní rozvržení a jeho varianty pro návštěvníky
- Vlastní formuláře - sbírejte údaje o návštěvnících přímo v chatu
- Sběr leadů