Okno chatu: styl, velikost, boční panel a mobilní zobrazení

Barvy určují charakter, tvar doplňuje zbytek. Pod /app/projects/{id} na kartě Vzhled, v části Značka, najdete dvě skupiny přepínačů: Styl (tvar spíše než barva) a Okno (jak se otevřené okno zobrazuje). Pokud nic nevyberete, vše zůstane na výchozím nastavení. Ukládáte tlačítkem Uložit; náhled pod Úvodní obrazovka widgetu zobrazuje skutečný widget.

Šablony průvodce designem nastavují tyto přepínače současně.

Styl

• Záhlaví – přechod (výchozí), ploché nebo sklo. Platí pro záhlaví úvodní obrazovky a titulní pruh.
• Hustota – normální (výchozí), kompaktní nebo vzdušná. Odstupy na úvodní obrazovce a v konverzaci.
• Bubliny – měkký (výchozí, podle vašeho poloměru rohů), kulatý (18 px) nebo hranatý (4 px).
• Stín – měkký (výchozí), ostrý nebo žádný. Platí pro okno, ne pro tlačítko chatu.
• Avatar – kulatý (výchozí) nebo hranatý.
• Vstupní pole – ploché (výchozí) nebo pilulka (výrazně zaoblené, s kulatými tlačítky).
• Karty – s rámečkem (výchozí) nebo ploché. Platí pro dlaždice úvodní obrazovky, řádky nápovědy a karty v konverzaci.

Okno

• Velikost okna – normální (výchozí, šířka 380 px), široké (440 px), úzké (340 px) nebo vysoké (téměř celá výška obrazovky, nejvýše 960 px). Běžná výška je 620 px, na malých obrazovkách méně.
• Rozložení – plovoucí okno (výchozí) nebo boční panel. Boční panel je v plné výšce u okraje na straně tlačítka chatu a vysouvá se odtamtud. Tlačítko chatu při otevřeném panelu ustoupí. Zavřete ho tlačítkem v záhlaví.
• Pozadí – podklad oblasti zpráv: jednoduché (výchozí), tečky, mřížka nebo přechod (nádech barvy vaší značky).
• Velikost písma – normální (výchozí, 14 px), velká (15,5 px) nebo malá (13 px). Platí pro bubliny a vstupní pole, ne pro tlačítko chatu.
• Animace otevření – vysunutí (výchozí), přiblížení, prolnutí nebo žádná. Pokud má návštěvník v systému zapnuté omezení pohybu, animace se vynechá tak jako tak.
• Bublina návštěvníka – barva bublin vašich návštěvníků: primární barva (výchozí, světlá směs barvy značky), barva akcentu nebo neutrální (šedá). I zde widget přepočítává text, dokud není čitelný.

Velikost okna a rozložení se projeví až od šířky obrazovky 481 px. Pod ní se chat vždy otevírá na celou obrazovku (viz níže).

V kódu

Všechny přepínače jsou ve značce pod stil. Hodnoty jsou interní názvy:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Neznámá hodnota se vrátí k výchozímu nastavení.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

Ve vkládacím kódu jako data-rc-brand='{"stil":{"ansicht":"seite"}}' se značka považuje za vlastní značku této stránky a má přednost před účtem, viz Barvy, písmo a motiv.

Pohyb

Pomocí data-rc-motion ve vkládacím kódu řídíte animace: auto (výchozí, podle systémového nastavení návštěvníka), reduced (bez pohybu) nebo full.

data-rc-motion="reduced"

Záhlaví

Záhlaví ukazuje, kdo odpovídá:

• Pokud píše někdo z týmu, zobrazuje jeho zobrazované jméno. Každý člen týmu ho spravuje v osobním nastavení, viz Tým, konzole a oznámení.
• Pokud odpovídá asistent AI, zobrazuje jeho jméno z AI a znalosti → Asistent (výchozí „Ada“), viz Asistent AI.
• Jinak název „Chat“. Ten a druhý řádek („Jsme tu pro vás“, „Asistent AI“) měníte v části Texty a jazyky klíči header.title, header.subtitle_online a header.subtitle_bot.

Avatary zobrazují první písmeno jména a u asistenta znak ✦. Vlastní fotografie členů týmu zatím ukládat nelze.

V záhlaví je také ikona obálky, přes kterou si návštěvníci mohou nechat poslat přepis konverzace e-mailem. Vypínáte ji pod Pravidla a servis → Přepis konverzace e-mailem, viz Dostupnost, formuláře a servis.

Upozornění „Powered by reactive.chat“

V bezplatném tarifu se dole v okně zobrazuje upozornění „Powered by reactive.chat“. Od placeného tarifu rozhodujete sami pod Vzhled → reactive.chat uvnitř chatu přepínačem Skrýt „Powered by reactive.chat“. Výchozí stav je pak: skryto. Znění upozornění nelze měnit.

Na telefonech

Do šířky 480 px a na zařízeních na šířku do výšky 480 px se chat otevírá na celou obrazovku: bez rohů, v celé viditelné výšce, i když se otevře klávesnice na obrazovce. Vstupní pole používá text 16 px, aby telefon nepřibližoval zobrazení, a tlačítka mají velikost alespoň 44 px. Tlačítko chatu při otevřeném chatu ustoupí.

Velikost okna a boční panel na telefonech neplatí. Ostatní přepínače stylu, barvy a velikost textu ano. Velikost tlačítka chatu na telefonech nastavujete v části Tlačítko chatu.