Začínáme

Instalace chatu

Chat Otta přidáte na web jedním řádkem kódu. Tady je, kam ho vložit a jak nastavit jazyk, přihlášeného zákazníka, souhlas s cookies a CSP.

Kód chatu

V panelu otevřete Přehled, kartu Instalace a integrace, klikněte na Vlastní kód a potom na Zkopírovat kód. Dostanete jeden řádek s veřejným klíčem vaší firmy:

<script async src="https://ottoai.sk/widget.js" data-otto-key="pk_vas_kluc"></script>

Karta Instalace a integrace v panelu Otta s kódem chatu — Kód chatu v panelu: Přehled, karta Instalace a integrace, Vlastní kód.

Vložte ho do šablony webu těsně před </body>, ideálně do společné patičky, kterou mají všechny stránky. Skript se načítá asynchronně, vykreslení stránky nebrzdí.

Veřejný klíč pk_… není heslo, netřeba ho tajit. Jen říká, komu má Otto odpovídat. Chat navíc odpovídá jen na doméně, na které jste ho spustili poprvé. Pokud ho potřebujete i na další doméně, napište nám. Tajný je jen API klíč, ten do kódu webu nikdy nedávejte.

Kam ho vložit

Pro Shoptet, WordPress, Shopify a Upgates je postup v části Shoptet, WordPress a další. Na vlastním webu nebo v jiném systému hledejte v administraci místo pro vlastní kód v patičce, bývá označené Kód v patičce, Vlastní HTML nebo Footer. Stačí ho vložit jednou, ne na každou stránku zvlášť.

Jazyk chatu

Bez dalšího nastavení chat mluví jazykem, který máte v panelu. Pokud má váš web více jazykových verzí, dejte každé její jazyk atributem data-otto-lang s hodnotou sk, cs nebo en:

<script async src="https://ottoai.sk/widget.js" data-otto-key="pk_vas_kluc" data-otto-lang="cs"></script>

Přihlášený zákazník

Když je zákazník na webu přihlášený, můžete chatu říct, kdo to je. Kolega pak u konverzace vidí jméno a e-mail a Otto se na ně nemusí ptát. Buď přidejte atributy data-otto-name, data-otto-email a data-otto-phone, nebo před kódem chatu nastavte objekt window.ottoUser:

<script>
  window.ottoUser = { name: "Jan Novák", email: "jan@example.cz", phone: "+420601123456" };
</script>
<script async src="https://ottoai.sk/widget.js" data-otto-key="pk_vas_kluc"></script>

Údaje vkládejte jen přihlášenému zákazníkovi a stránku s nimi nedávejte do cache, jinak by je viděl další návštěvník. Osobní údaje nikdy neposílejte v adrese stránky. Doplněk pro WordPress to řeší sám.

Souhlas s cookies

Otto si v úložišti prohlížeče pamatuje rozhovor a pro kolegy v panelu navštívené stránky a počet návštěv. Pokud se váš web před takovým ukládáním ptá na souhlas, přidejte atribut data-otto-suhlas s názvem a hodnotou záznamu, který ukládá vaše lišta souhlasu:

<script async src="https://ottoai.sk/widget.js" data-otto-key="pk_vas_kluc" data-otto-suhlas="cookies_analytika=ano"></script>

Otto pak historii návštěv sbírá jen tehdy, když v localStorage najde záznam cookies_analytika s hodnotou ano. Bez souhlasu pošle jen aktuální stránku a jazyk prohlížeče. Hodnotu za rovnítkem můžete vynechat, pak Otto čeká ano.

Content-Security-Policy

Pokud má váš web hlavičku Content-Security-Policy, povolte doménu Otta pro skripty a spojení včetně WebSocketu. Pokud omezujete i obrázky, přidejte ottoai.sk, data: a doménu, ze které jdou obrázky vašich produktů.

Content-Security-Policy

script-src  'self' https://ottoai.sk;
connect-src 'self' https://ottoai.sk wss://ottoai.sk;
img-src     'self' data: https://ottoai.sk https://obrazky.vas-obchod.cz;

Styly si chat vkládá přes CSSOM do vlastního Shadow DOM, style-src měnit netřeba a styly webu chat neovlivní.

Ověření

Otevřete svůj web a obnovte stránku. Vpravo dole má naskočit bublina chatu.
V panelu v Nastavení, část Propojení, řádek Váš web ukáže, na jaké doméně chat běží.
Na zkoušku bez vlastního webu použijte v Nastavení tlačítko Vyzkoušet jako zákazník.

Chat se nezobrazuje? Zkontrolujte, zda kód není vložený dvakrát (druhý se ignoruje), zda ho nevymaže optimalizace skriptů a zda ho nevylučuje CSP. V konzoli prohlížeče hledejte zprávy začínající [Otto].

Weby s jednou stránkou

V aplikacích na React, Vue nebo Next.js vložte kód jednou do hlavní šablony, ne do komponenty, která se vykresluje znovu. Chat se spustí jednou a při změně adresy bez obnovení stránky běží dál.