Dostosowywanie hostowanego widżetu

Dostosuj gotowy interfejs ładowany przez https://chattybox.ai/widget.js. Oficjalne przykłady instalacji dla frameworków i platform znajdziesz w Przewodnikach instalacji.

Zanim zaczniesz dostosowywać

Utwórz projekt, zindeksuj jego treść i zweryfikuj reprezentatywne odpowiedzi w Test Chat, zanim poświęcisz czas na prezentację. Pełną kolejność znajdziesz w sekcji Pierwsze kroki.

Skonfiguruj hostowany widżet

1. Otwórz panel i wybierz projekt.
2. Przejdź do zakładki Embed.
3. Wyświetl podgląd i zapisz wygląd widżetu oraz zachowanie językowe.

Zakładka Embed steruje prezentacją i generuje kod instalacyjny, ale publicznymi kluczami zarządza się osobno. Gdy będziesz gotowy do instalacji:

1. Otwórz Public Keys i utwórz klucz przeglądarkowy.
2. Ogranicz jego dozwolone originy do domen docelowej witryny.
3. Wróć do Embed, wybierz klucz i skopiuj wygenerowany fragment.
4. Postępuj zgodnie z Przewodnikami instalacji dla swojej platformy.

<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>

wskazówka

Zmiany prezentacji widżetu zapisane w panelu są stosowane bez zastępowania fragmentu w witrynie.

---

Dostosowywanie wyglądu

ChattyBox zawiera w pełni zintegrowany edytor wizualny. Możesz dopasować wygląd i charakter widżetu do swojej marki bez dotykania kodu.

Elementy sterujące panelu

1. Accent Color - Wybierz główny kolor marki. Wpływa on na przycisk uruchamiający, najważniejsze wyróżnienia i wiadomości użytkownika.

2. Position - Wybierz miejsce wyświetlania widżetu na ekranie.

3. Header Title - Ustaw tytuł wyświetlany u góry okna czatu.

4. Welcome Message - Dostosuj pierwszą wiadomość wyświetlaną odwiedzającym po otwarciu czatu.

notatka

Zmiany wprowadzone w panelu są stosowane natychmiast. Nie musisz aktualizować kodu osadzenia w witrynie.

Opcje zaawansowane

Ustawienia panelu a atrybuty skryptu

Większością zachowania widżetu należy zarządzać z panelu, aby proste zmiany nie wymagały ponownego wdrażania witryny.

Panel służy do ustawiania kolorów, położenia, ikony, tytułu nagłówka, wiadomości powitalnej, domyślnych języków, zarządzania kluczami publicznymi, skanowania i analityki.

Jeśli projekt korzysta z ograniczeń originów klucza publicznego, utrzymuj je w zgodzie z domenami, na których zainstalowano widżet.

Atrybutów skryptu używaj tylko dla wartości potrzebnych widżetowi podczas ładowania strony:

• data-api-key identyfikuje publiczny klucz widżetu.
• data-api-url wskazuje widżetowi, dokąd wysyłać żądania. W produkcji jest to stabilny adres https://...convex.site/chat z panelu.
• data-locale opcjonalnie wymusza konkretny język interfejsu widżetu na danej stronie.

Jeśli widżet nie pojawia się po instalacji, zobacz sekcję Rozwiązywanie problemów.

Przykłady dla konkretnych platform znajdziesz w przewodnikach Docusaurus, MkDocs, VitePress, WordPress lub GitBook.

Ukrywanie widżetu na określonych stronach

Jeśli chcesz ukryć widżet na wybranych stronach, możesz zrobić to za pomocą CSS:

.chattybox-widget {
  display: none;
}

Niestandardowe integracje

Potrzebujesz bardziej dopasowanej konfiguracji niż hostowany widżet? Zbuduj własny interfejs za pomocą JavaScript SDK lub napisz na support@chattybox.ai, aby uzyskać pomoc dotyczącą architektury.

Obsługa wielu języków

Widżet ChattyBox automatycznie dostosowuje się do preferencji językowych odwiedzających, zapewniając użytkownikom na całym świecie zlokalizowane doświadczenie.

Oficjalnie obsługiwane języki

Interfejs widżetu (przyciski, etykiety i komunikaty systemowe) jest oficjalnie obsługiwany w 14 językach:

Język	Kod	Interfejs widżetu	Jakość odpowiedzi AI
Angielski	en	Pełna obsługa	Doskonała
Francuski	fr	Pełna obsługa	Wysoka
Niemiecki	de	Pełna obsługa	Wysoka
Hiszpański	es	Pełna obsługa	Wysoka
Włoski	it	Pełna obsługa	Wysoka
Niderlandzki	nl	Pełna obsługa	Wysoka
Portugalski	pt	Pełna obsługa	Wysoka
Polski	pl	Pełna obsługa	Wysoka
Szwedzki	sv	Pełna obsługa	Wysoka
Indonezyjski	id	Pełna obsługa	Średnia
Estoński	et	Pełna obsługa	Średnia
Fiński	fi	Pełna obsługa	Średnia
Walijski	cy	Pełna obsługa	Średnia
Czeski	cs	Pełna obsługa	Średnia

:::note Rozszerzona obsługa języków Chociaż interfejs widżetu oficjalnie obsługuje 14 języków, bazowa AI rozumie i odpowiada w ponad 100 językach. Nie możemy jednak zagwarantować wysokiej jakości odpowiedzi w językach spoza oficjalnej listy. :::

Jak działa wykrywanie języka

Widżet korzysta z kaskadowego systemu wykrywania:

1. Atrybut data-locale - Najwyższy priorytet. Ustaw go w kodzie osadzenia, aby wymusić konkretny język.
2. Atrybut strony <html lang> - Widżet sprawdza zadeklarowany język strony.
3. Język przeglądarki (navigator.language) - Korzysta z preferencji językowych przeglądarki odwiedzającego.
4. Domyślny język awaryjny - Angielski, jeśli nie wykryto języka.

Ręczne zastępowanie języka

Aby wymusić wyświetlanie widżetu w konkretnym języku niezależnie od ustawień przeglądarki, dodaj atrybut 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 Przykład użycia Jest to szczególnie przydatne w wielojęzycznej witrynie, w której każda wersja językowa ma własny adres URL (np. /de/, /fr/). Ustaw data-locale zgodnie z językiem każdej strony, aby zapewnić spójne doświadczenie. :::

Ustawienia języka w panelu

Panel aplikacji pozwala skonfigurować preferencje językowe widżetu dla każdego projektu:

• Auto-detect (zalecane) - Automatycznie dopasowuje język widżetu do języka przeglądarki odwiedzającego
• Fixed Language - Wymusza wyświetlanie widżetu zawsze w konkretnym języku
• Allow Script Override - Włącza lub wyłącza zastępowanie za pomocą atrybutu data-locale

Ustawienia znajdziesz w panelu → Project → zakładka Embed → sekcja Widget Language.

Dopasowanie języka treści

Aby zapewnić najlepsze doświadczenie wielojęzyczne, chatbot powinien odpowiadać w tym samym języku, w którym użytkownik zadał pytanie. Aby to osiągnąć:

1. Przeskanuj wszystkie wersje językowe dokumentacji za pomocą pliku sitemap.xml.
2. Skaner automatycznie oznaczy treść jej językiem.
3. System RAG pobierze właściwą wersję językową na podstawie zapytania.

Konfiguracja w panelu aplikacji: podczas konfigurowania skanowania użyj adresu URL sitemap.xml (np. https://yourdocs.com/sitemap.xml), aby automatycznie wykryć i zindeksować wszystkie wersje językowe treści.

Rozwiązywanie problemów

Widżet nadal wyświetla język angielski

• Twarde odświeżenie jako diagnostyka - Odśwież stronę za pomocą Ctrl+F5 lub Cmd+Shift+R, a następnie sprawdź żądania widżetu i tłumaczeń w panelu sieciowym przeglądarki
• Sprawdź data-locale - Upewnij się, że atrybut jest prawidłowo ustawiony na obsługiwany kod języka
• Zweryfikuj język przeglądarki - Sprawdź, czy preferowany język przeglądarki jest ustawiony prawidłowo
• Sprawdź język strony HTML - Upewnij się, że strona zawiera <html lang="de"> (lub odpowiedni kod)

Źródła są w niewłaściwym języku

• Przeskanuj treść ponownie - Upewnij się, że wszystkie wersje językowe są zindeksowane
• Użyj sitemap.xml - Dzięki temu skaner znajdzie wszystkie adresy URL /de/, /fr/ itd.
• Sprawdź język zapytania - AI próbuje dopasować język odpowiedzi do języka zapytania

Brakujące tłumaczenia

• Sprawdź obsługiwane języki - Tylko 14 wymienionych wyżej języków ma gwarantowane tłumaczenia interfejsu

Najlepsze praktyki

1. Ustaw <html lang> na stronach - Pomaga to w dostępności i wykrywaniu widżetu
2. Testuj z data-locale podczas tworzenia - Sprawdź, czy każdy język renderuje się poprawnie
3. Skanuj wszystkie wersje językowe - Użyj sitemap.xml do kompletnego indeksowania wielojęzycznych treści
4. Monitoruj rozkład języków - Sprawdzaj w analityce, których języków odwiedzający używają najczęściej