Tlačítko chatu: tvar, velikost, ikona, popisek a poloha

Tlačítko chatu je tlačítko dole v rohu, kterým návštěvníci otevírají chat. Nastavujete ho pod /app/projects/{id} na kartě Vzhled, v části Značka. Živý náhled Takto vypadá vaše tlačítko chatu zobrazuje každou změnu okamžitě. Uložíte pomocí Uložit a změna se k návštěvníkům dostane do minuty.

Barva tlačítka chatu je vaše primární barva, viz Barvy, písmo a motiv.

Šablony tlačítka chatu

20 hotových kombinací, například „Virtuální asistent – Odpovídá do 2 min“, „Máte otázku?“, „Zákaznická podpora – Po–Pá 8–18“ nebo „Asistent AI – Odpovídá během sekund“. Jedno kliknutí vyplní tvar, ikonu, popisek, druhý řádek, zobrazení a velikost. Vaše barvy zůstávají stejné; nic se neuloží, dokud nestisknete Uložit. Potom upravte texty.

Pole

• Tvar – kruh (výchozí), zaoblené, hranaté, bublina nebo list. U bubliny míří špičatý roh do rohu obrazovky. U listu jsou dva protilehlé rohy malé.
• Velikost (px) – 44 až 72, výchozí 56. 44 je nejmenší plocha, na kterou lze ještě spolehlivě klepnout.
• Velikost na telefonech (px) – 40 až 72. Prázdné znamená: 48 px nebo méně, pokud je velikost výše menší.
• Ikona – bublina (výchozí), otazník, sluchátka s mikrofonem, jiskra nebo bez ikony (jen text). Bez ikony potřebuje tlačítko chatu popisek a zobrazení vždy. Jinak widget zobrazí bublinu.
• Popisek – viditelný text vedle ikony, nejvýše 40 znaků. Prázdné znamená: pouze ikona.
• Druhý řádek – menší druhý řádek pod popiskem, nejvýše 60 znaků. Bez popisku zůstává neviditelný.
• Zobrazení – kdy je popisek viditelný:
• vždy (výchozí),
• jen při najetí myší – pouze ikona; popisek se vysune při najetí myší nebo zaměření klávesnicí. Na dotykových zařízeních zůstává jen ikona.
• jen na velkých obrazovkách – popisek až od šířky 481 px, pod ní pouze ikona,
• Jen přes vlastní odkazy (bez ikony chatu) – tlačítko chatu vůbec není, viz níže.

Popisek podle jazyka

Popisek a druhý řádek z formuláře platí v každém jazyce. Pokud se mají podle jazyka lišit, zadejte je v části Texty a formuláře → Vlastní znění pod klíči launcher.text a launcher.subtext. Tamní záznam má přednost před zdejšími poli. Více v části Texty a jazyky.

Chat zcela bez tlačítka

Při zobrazení Jen přes vlastní odkazy (bez ikony chatu) se tlačítko chatu nezobrazí. Návštěvníci chat otevírají z vašich vlastních odkazů nebo tlačítek:

<a href="#rc-open">Help & support</a>

Umístěte alespoň jeden takový odkaz na každou stránku, kde má být chat dostupný. Poté znovu zkopírujte vkládací kód v části Instalace: nový už nenese barvu značky, takže tlačítko při načítání stránky neprobleskne.

Dokud widget nemůže získat nastavení ze serveru, například bez připojení nebo při první návštěvě před souhlasem s cookies, tlačítko se jako pojistka stále zobrazuje. Pokud se nesmí zobrazit nikdy, přidejte do kódu také:

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

data-rc-hide-launcher platí vždy bez ohledu na nastavení účtu. Bez tlačítka chatu u něj nejsou ani tooltipové bubliny. Všechny způsoby otevírání chatu z vlastních prvků s předvyplněným textem a volbou karty popisuje Otevření chatu z vlastního odkazu nebo tlačítka.

Místo odkazu můžete jako spouštěč použít i existující prvek na stránce. data-rc-launcher-selector přijímá selektor CSS:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        data-rc-launcher-selector="#hilfe-knopf"
        async></script>

Poloha a odstupy

Strana, odstupy a úroveň vrstvy se nastavují ve vkládacím kódu. Účet pro ně nemá pole.

• data-rc-position – right (výchozí) nebo left.
• data-rc-offset – vzdálenost od okraje v pixelech jako JSON, výchozí {"x":20,"y":20}. Widget přidává bezpečné oblasti, například výřez na iPhonu.
• data-rc-z-index – úroveň vrstvy, výchozí 2147483000. Snižte ji, pokud má být vlastní prvek nad chatem.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-position="left"
        data-rc-offset='{"x":24,"y":96}'
        async></script>

Stejná pole fungují také jako position, offset a zIndex přes window.ReactiveChatSettings nebo ReactiveChat('boot', …). Viz Technická integrace.

Vyhýbání lištám

Pokud má stránka pevnou lištu u dolního okraje, například banner cookies, lištu košíku nebo navigační lištu na telefonu, tlačítko chatu se automaticky posune nad ni s odstupem 12 px. Při změně stránky měří znovu. Prvky zabírající více než 40 % výšky okna se považují za překryvnou vrstvu. Těm se nevyhýbá.

Ve vkládacím kódu to můžete vypnout:

data-rc-avoid-overlap="false"

Tlačítko chatu s vlastní ikonou

Zcela vlastní ikona funguje v kódu přes značku: launcher.icon přijímá inline SVG nebo adresu data: a má přednost před vybranou ikonou.

ReactiveChat('setBrand', {
  launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});

Pozor: značka s takovými poli ve vkládacím kódu (data-rc-brand) má na této stránce přednost před nastavením účtu. Viz Barvy, písmo a motiv.

Na telefonech

Při šířce pod 481 px (a na telefonech na šířku do výšky 480 px) platí velikost pro telefony. Se zobrazením jen na velkých obrazovkách tam tlačítko ukazuje pouze ikonu. Když návštěvník otevře chat, okno vyplní celou obrazovku a tlačítko ustoupí.

Pokud tlačítko nevypadá podle očekávání

• Tlačítko není vidět: je zobrazení nastavené na Jen přes vlastní odkazy, nebo je v kódu data-rc-hide-launcher="true"? Není projekt pozastavený?
• Tlačítko se zobrazuje, přestože je nastaveno „Jen přes vlastní odkazy“: widget zatím nezískal nastavení ze serveru (záloha). Přidejte také data-rc-hide-launcher="true".
• Bublina se zobrazuje i bez ikony: bez ikony potřebujete popisek a zobrazení vždy.
• Změny se neprojevují: je v kódu data-rc-brand s popiskem, ikonou nebo jinými dalšími poli? Pak má přednost kód.