Chatbot na WordPress: jak ho přidat krok za krokem

Kdo hledá chatbota pro WordPress, většinou začne v katalogu pluginů. Není to potřeba. Chatbot na WordPress se dá přidat bez programování: AI chatbot LiveBot se na web dostane jedním řádkem kódu a ten funguje s jakoukoli šablonou, s Elementorem, Gutenbergem i s WooCommerce. Žádný další plugin, který by se musel aktualizovat spolu s WordPressem, žádný zásah do databáze:

<script src="https://www.livebot.cz/widget.js" data-klic="VAS-KLIC" async></script>

Chat na WordPress web vložíte třemi cestami. Důležitější je vědět, co dělat, když se po vložení neukáže.

Než začnete

Kód najdete v portálu LiveBot v sekci Widget / instalace, už s vaším klíčem. Zkopírujte ho celý.

Na stejné stránce vyplňte povolené domény. Stačí vasefirma.cz, platí to i pro www a další poddomény. Na cizím webu se pak widget nenačte, ani kdyby si někdo váš kód zkopíroval.

Pokud jste to ještě neudělali, potvrďte v sekci Ověření, že vám doména patří. Bez toho se chat na webu ukáže, ale bot neodpoví.

Kód patří na všechny stránky webu. Když chat někde nechcete, třeba v pokladně, nevkládejte kód jen na vybrané stránky. V portálu v sekci Chatbot je pole Stránky, kde se chat nemá ukazovat: zadáte cestu tak, jak ji vidíte v adresním řádku, třeba /pokladna/*, a hvězdička zastoupí zbytek adresy. Vedle je zkoušečka, která ukáže, jestli pravidlo sedne.

Cesta 1: plugin na vkládání kódu

Pro většinu webů nejjednodušší. Pluginy jako WPCode (dříve Insert Headers and Footers) nebo Head & Footer Code dělají jedinou věc: přidají do administrace pole pro vlastní kód v hlavičce a patičce webu. Nic nezobrazují a nic se v nich nenastavuje.

1. V administraci otevřete Pluginy → Instalace pluginů, plugin vyhledejte, nainstalujte a aktivujte.
2. Otevřete jeho stránku s kódem. U WPCode je to Code Snippets → Header & Footer.
3. Řádek vložte do pole Footer (patička), ne do Header.
4. Uložte.

Patička znamená konec stránky, těsně před uzavírací značku </body>. Tam kód doporučuje i portál.

Cesta 2: Elementor Pro → Vlastní kód

Stavíte-li web v Elementoru Pro, další plugin nepotřebujete. Elementor má vlastní správu kódu:

1. V administraci otevřete Elementor → Vlastní kód (anglicky Custom Code) a přidejte nový.
2. Pojmenujte ho, třeba „LiveBot chat“, a vložte řádek s kódem.
3. Jako umístění (Location) zvolte </body> – End.
4. Klikněte na Publikovat a v podmínkách zobrazení zvolte celý web (Entire Site).

Bezplatný Elementor tuhle funkci nemá. Widget HTML na jedné stránce ji nenahradí, chat by běžel jen tam.

Cesta 3: Google Tag Manager

Máte-li na webu Tag Manager, třeba přes plugin Site Kit nebo GTM4WP, nemusíte do WordPressu sahat vůbec:

1. Vytvořte novou značku typu Vlastní HTML a vložte do ní řádek s kódem.
2. Jako spouštěč vyberte All Pages.
3. Uložte a publikujte kontejner.

Podrobněji, včetně vazby na souhlas s cookies, to popisuje článek Jak dostat chat na web: Shoptet, WordPress a Tag Manager.

Proč ne rovnou do footer.php

Spousta návodů radí otevřít editor souborů šablony a vložit kód do footer.php. Funguje to do první aktualizace šablony. Ta soubor přepíše a chat zmizí, aniž by vás na to cokoli upozornilo.

Do souborů šablony sahejte jen v podřízené šabloně (child theme), kterou aktualizace nepřepisuje. Blokové šablony, například Twenty Twenty-Four, soubor footer.php vůbec nemají. Ve všech ostatních případech je jednodušší cesta 1.

Cache a optimalizace: nejčastější důvod, proč chat není vidět

Většina WordPressů běží s cachovacím nebo optimalizačním pluginem: WP Rocket, LiteSpeed Cache, Autoptimize, často navíc s cache u hostingu nebo v Cloudflaru. Chatu se týkají dvě věci.

Stará stránka v cache. Vložíte kód, otevřete web a nic. Návštěvníkům se posílá stránka uložená ještě před vložením kódu. Promažte cache v pluginu, u hostingu i v Cloudflaru, pokud ho používáte.

Zrádné je, že přihlášenému administrátorovi posílají cachovací pluginy obvykle čerstvou stránku. Vy chat vidíte, návštěvníci ne.

Slučování a odkládání JavaScriptu. Optimalizace umí skripty spojit do jednoho souboru, odložit je, nebo je spustit až po prvním pohybu myši či posunutí stránky. Chat pak naskočí pozdě, nebo vůbec. Řešení je dát widget.js do výjimek:

• WP Rocket: Optimalizace souborů (File Optimization), výjimky u voleb Load JavaScript deferred a Delay JavaScript execution.
• LiteSpeed Cache: Page Optimization → Tuning, pole JS Excludes a JS Deferred/Delayed Excludes.
• Autoptimize: záložka JS, CSS & HTML, pole Exclude scripts from Autoptimize.

O rychlost webu se kvůli výjimce bát nemusíte. Skript se načítá s atributem async, takže stránka na něj nečeká, a samotné okno chatu se stáhne až ve chvíli, kdy ho návštěvník otevře.

Cookie lišta: Complianz, CookieYes a další

Chat do prohlížeče návštěvníka neukládá žádné cookies. Používá jen úložiště prohlížeče, a to takhle:

• Skript na vašem webu si do sessionStorage, které se maže zavřením karty, zapíše drobnou značku jen ve třech případech: když se okno chatu samo otevřelo, když návštěvník zavřel pobídku u bubliny a když v návštěvě začala konverzace, aby na další stránce pokračovala.
• Okno chatu běží v rámu na doméně livebot.cz a do jejího localStorage si ukládá rozjetou konverzaci (platí osm hodin) a volbu zvuku.
• Měření návštěv pro statistiky v portálu je bez cookies. Identifikátor návštěvy žije jen v paměti otevřené stránky.

V nastavení cookie lišty proto chat zařaďte mezi nutné nebo funkční prvky. Jde o technické uložení, bez kterého by se konverzace při přechodu na další stránku ztratila, ne o měření ani reklamu.

Některé lišty umí skripty třetích stran blokovat automaticky, dokud návštěvník nedá souhlas. Zkontrolujte, že mezi blokovanými není widget.js. Jinak se chat ukáže jen těm, kdo souhlasili.

Události chatu, třeba otevření okna, posílá widget do dataLayer. Jestli z nich vznikne záznam v Analytics, rozhoduje vaše nastavení Tag Manageru a souhlasu.

WooCommerce chatbot

WooCommerce je pořád WordPress, kód se vkládá stejně. Rozdíl je v tom, co má bot umět.

Doprava, platby, vrácení, reklamace. To bot zvládne z obsahu webu, který si načte do znalostní báze. Nastavte typ webu na e-shop: načtení pak přeskočí jednotlivé produkty a vezme hlavně obchodní podmínky, dopravu a reklamace.

Produkty. Sortiment se bot naučí z produktového XML feedu ve formátu Heureky, Zboží.cz nebo Google Nákupů. Pro WooCommerce ho vyrobí plugin na produktové feedy. Adresu feedu vložíte do znalostní báze a feed se obnovuje automaticky jednou denně v noci, kdykoli jindy tlačítkem Načíst teď. Feed je v tarifu Pro (1 000 položek) a Enterprise, ve zkušebním provozu si ho vyzkoušíte na 50 položkách.

Stav objednávky. Tarif Pro má Napojení na systémy s hotovou šablonou pro WooCommerce. Bot se pak umí podívat na stav objednávky podle jejího čísla a e-mailu zákazníka nebo dohledat zboží. Stačí klíč k REST API z administrace e-shopu.

Kde chat schovat. WooCommerce mívá v české instalaci adresy /kosik a /pokladna, v anglické /cart a /checkout. Ověřte si je v adresním řádku. Pravidlo /pokladna/* skryje chat v pokladně i na potvrzení objednávky, které WooCommerce zobrazuje pod adresou pokladny. Košík zvažte: tam se lidé často ptají na dopravu a platbu.

Jak ověřit, že chat běží

1. Otevřete web v anonymním okně. Uvidíte ho jako nový návštěvník, bez přihlášení do WordPressu.
2. Bublina se má objevit v rohu do pár vteřin. Zkuste i podstránku a stránku, na které má být chat skrytý.
3. Otevřete web na mobilu, ideálně přes mobilní data. Některé cachovací pluginy drží mobilní verzi stránek zvlášť.
4. Položte testovací otázku, na kterou je odpověď na vašem webu, třeba na cenu dopravy. Konverzaci pak uvidíte v Obsluze chatu.

Časté potíže

Chat se neukazuje. Nejdřív promažte cache. Pak otevřete v prohlížeči nástroje pro vývojáře (klávesa F12) a záložku Console. Widget tam píše hlášky začínající [LiveBot]:

• Widget na této doméně není povolený znamená, že doména webu chybí v povolených doménách v portálu.
• Chybí atribut data-klic znamená, že optimalizace nebo editor z kódu kus ořízly. Vložte ho znovu celý.

Když v konzoli žádná hláška není, skript se nejspíš vůbec nenačetl. Blokuje ho blokovač reklam, cookie lišta, nebo bezpečnostní plugin s pravidly Content-Security-Policy. Ta musí povolit doménu www.livebot.cz pro skripty, rámy i spojení. A pokud jste si chat na některé stránce skryli, neuvidíte ho tam ani vy.

Chat se ukazuje dvakrát. Kód LiveBotu vložený dvakrát, třeba pluginem i přes Tag Manager, druhou bublinu nevykreslí. Statistiky návštěv se ale mohou započítat dvakrát, nechte proto kód jen na jednom místě. Dvě různé bubliny znamenají, že na webu zůstal starý chat jiné služby. Vypněte jeho plugin nebo smažte jeho kód.

Chat se ukáže, ale bot neodpovídá. Nejčastěji jde o neověřenou doménu. Dokud v sekci Ověření nepotvrdíte, že vám web patří, chat návštěvníkovi napíše, že ještě není spuštěný. Ověřit jde e-mailem na adresu ve vaší doméně, souborem /.well-known/livebot-overeni.txt nebo TXT záznamem v DNS. Na WordPressu je nejsnazší e-mail. Soubor se nahrává přes FTP nebo správce souborů u hostingu, knihovna médií ho uloží jinam. Druhý možný důvod je skončený zkušební provoz, pak bot návštěvníkům nabízí zanechat vzkaz.

Časté otázky

Potřebuju na WordPress speciální chatbot plugin? Ne. Chat je jeden řádek kódu. Plugin na vkládání kódu jen usnadní jeho vložení, sám nic nezobrazuje.

Zpomalí chat můj web? Skript se načítá asynchronně a okno chatu se stáhne až po otevření. Stránka se načítá stejně rychle jako předtím.

Funguje chat s Divi, Astrou nebo Gutenbergem? Ano, s jakoukoli šablonou i page builderem. Kód se vkládá do patičky webu, ne do obsahu stránek.

Jde chat vypnout jen na některých stránkách? Ano, v portálu v sekci Chatbot zadáte cesty, kde se nemá ukazovat. Kód na webu zůstává stejný.

---

Vložení kódu zabere pár minut. Vyzkoušejte 14 dní zdarma, bez platební karty. A jestli teprve vybíráte, co od chatbota čekat, pomůže průvodce chatbot na web.