Przejdź do głównej treści
ChattyBox Logo

Konfiguracja i personalizacja widżetu

Dodaj do swojej witryny widżet czatu z AI w mniej niż 5 minut.

Szybka konfiguracja​

Uruchomienie chatbota jest proste. Wystarczy skopiować krótki fragment kodu z panelu.

Krok 1: pobierz kod osadzania​

  1. Otwórz panel i wybierz projekt.
  2. Przejdź do karty Osadzanie.
  3. Wybierz klucz API, którego chcesz użyć, albo utwórz nowy.
  4. Skopiuj wygenerowany fragment kodu.

Krok 2: dodaj go do witryny​

Wklej fragment tuż przed zamykającym znacznikiem </body> na każdej stronie, na której widżet ma się pojawić.

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

:::tip Wskazówka To wszystko. Kolory i ustawienia nie muszą być wpisywane w kodzie; wszystkim zarządzasz z panelu. :::

Personalizacja wizualna​

ChattyBox ma wbudowany edytor wizualny. Możesz dopasować wygląd widżetu do marki bez zmiany kodu.

Ustawienia w panelu​

  1. Kolor akcentu - Wybierz główny kolor marki dla launchera, wyróżnień i wiadomości użytkownika.
  2. Pozycja - Określ miejsce widżetu na ekranie.
  3. Tytuł nagłówka - Ustaw tytuł na górze okna czatu.
  4. Wiadomość powitalna - Dostosuj pierwszą wiadomość widoczną po otwarciu czatu.
notatka

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

Opcje zaawansowane​

Ustawienia panelu a atrybuty skryptu​

Większością zachowań widżetu warto zarządzać w panelu, aby nie wdrażać ponownie witryny przy prostych zmianach.

Panel służy do kolorów, pozycji, ikony, tytułu, wiadomości powitalnej, domyślnych języków, kluczy publicznych, scrapingu i analityki.

Jeśli projekt używa ograniczeń pochodzenia dla kluczy publicznych, utrzymuj je zgodnie z domenami, na których widżet jest zainstalowany.

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

  • data-api-key identyfikuje publiczny klucz widżetu.
  • data-api-url wskazuje, dokąd widżet wysyła żądania.
  • data-locale może wymusić język interfejsu dla danej strony.

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

Ukrywanie widżetu na wybranych stronach​

Widżet możesz ukryć na wybranych stronach za pomocą CSS:

.chattybox-widget {
  display: none;
}

Integracje niestandardowe​

Potrzebujesz konfiguracji bardziej dopasowanej niż standardowy widżet?

Napisz do nas na [email protected], a pomożemy dobrać właściwy sposób integracji.

Obsługa wielu języków​

Widżet ChattyBox automatycznie dopasowuje się do preferencji językowych odwiedzających i zapewnia zlokalizowane doświadczenie.

Oficjalnie obsługiwane języki​

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

JęzykKodInterfejs widżetuJakość odpowiedzi AI
AngielskienPełna obsługaDoskonała
FrancuskifrPełna obsługaWysoka
NiemieckidePełna obsługaWysoka
HiszpańskiesPełna obsługaWysoka
WłoskiitPełna obsługaWysoka
NiderlandzkinlPełna obsługaWysoka
PortugalskiptPełna obsługaWysoka
PolskiplPełna obsługaWysoka
SzwedzkisvPełna obsługaWysoka
IndonezyjskiidPełna obsługaŚrednia
EstońskietPełna obsługaŚrednia
FińskifiPełna obsługaŚrednia
WalijskicyPełna obsługaŚrednia
CzeskicsPełna obsługaŚrednia

:::note Rozszerzona obsługa języków Interfejs widżetu oficjalnie obsługuje 14 języków, ale bazowa AI rozumie i odpowiada w ponad 100 językach. Nie gwarantujemy jednak takiej samej jakości odpowiedzi dla języków spoza oficjalnej listy. :::

Jak działa wykrywanie języka​

Widżet używa kaskadowego systemu wykrywania:

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

Ręczne wymuszenie języka​

Aby ustawić język widżetu niezależnie od przeglądarki, dodaj atrybut data-locale:

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

:::tip Przykład użycia To przydatne, gdy witryna wielojęzyczna ma osobny adres URL dla każdego języka, na przykład /de/ lub /fr/. Ustaw data-locale zgodnie z językiem strony, aby zachować spójne doświadczenie. :::

Ustawienia języka w panelu​

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

  • Automatyczne wykrywanie (zalecane) - Dopasowuje język do przeglądarki odwiedzającego.
  • Stały język - Zawsze wymusza wskazany język widżetu.
  • Zezwalaj na nadpisanie przez skrypt - Włącza lub wyłącza nadpisywanie przez data-locale.

Ustawienia znajdziesz w panelu → Projekt → Osadzanie → Język widżetu.

Dopasowanie języka treści​

Aby uzyskać najlepsze doświadczenie wielojęzyczne, chatbot powinien odpowiadać w języku pytania użytkownika. W tym celu:

  1. Zeskrapuj wszystkie wersje językowe dokumentacji przez plik sitemap.xml.
  2. Scraper automatycznie oznaczy treści właściwym językiem.
  3. System RAG pobierze wersję językową pasującą do zapytania.

Konfiguracja w panelu: podczas ustawiania scrapingu użyj adresu sitemap.xml, na przykład https://yourdocs.com/sitemap.xml, aby automatycznie znaleźć i zindeksować wszystkie wersje językowe.

Rozwiązywanie problemów​

Widżet nadal pokazuje angielski​

  • Wyczyść pamięć podręczną przeglądarki - Plik widget.js może być zapisany w cache. Wykonaj twarde odświeżenie (Ctrl+F5 / Cmd+Shift+R).
  • Sprawdź data-locale - Upewnij się, że atrybut ma obsługiwany kod języka.
  • Sprawdź język przeglądarki - Zweryfikuj preferowany język.
  • Sprawdź HTML lang strony - Upewnij się, że strona używa <html lang="pl"> lub właściwego kodu.

Źródła są w złym języku​

  • Zeskrapuj treści ponownie - Upewnij się, że wszystkie wersje językowe zostały zindeksowane.
  • Użyj sitemap.xml - Dzięki temu scraper znajdzie adresy /de/, /fr/ itd.
  • Sprawdź język pytania - AI próbuje dopasować język odpowiedzi do pytania.

Brakujące tłumaczenia​

  • Sprawdź obsługiwane języki - Tylko 14 języków z tabeli ma gwarantowane tłumaczenia interfejsu.

Dobre praktyki​

  1. Ustaw <html lang> na stronach - Pomaga to dostępności i wykrywaniu języka przez widżet.
  2. Testuj z data-locale podczas rozwoju - Sprawdź, czy każdy język renderuje się poprawnie.
  3. Zeskrapuj wszystkie wersje językowe - Użyj sitemap.xml dla pełnego indeksowania wielojęzycznego.
  4. Monitoruj rozkład języków - W analityce sprawdzaj, jakich języków najczęściej używają odwiedzający.