Obchod · Chatbot

Chatbot na webu

Jak nainstalovat AI chatbot widget na váš web, nakonfigurovat ho v administraci a vyřešit nejčastější problémy s CORS, CSP a AI odpověďmi.

Jak to funguje

Pixelbrain chatbot je malý JavaScript widget, který vložíte na libovolný web jedním řádkem kódu. Widget se připojí k vašemu chatbotu nakonfigurovanému v administraci a odpovídá návštěvníkům pomocí AI (Claude od Anthropic).

💡

Bez ANTHROPIC_API_KEY bot odpovídá generickou záložní zprávou. Pro plné AI odpovědi přidejte API klíč v nastavení serveru.

1. Vytvoření chatbota

Přejděte do Obchod → Chatbot v administraci a klikněte na + Nový chatbot.

1

Základní nastavení

Vyplňte název (zobrazen v chatu), uvítací zprávu (první zpráva které uvidí návštěvník) a barvu widgetu (odpovídá barvám vašeho webu).
2

Systémové instrukce (System Prompt)

Napište AI instrukce — co bot zná, jak má odpovídat, na co se nemá pouštět. Čím konkrétnější instrukce, tím přesnější odpovědi. Příklad: "Jsi zákaznický asistent firmy XYZ. Odpovídáš přátelsky v češtině. Neposkytuj informace o ceně bez souhlasu obchodního týmu."
3

Aktivujte chatbota

Přepněte stav na Aktivní a uložte. Neaktivní bot neodpovídá — widget se na webu stále zobrazí, ale chat vrátí chybu.

2. Instalace widgetu

Po vytvoření chatbota klikněte na tlačítko Embed kód. Zkopírujte kód a vložte ho těsně před </body> na každé stránce, kde chcete mít chat dostupný.

<script src="https://app.pixelbrain.cz/chatbot.js"
  data-bot-id="VAS-BOT-ID"
  data-name="Zákaznická podpora"
  data-color="#2563EB">
</script>

Atributy widgetu

Atribut	Typ	Popis
data-bot-id	Povinné	ID chatbota — zkopírujte z administrace
data-name	Volitelné	Název zobrazený v hlavičce chatu
data-color	Volitelné	Barva tlačítka a hlavičky (hex, default: `#2563EB`)
data-position	Volitelné	`"right"` nebo `"left"` (default: right)
data-api	Volitelné	Vlastní URL API (default: `https://app.pixelbrain.cz/api/v1`)

3. Aktivace AI odpovědí

Bot ve výchozím stavu odpovídá záložní zprávou. Pro plné AI odpovědi potřebujete API klíč od Anthropic.

1

Získejte Anthropic API klíč

Zaregistrujte se na console.anthropic.com a vygenerujte API klíč. Začínáte s sk-ant-....
2

Přidejte klíč do konfigurace

Na serveru otevřete /mnt/HC_Volume_***/pixelbrain.ai/api/.env a přidejte nebo aktualizujte řádek:

ANTHROPIC_API_KEY=sk-ant-api03-...

3

Restartujte API

Přihlaste se na server a restartujte PM2:

pm2 restart pixelbrain-api

✅

Ověření: Odešlete zprávu přes chatbot. Pokud odpověď začíná přesnou odpovědí na dotaz (ne generickou větou), AI funguje.

Řešení problémů

Níže jsou nejčastější důvody, proč chatbot nemusí fungovat správně.

Chyba Widget se vůbec nezobrazí — tlačítko chybí

Příčina: Váš web má v hlavičce Content-Security-Policy (CSP), která zakazuje načítání skriptů z app.pixelbrain.cz.

Jak ověřit: Otevřete DevTools (F12) → Console. Hledejte chybu obsahující Content-Security-Policy nebo Refused to load the script.

Řešení: Přidejte https://app.pixelbrain.cz do script-src a connect-src v CSP hlavičce vašeho webu.

Pokud web hostujete na Apache, upravte vhost config:

Header always set Content-Security-Policy "... script-src 'self' https://app.pixelbrain.cz; connect-src 'self' https://app.pixelbrain.cz;"

Pokud web hostujete na Vercel / Netlify, přidejte do vercel.json nebo netlify.toml odpovídající CSP.

Chyba V konzoli se zobrazuje „Blocked by CORS policy"

Příčina: Pixelbrain API neumožňuje požadavky z domény vašeho webu. API má whitelist povolených domén (CORS).

Jak ověřit: DevTools → Console → hledejte chybu Access to fetch at 'https://app.pixelbrain.cz/...' from origin 'https://vaseweb.cz' has been blocked by CORS policy.

Řešení: Přidejte doménu vašeho webu do proměnné EXTRA_ORIGINS v souboru .env na serveru:

EXTRA_ORIGINS=https://vaseweb.cz,https://www.vaseweb.cz

Poté restartujte API: pm2 restart pixelbrain-api

Varování Bot odpovídá vždy stejnou generickou zprávou

Příčina: Není nastavený ANTHROPIC_API_KEY v konfiguračním souboru serveru. Bot pak vrací výchozí záložní odpověď.

Řešení: Viz sekci Aktivace AI odpovědí výše. Zkontrolujte, že soubor .env obsahuje platný klíč a PM2 byl restartován.

Ověření v logu:

pm2 logs pixelbrain-api --lines 20

Pokud vidíte ANTHROPIC_API_KEY not set — AI will return mock responses, klíč nebyl načten.

Chyba Bot vrací chybu „Chatbot nenalezen nebo není aktivní"

Příčina: Špatné data-bot-id v embed kódu, nebo bot byl smazán / je nastaven jako neaktivní.

Řešení:

Zkontrolujte data-bot-id v embed kódu — zkopírujte znovu z administrace
V Obchod → Chatbot ověřte, že chatbot je Aktivní
Ujistěte se, že ID v kódu odpovídá ID zobrazenému v administraci

Varování Tlačítko chatu se zobrazuje za jiným prvkem webu

Příčina: Na vašem webu má jiný prvek vyšší z-index než widget (výchozí je 99999).

Řešení: Přidejte do CSS vašeho webu:

.pb-chat-btn, .pb-chat-window {
  z-index: 2147483647 !important;
}

Nebo zkontrolujte, který prvek webu má extrémně vysoký z-index a snižte ho.

Info Widget funguje, ale konverzace se neukládají v administraci

Příčina: Konverzace se ukládají, ale zobrazují se s mírným zpožděním (cache). Nebo se díváte na jiného chatbota.

Řešení: V administraci přejděte na Obchod → Chatbot, klikněte na konkrétního bota a otevřete záložku Konverzace. Obnovte stránku.

Info Bot neodpovídá na dotazy z oblasti naší firmy

Příčina: Systémové instrukce (System Prompt) jsou příliš obecné nebo chybějí. AI nemá kontext o vaší firmě a produktech.

Řešení: Upravte System Prompt v administraci. Zahrňte:

Název a popis firmy
Produkty / služby a jejich ceny (nebo kde je najít)
Kontaktní informace pro eskalaci
Co bot nesmí prozrazovat (interní ceny, slevy, atd.)

Příklad kvalitního System Promptu:

Jsi zákaznický asistent firmy Novák s.r.o.
Prodáváme průmyslové filtry, ceny od 500 Kč.
Otevírací doba: Po–Pá 8–17h.
Kontakt: info@novak.cz, tel. 777 111 222.
Odpovídej přátelsky a stručně v češtině.
Neznáš-li odpověď, navrhni kontakt na email.

Časté dotazy

Funguje widget na jakémkoli webu?

Ano — widget je čistý JavaScript bez závislostí, funguje na React, WordPress, Webflow, Shopify i statickém HTML. Potřebujete pouze možnost vložit <script> tag do HTML.

Kolik konverzací / zpráv je zdarma?

Závisí na Anthropic pricing. Claude Haiku (výchozí model) stojí přibližně $0.25 na 1M input tokenů — jedna průměrná konverzace vychází na zlomky centu. API klíč si spravujete sami na console.anthropic.com.

Ukládají se konverzace?

Ano, všechny konverzace jsou uloženy v databázi a dostupné v administraci pod Obchod → Chatbot → Konverzace. Session ID návštěvníka je uloženo v localStorage prohlížeče.

Lze změnit pozici widgetu?

Ano, pomocí atributu data-position="left" přesunete widget do levého dolního rohu.

← Předchozí Helpdesk a tikety Další → Sklad a produkty