Przejdź do treści

Integracja widgetów

Zintegruj widżet ChatHub ze swoją witryną, aby zapewnić swoim klientom obsługę czatu w czasie rzeczywistym.

Przegląd

Widżet ChatHub to komponent JavaScript, który:

  • Osadza się na dowolnej stronie internetowej
  • Zapewnia interfejs czatu w czasie rzeczywistym
  • Łączy klientów z operatorami
  • Wymaga tokena uwierzytelniającego operatora
  • Ładuje się jako moduł ES

Szybki start

1. Zdobądź token operatora

Najpierw uzyskaj token operatora, wykonując przebieg uwierzytelniania:

KOD_BLOKU_0

2. Umieść widżet

Dodaj skrypt widgetu do swojego kodu HTML:

KOD_BLOKU_1

Parametry skryptu

Atrybut Wartość Wymagane Opis
typ moduł Tak Typ modułu ES
id `skrypt-panelu-czatu-operatora' Tak Unikalny identyfikator skryptu
źródło Adres URL widżetu Tak Lokalizacja skryptu widgetu
token token JWT Tak Token uwierzytelniający operatora

Metody integracji

Statyczny kod HTML

W przypadku stron statycznych osadzaj bezpośrednio w kodzie HTML:

KOD_BLOKU_2

Wstrzykiwanie dynamiczne (JavaScript)

W przypadku aplikacji jednostronicowych wstrzykuj dynamicznie:

KOD_BLOKU_3

Reaguj

KOD_BLOKU_4

Vue.js

KOD_BLOKU_5

Kątowy

KOD_BLOKU_6

Zarządzanie tokenami

Generowanie tokenu po stronie serwera

Nigdy nie ujawniaj danych uwierzytelniających firmy w kodzie po stronie klienta. Generuj tokeny na swoim serwerze:

KOD_BLOKU_7

Odśwież token

Zaimplementuj automatyczne odświeżanie tokena:

KOD_BLOKU_8

Wiele organizacji

Załaduj różne widżety dla różnych organizacji:

KOD_BLOKU_9

Najlepsze praktyki

Bezpieczeństwo

  • ✅ Generuj tokeny po stronie serwera
  • ✅ Nigdy nie ujawniaj danych uwierzytelniających firmy w kodzie klienta
  • ✅ Używaj protokołu HTTPS dla wszystkich żądań API
  • ✅ Zaimplementuj wygaśnięcie tokena
  • ✅ Zweryfikuj tokeny przed użyciem
  • ❌ Nie przechowuj tokenów w localStorage bez szyfrowania
  • ❌ Nie przekazuj tokenów do kontroli wersji

Wydajność

  • ✅ Załaduj widget asynchronicznie
  • ✅ Korzystaj z modułów ES (nowoczesne przeglądarki)
  • ✅ Zaimplementuj buforowanie tokenów
  • ✅ Radź sobie z błędami z wdziękiem
  • ❌ Nie blokuj ładowania strony

Doświadczenie użytkownika

  • ✅ Pokaż stan ładowania podczas inicjalizacji widgetu
  • ✅ Obsługa błędów sieciowych
  • ✅ Zapewnij zastępczą metodę kontaktu
  • ✅ Przetestuj na różnych przeglądarkach i urządzeniach

Obsługa błędów

KOD_BLOKU_10

Rozwiązywanie problemów

Widget nie ładuje się

  1. Sprawdź, czy token operatora jest ważny
  2. Sprawdź, czy token nie wygasł
  3. Upewnij się, że adres URL skryptu jest poprawny
  4. Sprawdź konsolę przeglądarki pod kątem błędów
  5. Sprawdź łączność sieciową

Token wygasł

KOD_BLOKU_11

Wiele instancji widżetów

Upewnij się, że w danym momencie ładuje się tylko jeden widżet:

KOD_BLOKU_12

Problemy z różnymi źródłami

Upewnij się, że Twoja domena znajduje się na białej liście. Skontaktuj się z pomocą techniczną, jeśli napotkasz błędy CORS.

Testowanie

Rozwój lokalny

KOD_BLOKU_13

Testowanie integracyjne

KOD_BLOKU_14

Następne kroki