چطور می‌توانیم کمک کنیم؟

کوتاه بفرمایید موضوع چیست؛ از طریق ایمیل با شما تماس می‌گیریم.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
رفتن به صفحه اصلی

Barvy, písmo a motiv

Barva značky, akcent, vlastní barvy ploch, poloměr rohů, písmo, světlý a tmavý motiv, šablony a vlastní CSS — a jak widget zajišťuje čitelnost všech textů.

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

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:

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.

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:

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:

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.

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

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

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

آخرین به‌روزرسانی: