Otevření chatu vlastním odkazem nebo tlačítkem

Kromě chatové bubliny v rohu mohou návštěvníci otevřít chat také odkazem nebo tlačítkem na vašem webu – například „Nápověda a podpora“ v postranním panelu nebo „Dotaz k mému tarifu“ na stránce s ceníkem. Okno chatu se pak otevře přímo vedle tohoto prvku.

Žádný další kód není potřeba: stačí běžný vkládací kód z části Vložení widgetu. Příklad ke zkopírování najdete také v účtu v části Projekt → Vložení → Otevřít chat vlastním odkazem.

Nejjednodušší případ

Odkaz směřující na #rc-open:

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

Nebo tlačítko s atributem data-rc-open:

<button type="button" data-rc-open>Open chat</button>

data-rc-open funguje na jakémkoli prvku, nejen na tlačítkách. Kromě #rc-open widget přijímá jako cíl odkazu také #reactive-chat.

Kliknutí se započítá, i když se widget ještě nenačetl: okno se otevře, jakmile bude připravený.

Kde se okno zobrazí

• Vpravo od prvku, pokud je dost místa, jinak vlevo. Horní okraj okna se zarovná s prvkem.
• Vždy celé viditelné: okno zůstává uvnitř viditelné oblasti a sleduje prvek při posouvání stránky nebo změně velikosti okna prohlížeče.
• Na úzkých obrazovkách (šířka menší než 480 pixelů, tedy většina chytrých telefonů) se chat jako obvykle otevře přes celou obrazovku. Vedle prvku tam není místo.
• Jako boční panel: pokud je okno chatu v části Vzhled nastaveno jako boční panel přes celou výšku, otevře se tam, nikoli vedle prvku.
• Pokud už je chat otevřený, okno se přesune k odkazu, na který se kliklo naposledy.
• Při zavření chatu (i klávesou Escape) se fokus klávesnice vrátí na odkaz nebo tlačítko, které ho otevřelo.

Chcete-li otevřít okno v jeho obvyklé poloze v rohu, použijte data-rc-open="corner". Totéž provede data-rc-anchor="none":

<button type="button" data-rc-open="corner">Open chat</button>

Předvyplnění pole zprávy

Pomocí data-rc-message bude při otevření chatu v poli zprávy už připravená věta. Neodešle se – návštěvník ji může doplnit, změnit nebo smazat a sám ji odešle.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

Použije se až 200 znaků. Chat se přitom přepne na kartu konverzace.

Výběr karty

Pokud má váš chat několik karet, data-rc-tab určuje, která bude při otevření v popředí:

• msg – konverzace,
• home – úvodní obrazovka,
• help – články nápovědy.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

Pokud váš chat uvedenou kartu nemá (například help bez článků nápovědy), jednoduše se otevře jako obvykle.

Otevření z vlastního JavaScriptu

Stejné možnosti jsou dostupné i při volání. anchor je prvek, vedle kterého se má okno zobrazit; message a tab jsou volitelné:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Bez anchor se okno otevře ve své obvyklé poloze. ReactiveChat('open') bez voleb se chová jako dosud. Pokud prvek sám obsahuje data-rc-message nebo data-rc-tab, platí i pro toto volání; hodnoty výslovně předané ve volání mají přednost.

Pokud se váš kód může spustit před načtením vkládacího kódu, přidejte před něj tento řádek. Volání se pak zařadí do fronty a provedou, jakmile je widget připravený:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Zcela bez chatové bubliny

Pokud má být chat dostupný pouze přes vaše vlastní odkazy – například „Nápověda a podpora“ v postranním panelu –, existují dvě možnosti.

V účtu: v části Projekt → Vzhled → Značka nastavte Zobrazení na Jen přes vlastní odkazy (bez ikony chatu) a uložte. Nastavení se projeví bez změny vašeho webu. Přesto poté znovu zkopírujte vkládací kód v části Projekt → Instalace: nový kód už neobsahuje barvu vaší značky, takže ikona chatu při načítání stránky krátce neblikne. Dokud widget nemůže získat vaše nastavení ze serveru – například bez připojení nebo při první návštěvě před přijetím cookies –, ikona se stále zobrazuje jako pojistka, aby chat zůstal dostupný.

Ve vkládacím kódu: pokud se ikona nesmí nikdy zobrazit, skryjte chatovou bublinu atributem data-rc-hide-launcher="true" ve vkládacím kódu. Tento atribut platí vždy bez ohledu na nastavení v účtu:

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

Pak zajistěte, aby každá stránka, ze které mají mít návštěvníci přístup k chatu, obsahovala alespoň jeden takový odkaz.

Řešení problémů

• Kliknutí pouze přidá #rc-open do adresy: widget není na této stránce vložený nebo se nenačetl (například bez souhlasu). Ověřte, zda je vkládací kód na stránce.
• Okno se otevře v rohu místo vedle odkazu: obsahuje prvek data-rc-open="corner" nebo data-rc-anchor="none"? Je okno prohlížeče užší než 480 pixelů? Je okno chatu nastavené jako boční panel?
• Text se nezobrazí v poli zprávy: atribut se jmenuje data-rc-message a musí být přímo na prvku, na který se kliklo.

Ostatní nastavení kódu popisuje Vložení widgetu. Zobrazení karty s vlastní nabídkou uvnitř chatu vysvětluje Reklamní karta v chatu.

Další informace v dokumentaci

Podrobně: Reference značky script a JavaScript API. Všechny kapitoly najdete v dokumentaci.