Barvy, písmo a motiv

Widget převezme barvu vaší značky, písmo a případně i celou vlastní sadu barev. Přitom přepočítává hodnoty tak, aby každý text zůstal čitelný na každé ploše. Vy vyberete barvu, widget se postará o kontrast.

Všechna nastavení na této stránce najdete pod /app/projects/{id} na kartě Vzhled, v části Značka. Výjimkou je motiv (světlý, tmavý, automatický): ten je na kartě Instalace v části Základní údaje.

Průvodce designem

V horní části Značka vás průvodce provede designem ve čtyřech krocích:

1. Vzhled – 18 hotových šablon, které lze filtrovat podle kategorií Světlé, Tmavé, Profesionální, Hravé, Útulné, Chladné a Minimalistické. Patří mezi ně například Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit a Espresso.
2. Barvy – primární barva a akcent, rychlý výběr z osmi barevných dvojic a volba ploch: výchozí, světlé, tmavé nebo vlastní.
3. Tvar – styl okna, poloměr rohů, tvar a velikost tlačítka chatu.
4. Hotovo – souhrn.

Průvodce sám nic neukládá. Pouze vyplní pole pod sebou; nic se neuloží, dokud nestisknete Uložit. Miniatura v průvodci je náčrt. Skutečný widget s vašimi hodnotami uvidíte v náhledu části Úvodní obrazovka widgetu.

Pro jemné doladění rozbalte Všechna nastavení jednotlivě. Písmo a vlastní CSS jsou dostupné pouze tam.

Pole

• Primární barva – barva vaší značky jako #rrggbb. Obarví tlačítko chatu, tlačítko odeslání, odkazy, zaměření a (smíchaná) bubliny návštěvníků. Bez vlastní hodnoty: fialová #6D28D9 ve světlém motivu, #9B7BFF v tmavém.
• Akcent – druhá barva jako #rrggbb, například pro počítadla a zvýraznění. Bez vlastní hodnoty: #BE185D ve světlém, #FF6B8A v tmavém motivu.
• Poloměr rohů (px) – 0 až 28. 0 znamená hranaté rohy. Výchozí hodnota 12.
• Rodina písma (CSS) – hodnota CSS, například Inter, system-ui, sans-serif, nejvýše 120 znaků. Widget nenačítá žádné soubory písem. Použijte proto písmo, které už načítá vaše stránka, nebo systémové písmo. Prázdné znamená: systémová písma zařízení.
• Šablony – jedno kliknutí vyplní barvy, plochy, poloměr, tlačítko chatu a styl najednou. Nic se neuloží, dokud nestisknete Uložit.

Platné jsou pouze barvy ve tvaru #rrggbb se šesti číslicemi. Zkrácené tvary jako #f00 nebo rgb(…) se zahodí a místo nich platí výchozí hodnota.

Plochy a text

V části Plochy a text můžete podle potřeby nastavit dalších pět barev. Každá má zaškrtávací políčko vlastní barva:

• Pozadí – plocha okna.
• Plocha bublin – bubliny vašeho týmu a asistenta.
• Text – barva textu.
• Vedlejší text – časy, upozornění, druhé řádky.
• Čáry – oddělovací čáry a okraje.

Bez zaškrtnutí widget používá sadu barev odpovídající webu, světlou nebo tmavou. Hodnota v poli je pak pouze výchozí bod, nikoli zobrazení aktuální hodnoty. Se zaškrtnutím platí vaše barva.

Pokud nastavíte pouze vlastní pozadí, widget z něj odvodí zbytek: plochu bublin, text, vedlejší text a čáry.

Čitelnost: co widget přepočítává

Zákazníci vybírají barvu své značky, nikoli čitelnou barvu. Widget proto kontroluje u každé kombinace textu a plochy kontrastní poměr alespoň 4,5:1. To je hranice WCAG 2.x pro běžný text.

• Text na barvě vaší značky (například na tlačítku odeslání) se automaticky nastaví na bílou nebo téměř černou podle toho, co je čitelnější.
• Barva vaší značky jako barva textu (odkazy, zvýraznění) se po malých krocích zesvětluje nebo ztmavuje, dokud nedosáhne 4,5:1. Plochy si vaši barvu ponechávají beze změny, tedy tlačítko chatu a tlačítko odeslání.
• Bublina návštěvníků je směsí barvy značky a pozadí. Pokud kontrast nestačí, widget do ní přimíchá méně barvy značky.
• Vlastní barvy textu a vedlejšího textu procházejí stejnou kontrolou vůči každé ploše, na které se objevují.

Co bylo přepočítáno, se v účtu zobrazuje přímo pod formulářem na řádku Přepočítáno, aby text zůstal čitelný. Světle žlutá jako barva textu proto ve widgetu vypadá tmavší, než jste zadali, a na tomto místě uvidíte proč.

Na své stránce si můžete naměřené hodnoty také sami vyžádat:

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Světlý, tmavý nebo podle webu

V části Instalace → Základní údaje → Motiv widgetu vybíráte:

• podle webu (jinak podle systému návštěvníka) – výchozí volba. Widget zjišťuje, zda je vaše stránka světlá nebo tmavá, a přizpůsobí se.
• světlý – vždy světlý.
• tmavý – vždy tmavý.

Při automatické volbě widget kontroluje postupně:

1. barvu pozadí vaší stránky uprostřed obrazovky,
2. hodnotu CSS color-scheme na <html>, pokud je přesně dark nebo light,
3. běžné přepínače na <html> nebo <body>, například třídu dark nebo data-theme="dark",
4. nakonec systémové nastavení návštěvníka.

Pokud vaše stránka přepíná mezi světlým a tmavým vzhledem, widget ji následuje. Kontroluje to znovu i při otevření okna.

V kódu nastavujete motiv ve vkládacím kódu nebo za běhu. Toto nastavení má přednost před účtem:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

S setTheme si widget volbu pamatuje v prohlížeči návštěvníka. setTheme('auto') ji opět odstraní. To se hodí pro vlastní přepínač světlého/tmavého vzhledu na stránce.

Nastavení barev v kódu

Pro jednotlivé stránky, například kampaň, můžete značku nastavit ve vkládacím kódu nebo za běhu. Názvy polí jsou:

• primary, accent – barva značky a akcent,
• bg, surface, text, textDim, line – pět ploch,
• onPrimary – barva textu na barvě značky (jinak automaticky),
• radius – 0 až 28,
• font – hodnota písma CSS,
• launcher a stil – viz Tlačítko chatu a Okno chatu.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand přepočítá kontrast a odvozené barvy okamžitě, bez nového sestavení widgetu. null opět odstraní hodnotu a použije se výchozí nastavení.

Ve vkládacím kódu se atribut jmenuje data-rc-brand a přijímá JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Důležité — co má přednost, kód, nebo účet? Vkládací kód vygenerovaný vaším účtem už nese barvu značky, poloměr a tvar a velikost tlačítka chatu. To je pouze počáteční stav, aby se tlačítko hned zobrazilo ve správné barvě. Jakmile má widget nastavení ze serveru, platí účet v plném rozsahu.

Pokud ale do data-rc-brand zapíšete jakékoli další pole, například accent, stil nebo popisek, značka v kódu se považuje za vlastní značku této stránky. Pak má přednost před účtem. Z účtu na této stránce nadále platí pouze zobrazení „Jen přes vlastní odkazy“. Stránka se navíc neúčastní žádných A/B testů.

Pokud v účtu změníte barvu značky, zkopírujte poté znovu vkládací kód v části Instalace. Jinak při načítání stránky krátce probleskne stará barva.

Jak samotný kód funguje a jaké další možnosti existují (window.ReactiveChatSettings, ReactiveChat('boot', …)), popisuje Technická integrace.

Vlastní CSS

V části Všechna nastavení jednotlivě → Vlastní CSS píšete CSS, které se použije jako poslední, po všech ostatních pravidlech.

• Nejvýše 20 000 znaků.
• @import se odstraňuje při ukládání i ve widgetu.
• CSS působí pouze uvnitř widgetu. Ten běží v oddělené oblasti (shadow DOM) a nemůže měnit vaši stránku. Naopak CSS vaší stránky nedosáhne do widgetu. Toto je pro něj správné místo.
• Widget poté znovu vynucuje dvě pravidla: viditelný rámeček zaměření pro uživatele klávesnice a zavírací tlačítko v záhlaví. Odstranění cesty z chatu pomocí stylů by uživatele klávesnice uvěznilo.
• Názvy interních tříd widgetu nejsou zaručeným rozhraním. Po změnách zkontrolujte své CSS v náhledu.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

V kódu funguje totéž přes customCss, například v ReactiveChat('boot', { customCss: '…' }) nebo jako atribut data-rc-custom-css.

Logo v záhlaví okna

Nejsnazší je zadat logo v účtu: Projekt → Vzhled → Značka, pole Logo (adresa). Pak se zobrazí v záhlaví okna chatu, nejpozději minutu po uložení.

V kódu můžete přes logo nastavit také výšku, alternativní text a umístění, například logo v tlačítku chatu. Logo nastavené v kódu má přednost před polem v účtu:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

• src – adresa s https:// nebo obrázek jako data:image/…. Malé SVG jako adresa data: ušetří požadavek.
• alt – alternativní text.
• height – výška v pixelech, 12 až 40, výchozí 20.
• placement – header (záhlaví, výchozí), launcher (v tlačítku chatu) nebo both.

Logo na úvodní obrazovce naopak snadno nastavíte v účtu, viz Úvodní obrazovka chatu.

Pokud něco vypadá jinak, než očekáváte

• Barva je tmavší nebo světlejší, než jste zadali: jde o ochranu kontrastu. Řádek Přepočítáno pod formulářem uvádí, co se upravilo.
• Změny v účtu se neprojevují: obsahuje váš kód data-rc-brand s dalšími poli? Pak má přednost kód. Po uložení navíc změna trvá až minutu.
• Při načítání krátce probleskne jiná barva: po změně barvy zkopírujte kód znovu.
• Písmo nemá vliv: načítá vaše stránka toto písmo? Widget žádné soubory písem nenačítá.