Preskočiť na obsah
OttoOtto ottoai.sk
SKCZEN
Začíname

Inštalácia chatu

Chat Otta pridáte na web jedným riadkom kódu. Tu je, kam ho vložiť, ako nastaviť jazyk, prihláseného zákazníka, súhlas s cookies a CSP.

Kód chatu

V paneli otvorte Prehľad, kartu Inštalácia a integrácie, kliknite na Vlastný kód a potom na Skopírovať kód. Dostanete jeden riadok s verejným kľúčom vašej firmy:

<script async src="https://ottoai.sk/widget.js" data-otto-key="pk_vas_kluc"></script>
Karta Inštalácia a integrácie v paneli Otta s kódom chatu
Kód chatu v paneli: Prehľad, karta Inštalácia a integrácie, Vlastný kód.

Vložte ho do šablóny webu tesne pred </body>, ideálne do spoločnej pätičky, ktorú majú všetky stránky. Skript sa načíta asynchrónne, vykreslenie stránky nebrzdí.

Verejný kľúč pk_… nie je heslo, netreba ho tajiť. Iba hovorí, komu má Otto odpovedať. Chat navyše odpovedá len na doméne, na ktorej ste ho spustili prvýkrát. Ak ho potrebujete aj na ďalšej doméne, napíšte nám. Tajný je len API kľúč, ten do kódu webu nikdy nedávajte.

Kde ho vložiť

Pre Shoptet, WordPress, Shopify a Upgates je postup v časti Shoptet, WordPress a ďalšie. Na vlastnom webe alebo v inom systéme hľadajte v administrácii miesto pre vlastný kód v pätičke, býva označené Kód v pätičke, Vlastné HTML alebo Footer. Stačí ho vložiť raz, nie na každú stránku zvlášť.

Jazyk chatu

Bez ďalšieho nastavenia chat hovorí jazykom, ktorý máte v paneli. Ak má váš web viac jazykových verzií, dajte každej jej jazyk atribútom data-otto-lang s hodnotou sk, cs alebo en:

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

Prihlásený zákazník

Keď je zákazník na webe prihlásený, môžete chatu povedať, kto to je. Kolega potom pri konverzácii vidí meno a e-mail a Otto sa na ne nemusí pýtať. Buď pridajte atribúty data-otto-name, data-otto-email a data-otto-phone, alebo pred kódom chatu nastavte objekt window.ottoUser:

<script>
  window.ottoUser = { name: "Ján Novák", email: "jan@example.sk", phone: "+421900123456" };
</script>
<script async src="https://ottoai.sk/widget.js" data-otto-key="pk_vas_kluc"></script>
Údaje vkladajte len prihlásenému zákazníkovi a stránku s nimi nedávajte do cache, inak by ich videl ďalší návštevník. Osobné údaje nikdy neposielajte v adrese stránky. Doplnok pre WordPress to rieši sám.

Súhlas s cookies

Otto si v úložisku prehliadača pamätá rozhovor a, pre kolegov v paneli, navštívené stránky a počet návštev. Ak váš web pred takým ukladaním pýta súhlas, pridajte atribút data-otto-suhlas s názvom a hodnotou záznamu, ktorý ukladá vaša lišta súhlasu:

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

Otto potom históriu návštev zbiera len vtedy, keď v localStorage nájde záznam cookies_analytika s hodnotou ano. Bez súhlasu pošle len aktuálnu stránku a jazyk prehliadača. Hodnotu za rovnítkom môžete vynechať, vtedy Otto čaká ano.

Content-Security-Policy

Ak má váš web hlavičku Content-Security-Policy, povoľte doménu Otta pre skripty a spojenia vrátane WebSocketu. Ak obmedzujete aj obrázky, pridajte ottoai.sk, data: a doménu, z ktorej idú obrázky vašich produktov.

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

Štýly si chat vkladá cez CSSOM do vlastného Shadow DOM, style-src meniť netreba a štýly webu chat neovplyvnia.

Overenie

  1. Otvorte svoj web a obnovte stránku. Vpravo dole má naskočiť bublina chatu.
  2. V paneli v Nastaveniach, časť Prepojenia, riadok Váš web ukáže, na akej doméne chat beží.
  3. Na skúšku bez vlastného webu použite v Nastaveniach tlačidlo Vyskúšať ako zákazník.
Chat sa nezobrazuje? Skontrolujte, či kód nie je vložený dvakrát (druhý sa ignoruje), či ho nevymaže optimalizácia skriptov a či ho nevylučuje CSP. V konzole prehliadača hľadajte správy začínajúce [Otto].

Weby s jednou stránkou

V aplikáciách na React, Vue alebo Next.js vložte kód raz do hlavnej šablóny, nie do komponentu, ktorý sa vykresľuje znova. Chat sa spustí raz a pri zmene adresy bez obnovenia stránky beží ďalej.