Přejít na hlavní obsah
ChattyBox Logo

Nastavení a přizpůsobení widgetu

Přidejte na svůj web chatovací widget s AI za méně než 5 minut.

Rychlé nastavení​

Spuštění chatbota je jednoduché. Stačí zkopírovat krátký úryvek kódu z panelu.

Krok 1: získejte kód pro vložení​

  1. Otevřete panel a vyberte projekt.
  2. Přejděte na kartu Vložit.
  3. Vyberte klíč API, který chcete použít, nebo vytvořte nový.
  4. Zkopírujte vygenerovaný kód.

Krok 2: přidejte ho na web​

Vložte úryvek těsně před uzavírací značku </body> na každé stránce, kde se má chatovací widget zobrazit.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="cs"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Tip To je vše. Barvy ani nastavení nemusíte upravovat v kódu; vše se spravuje v panelu. :::

Vizuální přizpůsobení​

ChattyBox obsahuje integrovaný vizuální editor. Vzhled widgetu můžete sladit se značkou bez úprav kódu.

Ovládací prvky v panelu​

  1. Akcentní barva - Vyberte hlavní barvu značky pro spouštěč, zvýraznění a zprávy uživatele.
  2. Pozice - Zvolte, kde se widget zobrazí na obrazovce.
  3. Nadpis záhlaví - Nastavte titulek v horní části okna chatu.
  4. Uvítací zpráva - Přizpůsobte první zprávu, kterou návštěvníci uvidí.
poznámka

Změny provedené v panelu se projeví okamžitě. Kód pro vložení na webu není nutné aktualizovat.

Pokročilé možnosti​

Nastavení v panelu a atributy skriptu​

Většinu chování widgetu spravujte v panelu, abyste kvůli jednoduchým změnám nemuseli web znovu nasazovat.

Panel používejte pro barvy, pozici, ikonu, nadpis, uvítací zprávu, výchozí jazyk, veřejné klíče, scraping a analytiku.

Pokud projekt používá omezení původu pro veřejné klíče, udržujte je sladěné s doménami, na kterých je widget nainstalován.

Atributy skriptu používejte pouze pro hodnoty, které widget potřebuje při načtení stránky:

  • data-api-key identifikuje veřejný klíč widgetu.
  • data-api-url říká widgetu, kam má posílat požadavky.
  • data-locale může pro danou stránku vynutit konkrétní jazyk rozhraní.

Pokud se widget po instalaci nezobrazí, podívejte se na řešení problémů.

Pro příklady podle platforem začněte s Docusaurus, MkDocs, VitePress, WordPress nebo GitBook.

Skrytí widgetu na určitých stránkách​

Na vybraných stránkách můžete widget skrýt pomocí CSS:

.chattybox-widget {
  display: none;
}

Vlastní integrace​

Potřebujete specifičtější nastavení než standardní widget?

Napište nám na [email protected] a pomůžeme zvolit správný integrační postup.

Vícejazyčná podpora​

Widget ChattyBox se automaticky přizpůsobuje jazykovým preferencím návštěvníků a poskytuje lokalizované prostředí.

Oficiálně podporované jazyky​

Rozhraní widgetu, včetně tlačítek, popisků a systémových zpráv, je oficiálně podporováno ve 14 jazycích:

JazykKódRozhraní widgetuKvalita odpovědí AI
AngličtinaenPlná podporaVýborná
FrancouzštinafrPlná podporaVysoká
NěmčinadePlná podporaVysoká
ŠpanělštinaesPlná podporaVysoká
ItalštinaitPlná podporaVysoká
NizozemštinanlPlná podporaVysoká
PortugalštinaptPlná podporaVysoká
PolštinaplPlná podporaVysoká
ŠvédštinasvPlná podporaVysoká
IndonéštinaidPlná podporaStřední
EstonštinaetPlná podporaStřední
FinštinafiPlná podporaStřední
VelštinacyPlná podporaStřední
ČeštinacsPlná podporaStřední

:::note Rozšířená jazyková podpora I když rozhraní widgetu oficiálně podporuje 14 jazyků, podkladová AI dokáže rozumět a odpovídat ve 100+ jazycích. U jazyků mimo oficiální seznam však nemůžeme zaručit stejně vysokou kvalitu. :::

Jak funguje detekce jazyka​

Widget používá postupný systém detekce:

  1. Atribut data-locale - Nejvyšší priorita. Nastavte ho v kódu pro vynucení jazyka.
  2. Atribut stránky <html lang> - Widget kontroluje deklarovaný jazyk stránky.
  3. Jazyk prohlížeče (navigator.language) - Používá preference návštěvníka.
  4. Výchozí záloha - Angličtina, pokud není detekován žádný jazyk.

Ruční přepsání jazyka​

Chcete-li vynutit jazyk widgetu bez ohledu na prohlížeč, přidejte data-locale:

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="cs"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Příklad použití To je užitečné, pokud má vícejazyčný web pro každý jazyk vlastní URL, například /de/ nebo /fr/. Nastavte data-locale podle jazyka stránky. :::

Jazyková nastavení v panelu​

V panelu aplikace můžete nastavit jazykové preference widgetu pro každý projekt:

  • Automatická detekce (doporučeno) - Automaticky odpovídá jazyku prohlížeče návštěvníka.
  • Pevný jazyk - Vždy vynutí konkrétní jazyk widgetu.
  • Povolit přepsání skriptem - Zapne nebo vypne přepsání pomocí data-locale.

Nastavení najdete v panelu → Projekt → Vložit → Jazyk widgetu.

Sladění s jazykem obsahu​

Pro nejlepší vícejazyčné prostředí by chatbot měl odpovídat ve stejném jazyce jako otázka uživatele. Postup:

  1. Scrape'ujte všechny jazykové verze dokumentace pomocí sitemap.xml.
  2. Scraper obsah automaticky označí správným jazykem.
  3. Systém RAG podle dotazu získá odpovídající jazykovou verzi.

Nastavení v panelu: při konfiguraci scrapingu použijte URL sitemap.xml, například https://yourdocs.com/sitemap.xml, aby byly automaticky nalezeny a indexovány všechny jazykové verze.

Řešení problémů​

Widget stále zobrazuje angličtinu​

  • Vymažte cache prohlížeče - Soubor widget.js může být uložený v cache. Proveďte tvrdé obnovení (Ctrl+F5 / Cmd+Shift+R).
  • Zkontrolujte data-locale - Ověřte, že atribut obsahuje podporovaný jazykový kód.
  • Zkontrolujte jazyk prohlížeče - Ujistěte se, že preferovaný jazyk je správný.
  • Zkontrolujte HTML lang - Stránka by měla používat <html lang="cs"> nebo odpovídající kód.

Zdroje jsou ve špatném jazyce​

  • Scrape'ujte obsah znovu - Ujistěte se, že všechny jazykové verze byly indexovány.
  • Použijte sitemap.xml - Scraper tak najde URL jako /de/, /fr/ atd.
  • Zkontrolujte jazyk otázky - AI se snaží sladit jazyk odpovědi s jazykem dotazu.

Chybějící překlady​

  • Zkontrolujte podporované jazyky - Pouze 14 jazyků uvedených výše má zaručené překlady UI.

Doporučené postupy​

  1. Nastavte na stránkách <html lang> - Pomáhá to přístupnosti i detekci widgetu.
  2. Během vývoje testujte s data-locale - Ověřte, že se každý jazyk zobrazuje správně.
  3. Scrape'ujte všechny jazykové verze - Použijte sitemap.xml pro kompletní vícejazyčné indexování.
  4. Sledujte jazykové rozložení - V analytice kontrolujte, které jazyky návštěvníci používají nejčastěji.