Jak vložit chatbot na web

Co budete potřebovat

• Přístup do administrace webu, kde jde upravit šablonu nebo vložit vlastní kód. Když ho nemáte, stačí kontakt na správce webu.
• Účet u chatbota. U Parťáka na web je to tarif Start za 0 Kč, bez platební karty. Instalační kód dostanete po založení účtu.
• Seznam adres, na kterých web běží: verze s www i bez www a případná testovací adresa. Chatbot se zobrazí jen na povolených doménách.
• Podklady, ze kterých bude odpovídat. Web si Parťák přečte sám. Navíc mu můžete nahrát dokumenty, třeba ceník nebo obchodní podmínky, napsat vlastní texty a u e-shopu připojit produktový feed. Co v podkladech chybí, si nedomýšlí. Jak podklady připravit, rozebírá chatbot z vlastních dokumentů.

Postup níže popisuje Parťáka na web. Obecný princip ale platí pro většinu chatbotů na webové stránky: jeden skript, který se načítá na všech stránkách, a seznam domén, na kterých smí běžet.

Postup ve čtyřech krocích

V administraci Parťáka je instalace na stránce Kód a má stejné čtyři kroky jako tento návod. Každý krok se po dokončení sám označí.

1. Povolte svůj web

Do pole zadejte domény, na kterých se chatbot může zobrazit, každou na samostatný řádek. Typicky vasefirma.cz a www.vasefirma.cz. Máte-li e-shop i na testovací adrese, přidejte i tu. Bez uložené domény se widget na webu nenačte, i když je kód vložený správně.

2. Vložte kód na web

Tlačítkem Kopírovat instalační kód si zkopírujete jeden řádek a vložíte ho do šablony webu. Pod kódem vyberete, na čem web běží, a administrace vám ukáže postup přesně pro váš systém i nejčastější zádrhel. U adres typu *.myshoptet.com, *.wordpress.com, *.wixsite.com nebo *.webnode.cz platformu rovnou odhadne. Postupy pro jednotlivé systémy najdete níže.

3. Zkontrolujte instalaci

Otevřete publikovaný web a v administraci klikněte na Zkontrolovat instalaci. Parťák váš web sám načte v prohlížeči a ověří, že se na něm widget spustil. Při prvním nastavení účtu to ani mačkat nemusíte: jakmile se kód na webu objeví, Parťák to pozná sám a krok se posune.

4. Spusťte chatbota

Dokud chatbota nespustíte, na webu ho vidíte jen vy. V neveřejném náhledu si projdete odpovědi na otázky, které dostáváte nejčastěji, a teprve potom kliknete na Spustit na webu. Od té chvíle odpovídá návštěvníkům.

Jak instalační kód vypadá

Je to jeden řádek, žádná knihovna navíc:

<script async src="https://app.partaknaweb.cz/widget.js"
        data-agent-id="vas-identifikator"></script>

Nekopírujte ho odsud. Váš vlastní, s vyplněným identifikátorem, je v administraci. Tady je jen proto, abyste věděli, co hledáte. Atribut async zajišťuje, že skript nebrzdí vykreslení stránky.

Parťáka návštěvník otevře i stiskem klávesy /. Má-li váš web vlastní editor nebo vyhledávání, zaškrtněte v administraci Vypnout klávesovou zkratku /. Kód pak dostane atribut data-partak-shortcuts="off" a zkratka nebude návštěvníkům brát psaní.

Kam vložit kód chatbota: Shoptet, WordPress, Webnode, Wix

Shoptet

Na Shoptet se chatbot vkládá bez doplňku z obchodu s rozšířeními:

1. V administraci Shoptetu otevřete Vzhled a obsah → Editor → HTML kód.
2. Vložte zkopírovaný kód do zápatí. Do zápatí patří proto, aby se načítal až po obsahu stránky a nezdržoval její zobrazení.
3. Uložte a načtěte e-shop s vypnutou mezipamětí.

Nejčastější zádrhel: máte testovací i ostrou adresu? Povolte v kroku 1 obě. Chybějící doména je nejčastější důvod, proč se widget na e-shopu neukáže. Vypadá to jako chyba vložení, ale kód je v pořádku. Co chatbot pozná z katalogu produktů a co připravit předem, rozebírá AI chatbot pro Shoptet.

WordPress a WooCommerce

Na WordPress se kód vkládá do hlavičky. Vyberte jednu ze tří cest:

1. Nejjednodušší: v nastavení šablony najděte pole pro vlastní kód v hlavičce a vložte kód tam. Přežije to aktualizaci šablony.
2. Když šablona vlastní kód neumožňuje: použijte lehký doplněk určený k vkládání skriptů do hlavičky.
3. Technicky nejčistší: připojte skript na háček wp_head v souboru functions.php potomkovské šablony. Soubory rodičovské šablony nikdy neupravujte, aktualizace je přepíše.

Po vložení vyprázdněte mezipaměť webu i sítě a ověřte to v anonymním okně. Nejčastější zádrhel: doplňky pro zrychlení webu skripty slučují do jednoho souboru nebo je odkládají až po interakci. Skript chatbota z toho zpracování vyjměte, obvykle jde přidat na seznam výjimek. Ukázku kódu pro functions.php a další podrobnosti najdete v návodu jak vložit chatbot do WordPressu. Pro WooCommerce platí stejný postup.

Stavitel stránek, třeba Elementor, na vložení nic nemění. Kód vložte stejně jako u šablony, do hlavičky celého webu, ne do bloku na jedné stránce. Jinak se chatbot ukáže jen na ní.

Web na WordPress.com (adresa končí .wordpress.com nebo web hostuje přímo WordPress.com) dovolí doplňky a vlastní kód jen na některých placených tarifech. Když v nastavení pole pro kód ani instalaci doplňků nevidíte, je to obvykle tímhle.

Webnode

1. V nastavení webu najděte sekci pro vlastní HTML kód nebo skripty. Bývá u nastavení webu jako celku, ne u jednotlivé stránky.
2. Vložte kód do části, která se vkládá do zápatí nebo před konec stránky.
3. Uložte a web publikujte. Bez publikování se změna na veřejné adrese neprojeví.

Nejčastější zádrhel: vlastní kód bývá součástí placených tarifů Webnode. Když pole pro skript nikde nevidíte, je to obvykle tímhle, ne tím, že by ho Webnode neuměl. Přesné názvy položek v menu Webnode tu záměrně neuvádíme: neověřili jsme jejich aktuální znění a špatná cesta v menu stojí víc času než popis toho, co hledat.

Wix

1. V nastavení webu najděte správu vlastního kódu. Bývá pod nastavením webu, ne v editoru stránky.
2. Přidejte nový kód, vložte zkopírovaný skript a nastavte ho na všechny stránky.
3. Umístění zvolte do části body, tedy na konec stránky, ne do hlavičky.
4. Uložte a web publikujte.

Nejčastější zádrhel: Wix vlastní kód spouští až na publikované verzi webu. V editoru ani v náhledu se chatbot neobjeví, i když je vložený správně. Kontrolujte to na veřejné adrese.

Vlastní web nebo jiný systém

1. Vložte kód do šablony těsně před uzavírací značku </body>, aby byl na všech stránkách. Patří tam, kam se vkládá i měřicí kód, třeba Google Analytics.
2. Nasaďte změnu a načtěte web s vypnutou mezipamětí.

Nejčastější zádrhel: má-li web nastavenou zásadu zabezpečení obsahu (CSP), povolte app.partaknaweb.cz ve script-src i v connect-src (odtud si widget stahuje styly) a api.partaknaweb.cz v connect-src včetně varianty wss:. Bez app.partaknaweb.cz v connect-src se widget vůbec nevykreslí. Bez api.partaknaweb.cz se načte a hned zmlkne. V obou případech uvidíte v konzoli prohlížeče zablokované spojení.

Přes Google Tag Manager

Máte na webu Google Tag Manager? Kód můžete vložit i přes něj, bez zásahu do šablony:

1. V kontejneru webu vytvořte novou značku typu Vlastní HTML a vložte do ní stejný instalační kód z administrace.
2. Jako spouštěč zvolte All Pages, aby byl chatbot na všech stránkách.
3. Kontejner publikujte. Bez publikování kód na veřejném webu neběží.

Do šablony webu pak kód už nevkládejte. Kdyby na stránce zůstal dvakrát, Parťák se spustí jen jednou, ale při každé změně kódu byste museli upravit obě místa. Nejčastější zádrhel: pokud značku spouští až souhlas s cookies, chatbota uvidí jen návštěvníci, kteří souhlas dali, a kontrola instalace v kroku 3 ho nenajde.

Nevíte, na čem web běží, nebo ho spravuje někdo jiný?

To je běžné a nevadí to. V administraci zvolte Nevím, na čem web běží a do pole Kód vloží někdo jiný? zadejte e-mail správce webu. Otevře se vaše e-mailová aplikace se zprávou, ve které je kód i obecný postup. Zprávu před odesláním zkontrolujete.

A když to nejde ani tak, napište na info@partaknaweb.cz. Kód vložíme za vás.

Chatbot se po vložení neukázal: kontrolní seznam

Aby se chatbot na webu ukázal, musí platit tři věci najednou. Když jedna chybí, vypadá to pokaždé stejně, na webu prostě nic není, ale řešení je pokaždé jiné:

Když tyhle tři věci sedí a chatbot pořád chybí, projděte ještě tohle:

• Mezipaměť. Vyprázdněte mezipaměť webu i sítě pro doručování obsahu a zkoušejte to v anonymním okně prohlížeče.
• Doplněk pro zrychlení. Slučuje nebo odkládá skripty. Skript chatbota přidejte na jeho seznam výjimek.
• Nepublikovaná změna. Webnode a Wix změnu ukážou až po publikování webu, Wix vlastní kód nespouští v editoru ani v náhledu.
• Zásada zabezpečení obsahu (CSP). Konzole prohlížeče hlásí zablokované spojení. Povolte domény podle odstavce Vlastní web.

Čtyři kontroly před spuštěním a hned po něm

Vložený kód ještě neznamená, že chatbot odpovídá dobře. Než v kroku 4 kliknete na Spustit na webu, projděte si v neveřejném náhledu první tři body. Čtvrtý patří hned za spuštění.

1. Nejčastější dotazy. Zeptejte se na pět až deset otázek, které dnes dostáváte e-mailem nebo po telefonu, stejnými slovy, jakými je píšou zákazníci.
2. Zdroj u ceny. U cen a citlivých témat Parťák ve výchozím nastavení ukáže, odkud odpověď vzal. Ověřte, že zdrojem je aktuální stránka, ne loňský ceník.
3. Dotaz, na který odpověď nemáte. Zeptejte se na něco, co na webu prokazatelně není. Chatbot to má přiznat a nabídnout předání firmě, ne si odpověď domyslet. Proč na tom záleží, vysvětluje halucinace AI chatbota.
4. Telefon. Po spuštění si web otevřete i v mobilu a zkontrolujte, že okno chatbota nezakrývá důležité tlačítko, třeba košík nebo lištu souhlasu s cookies.

Konverzace v neveřejném náhledu na webu se do výsledků nepočítají, z limitu konverzací tarifu ale čerpají. Bez limitu si odpovědi vyzkoušíte v Testu odpovědí v administraci.

Zpomalí chatbot web?

Kód je vložený s atributem async, takže neblokuje vykreslení stránky a nevstupuje do doby, za kterou se návštěvníkovi objeví obsah. Stáhne malý zavaděč a za ním celé rozhraní chatbota, ne jen lištu. Kolik je to na vašem webu, si změřte sami: ve vývojářském panelu prohlížeče na záložce Síť porovnejte načtení stránky před vložením kódu a po něm. Rozpis souborů je v návodu AI chatbot pro WordPress.

Pro vývojáře: tlačítko a pole na webu

Instalační kód stačí. Kdo chce chatbota otevírat i z vlastních prvků webu, má dvě nepovinné možnosti:

• Tlačítko s otázkou. Atribut data-partak-ask na tlačítku nebo odkazu otevře chatbota s předvyplněnou otázkou. Neodešle ji, návštěvník ji může upravit. Když se widget nenačte, odkaz zůstane obyčejným odkazem.

<button data-partak-ask="Jak funguje doprava?">Zeptat se na dopravu</button>

• Pole přímo v sekci webu. Prázdný prvek s atributem data-partak-inline dostane pole na otázku. Otevře stejného chatbota a stejný rozhovor a chatbot ví, u které sekce návštěvník stál. Pole bere styly vašeho webu.

<div data-partak-inline="Zeptejte se na dopravu…"></div>

Jak chatbota z webu odebrat

Stejně jako se vložil: odstraňte instalační kód ze šablony webu a změnu publikujte. Žádný doplněk ani soubor na webu nezůstane.

Časté dotazy