Widżet JavaScript

Dodaj widżet czatu do dowolnej strony za pomocą prostego tagu skryptu.

Widżet JavaScript to najprostszy sposób na dodanie agenta do dowolnej strony. Pojedynczy tag skryptu tworzy pływający dymek czatu, który odwiedzający mogą kliknąć, aby rozpocząć rozmowę.

Szybka konfiguracja

  1. Przejdź do zakładki Publikuj swojego agenta
  2. Wybierz Widżet czatu (domyślnie)
  3. Skopiuj wyświetlony fragment kodu JavaScript
  4. Wklej go do swojej strony przed </body>
  5. Zapisz i odśwież swoją stronę

Dymek czatu pojawi się w rogu strony. Twój fragment kodu zawiera identyfikator Twojego agenta i poprawny adres URL skryptu.

Konfiguracja widżetu

Pozycja

Domyślnie widżet pojawia się w prawym dolnym rogu. Zmień pozycję w ustawieniach Wygląd.

Kolory

Kolory widżetu dopasowują się do ustawień motywu Twojego agenta. Dostosuj je w zakładce Wygląd.

Urządzenia mobilne

Widżet jest w pełni responsywny i automatycznie działa na urządzeniach mobilnych.

Załączniki plików

Odwiedzający mogą dołączać dokumenty, arkusze kalkulacyjne, obrazy i pliki tekstowe bezpośrednio z widżetu. Załączniki są wykorzystywane wyłącznie jako tymczasowy kontekst rozmowy i nie trafiają do źródeł treningowych agenta.

Obsługiwane formaty to PDF, Word, Excel, HTML, TXT, Markdown, JSON, CSV, PNG, JPG, WEBP i GIF. Odwiedzający mogą dołączyć do 3 plików w jednej wiadomości, przy limicie 10 MB na plik. Pliki PDF są odczytywane do pierwszych 20 stron, aby odpowiedzi pozostawały szybkie i niezawodne.

Atrybuty danych

Widżet wykorzystuje atrybuty danych do konfiguracji:

AtrybutOpisWartość domyślna
data-chatbotWymagany. Identyfikator Twojego agenta (zawarty w kodzie do osadzenia)-

Umiejscowienie

Gdzie dodać kod

Dla najlepszej wydajności dodaj skrypt tuż przed </body>:

<!DOCTYPE html>
<html>
<head>
  <!-- Your head content -->
</head>
<body>
  <!-- Your website content -->

  <!-- Paste your embed code from Chatbot > Publish here -->
</body>
</html>

Aplikacje jednostronicowe

W przypadku SPA dodaj skrypt do głównego szablonu HTML lub pliku index.

Wiele stron

Dodaj ten sam skrypt do każdej strony, na której ma pojawiać się widżet. Możesz też dodać go do szablonu układu swojej witryny.

Testowanie instalacji

Po dodaniu kodu:

  1. Otwórz swoją stronę w przeglądarce
  2. Sprawdź, czy widoczny jest dymek czatu (domyślnie w prawym dolnym rogu)
  3. Kliknij, aby otworzyć czat
  4. Wyślij testową wiadomość
  5. Sprawdź, czy odpowiedź jest poprawna

Rozwiązywanie problemów

Widżet się nie pojawia:

  • Sprawdź, czy skrypt znajduje się przed </body>
  • Zweryfikuj, czy identyfikator agenta jest poprawny
  • Wyczyść pamięć podręczną przeglądarki
  • Sprawdź konsolę przeglądarki pod kątem błędów

Nieprawidłowa pozycja:

  • Sprawdź ustawienia Wygląd
  • Poszukaj konfliktów CSS

Brak odpowiedzi:

  • Upewnij się, że istnieje treść treningowa
  • Sprawdź limit wiadomości w swoim planie
  • Przetestuj najpierw w Playground

Dozwolone domeny

Jeśli skonfigurowano dozwolone domeny:

  • Widżet ładuje się tylko na zatwierdzonych domenach
  • Na pozostałych witrynach widżet się nie pojawia (bez wyświetlania błędu)

Skonfiguruj domeny →

Wydajność

Widżet jest zoptymalizowany pod kątem minimalnego wpływu na wydajność:

  • Ładuje się asynchronicznie (atrybut async)
  • Niewielki rozmiar pakietu JS
  • Nie blokuje renderowania
  • Interfejs czatu ładuje się leniwie (lazy loading)

Konflikty stylów

Widżet korzysta z izolowanych stylów i nie powinien powodować konfliktów z Twoją witryną. Jeśli zauważysz problemy:

  1. Sprawdź globalne selektory CSS
  2. Poszukaj reguł z !important
  3. Jeśli problem się utrzymuje, skontaktuj się z pomocą techniczną

Usuwanie widżetu

Aby go usunąć:

  1. Usuń tag skryptu z kodu HTML
  2. Wyczyść pamięć podręczną
  3. Widżet zniknie natychmiast

Kolejne kroki