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
- Przejdź do zakładki Publikuj swojego agenta
- Wybierz Widżet czatu (domyślnie)
- Skopiuj wyświetlony fragment kodu JavaScript
- Wklej go do swojej strony przed
</body> - 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:
| Atrybut | Opis | Wartość domyślna |
|---|---|---|
data-chatbot | Wymagany. 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:
- Otwórz swoją stronę w przeglądarce
- Sprawdź, czy widoczny jest dymek czatu (domyślnie w prawym dolnym rogu)
- Kliknij, aby otworzyć czat
- Wyślij testową wiadomość
- 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)
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:
- Sprawdź globalne selektory CSS
- Poszukaj reguł z
!important - Jeśli problem się utrzymuje, skontaktuj się z pomocą techniczną
Usuwanie widżetu
Aby go usunąć:
- Usuń tag skryptu z kodu HTML
- Wyczyść pamięć podręczną
- Widżet zniknie natychmiast
Kolejne kroki
- Dostosuj wygląd w ustawieniach Wygląd
- Skonfiguruj dozwolone domeny
- Dodaj sugerowane wiadomości