Přizpůsobení hostovaného widgetu

Přizpůsobte hotové rozhraní načítané z https://chattybox.ai/widget.js. Kanonické příklady instalace pro frameworky a platformy najdete v Průvodcích instalací.

Než začnete s přizpůsobováním

Vytvořte projekt, indexujte jeho obsah a ověřte reprezentativní odpovědi v Test Chat, teprve potom věnujte čas vzhledu. Kompletní postup najdete v části Začínáme.

Nakonfigurujte hostovaný widget

1. Otevřete řídicí panel a vyberte projekt.
2. Přejděte na kartu Embed.
3. Prohlédněte si a uložte vzhled widgetu a chování jazyků.

Karta Embed řídí prezentaci a generuje instalační kód, veřejné klíče se však spravují samostatně. Až budete připraveni k instalaci:

1. Otevřete Public Keys a vytvořte klíč pro prohlížeč.
2. Omezte jeho povolené originy na zamýšlené domény webu.
3. Vraťte se do Embed, vyberte klíč a zkopírujte vygenerovaný úryvek.
4. Postupujte podle Průvodců instalací pro svou platformu.

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

tip

Změny vzhledu widgetu uložené v řídicím panelu se použijí bez nahrazení úryvku na vašem webu.

---

Vizuální přizpůsobení

ChattyBox obsahuje plně integrovaný vizuální editor. Vzhled a dojem widgetu můžete dokonale sladit se svou značkou, aniž byste se dotkli kódu.

Ovládací prvky v řídicím panelu

1. Accent Color - Vyberte hlavní barvu značky. Ovlivňuje spouštěč, hlavní zvýraznění a zprávy uživatele.

2. Position - Zvolte, kde se widget na obrazovce zobrazí.

3. Header Title - Nastavte název zobrazený v horní části okna chatu.

4. Welcome Message - Přizpůsobte první zprávu, kterou návštěvníci uvidí po otevření chatu.

poznámka

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

Pokročilé možnosti

Nastavení v řídicím panelu vs. atributy skriptu

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

Řídicí panel použijte pro barvy, pozici, ikonu, název záhlaví, uvítací zprávu, výchozí jazyky, správu veřejných klíčů, scraping a analytiku.

Pokud projekt používá omezení originů veřejného klíče, udržujte tato omezení synchronizovaná 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 určuje, kam má widget odesílat požadavky. V produkci jde o stabilní URL https://...convex.site/chat z vašeho řídicího panelu.
• data-locale volitelně vynutí konkrétní jazyk rozhraní widgetu pro danou stránku.

Pokud se widget po instalaci nezobrazuje, přečtěte si Řešení problémů.

Příklady pro konkrétní platformy najdete v průvodcích Docusaurus, MkDocs, VitePress, WordPress nebo GitBook.

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

Pokud potřebujete widget na vybraných stránkách skrýt, můžete to udělat pomocí CSS:

.chattybox-widget {
  display: none;
}

Vlastní integrace

Potřebujete přizpůsobenější nastavení než hostovaný widget? Vytvořte vlastní rozhraní pomocí JavaScript SDK nebo požádejte o pomoc s architekturou na support@chattybox.ai.

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í uživatelům po celém světě.

Oficiálně podporované jazyky

Rozhraní widgetu (tlačítka, popisky a systémové zprávy) je oficiálně podporováno ve 14 jazycích:

Jazyk	Kód	Rozhraní widgetu	Kvalita odpovědí AI
Angličtina	en	Plná podpora	Výborná
Francouzština	fr	Plná podpora	Vysoká
Němčina	de	Plná podpora	Vysoká
Španělština	es	Plná podpora	Vysoká
Italština	it	Plná podpora	Vysoká
Nizozemština	nl	Plná podpora	Vysoká
Portugalština	pt	Plná podpora	Vysoká
Polština	pl	Plná podpora	Vysoká
Švédština	sv	Plná podpora	Vysoká
Indonéština	id	Plná podpora	Střední
Estonština	et	Plná podpora	Střední
Finština	fi	Plná podpora	Střední
Velština	cy	Plná podpora	Střední
Čeština	cs	Plná podpora	Střední

:::note Rozšířená podpora jazyků Přestože je rozhraní widgetu oficiálně podporováno ve 14 jazycích, základní AI rozumí a odpovídá ve 100+ jazycích. U jazyků mimo náš oficiálně podporovaný seznam však nemůžeme zaručit vysokou kvalitu odpovědí. :::

Jak funguje detekce jazyka

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

1. Atribut data-locale - Nejvyšší priorita. Nastavte jej v úryvku pro vložení a vynutíte konkrétní jazyk.
2. Atribut stránky <html lang> - Widget zkontroluje deklarovaný jazyk stránky.
3. Jazyk prohlížeče (navigator.language) - Použije jazykové preference návštěvníka.
4. Výchozí záložní jazyk - Angličtina, pokud není detekován žádný jazyk.

Ruční přepsání jazyka

Chcete-li vynutit zobrazení widgetu v určitém jazyce bez ohledu na nastavení prohlížeče, přidejte atribut data-locale:

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

:::tip Případ použití To je obzvlášť užitečné pro vícejazyčný web, kde má každá jazyková verze vlastní URL (např. /de/, /fr/). Nastavte data-locale podle jazyka každé stránky, aby bylo prostředí konzistentní. :::

Jazyková nastavení v řídicím panelu

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

• Auto-detect (doporučeno) - Automaticky sladí jazyk widgetu s jazykem prohlížeče návštěvníka
• Fixed Language - Vynutí, aby se widget vždy zobrazoval v konkrétním jazyce
• Allow Script Override - Povolí či zakáže přepsání pomocí atributu data-locale

Tato nastavení najdete v řídicím panelu → Projekt → karta Embed → část Widget Language.

Párování jazyka obsahu

Pro nejlepší vícejazyčné prostředí by měl chatbot odpovídat ve stejném jazyce, jakým uživatel položil otázku. Postupujte takto:

1. Pomocí souboru sitemap.xml scrapujte všechny jazykové verze dokumentace.
2. Scraper obsah automaticky označí jeho jazykem.
3. Systém RAG načte podle dotazu vhodnou jazykovou verzi.

Nastavení v řídicím panelu aplikace: Při konfiguraci scrapování použijte URL sitemapu (např. https://yourdocs.com/sitemap.xml), aby byly automaticky nalezeny a indexovány všechny jazykové verze obsahu.

Řešení problémů

Widget se stále zobrazuje anglicky

• Tvrdé obnovení jako diagnostika - Obnovte stránku pomocí Ctrl+F5 nebo Cmd+Shift+R a v síťovém panelu prohlížeče zkontrolujte požadavky na widget a překlady
• Zkontrolujte data-locale - Ověřte, že je atribut správně nastaven na podporovaný kód jazyka
• Ověřte jazyk prohlížeče - Zkontrolujte, zda je preferovaný jazyk prohlížeče nastaven správně
• Zkontrolujte lang stránky - Ujistěte se, že stránka obsahuje <html lang="de"> (nebo odpovídající kód)

Zdroje jsou ve špatném jazyce

• Scrapujte obsah znovu - Ověřte, že jsou indexovány všechny jazykové verze
• Použijte sitemap.xml - Zajistíte tak, že scraper najde všechny URL /de/, /fr/ atd.
• Zkontrolujte jazyk dotazu - AI se pokouší sladit jazyk odpovědi s jazykem dotazu

Chybějící překlady

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

Doporučené postupy

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