Zainstaluj widget

Widget WebSpeaker daje odwiedzającym dostęp do wyszukiwania AI po treściach Twojej witryny oraz, opcjonalnie, do czatu na żywo z Twoim zespołem wsparcia — bez opuszczania przeglądanej strony. Może pojawiać się w kilku stanach interfejsu, które prowadzą użytkownika od wyszukiwania do pełnej rozmowy z asystentem.

1) Pole wyszukiwania w nawigacji

Widget może działać jako kompaktowe pole wyszukiwania w górnym pasku nawigacji, dzięki czemu odwiedzający od razu wpisze pytanie.

2) Rozszerzony widok asystenta na desktopie

Na desktopie widget może otworzyć się w szerszym widoku, który łączy wyniki i odpowiedzi asystenta w jednej przestrzeni.

3) Pływający przycisk uruchamiający

Pływający przycisk daje szybki dostęp do asystenta z dowolnej podstrony.

4) Otwarty panel konwersacji

Po otwarciu widgetu użytkownik widzi pełny panel rozmowy z kartami AI Assistant i Live Support.

Po utworzeniu projektu w portalu WebSpeaker kolejnym krokiem jest osadzenie widgetu na Twojej stronie. Widget ładowany jest za pomocą krótkiego fragmentu kodu JavaScript, który wklejasz do HTML swojej strony. Ten przewodnik opisuje, jak pobrać fragment kodu, zainstalować go oraz obsłużyć integrację ze zgodami na pliki cookie.

Pobierz fragment kodu

Zaloguj się do portal.webspeaker.pro, przejdź do swojego projektu i otwórz sekcję Integracja w zakładce Ustawienia widgetu. Znajdziesz tam gotowy fragment kodu zawierający unikalny klucz dostępu Twojego projektu. Fragment wygląda podobnie do tego:

<script
  src="https://chatbot.webspeaker.pro/widget-YOUR_ACCESS_KEY.js"
  defer
></script>

Skopiuj cały fragment kodu dokładnie tak, jak jest pokazany. Klucz dostępu identyfikuje Twój projekt i zapewnia, że widget załaduje właściwą konfigurację, treści i ustawienia wyglądu.

Jeśli podejrzewasz, że Twój klucz dostępu został naruszony lub jest używany na nieautoryzowanych stronach, możesz wygenerować go ponownie w portalu. Po regeneracji zaktualizuj fragment kodu na swojej stronie, podając nowy klucz. Stary klucz przestanie działać natychmiast.

Dodaj fragment kodu do swojej strony

Wklej fragment kodu do HTML swojej strony, najlepiej tuż przed zamykającym znacznikiem </body>. Umieszczenie go na końcu sekcji body sprawia, że widget ładuje się po zawartości strony, nie wpływając na początkową wydajność renderowania. Atrybut defer pozwala skryptowi ładować się bez blokowania parsowania HTML.

Jeśli Twoja strona korzysta z systemu zarządzania treścią (CMS) lub generatora stron statycznych, poszukaj opcji dodawania własnych skryptów do stopki lub sekcji body. Większość platform udostępnia dedykowane pole do tego celu. W przypadku aplikacji SPA zbudowanych na frameworkach takich jak React, Angular czy Vue, możesz dodać fragment kodu do pliku index.html.

Jeśli Twoja witryna korzysta z menedżera zgód na pliki cookie, możesz zintegrować go z widgetem WebSpeaker. Widget nasłuchuje zdarzeń zgody i odpowiednio dostosowuje swoje zachowanie. Gdy zgoda nie została udzielona, funkcje śledzenia kontaktów są wyłączone w celu zapewnienia zgodności z RODO. Po wyrażeniu zgody przez użytkownika widget aktywuje pełną funkcjonalność, w tym identyfikację i śledzenie kontaktów.

Widget nasłuchuje standardowych zdarzeń zgody na stronie. Zapoznaj się z dokumentacją swojej platformy do zarządzania zgodami, aby dowiedzieć się, jak wysyłane są zdarzenia zgody, i upewnij się, że skrypt widgetu WebSpeaker jest przypisany do odpowiedniej kategorii zgód (zazwyczaj „funkcjonalność” lub „analityka”).

Fragment kodu w sekcji 3 strony Integracja zawiera funkcję webspeakerSetConsent, którą możesz wywołać, aby przekazać preferencje zgody do widgetu. Przyjmuje dwie flagi:

webspeakerSetConsent({ allowTelemetry: true, allowProfiling: false });

allowTelemetry — po włączeniu widget wysyła raporty o błędach do serwera WebSpeaker. Każdy raport zawiera bieżący adres URL strony, ciąg user-agent przeglądarki oraz identyfikator wersji widgetu. Dane te pomagają zespołowi WebSpeaker diagnozować problemy z integracją na Twojej stronie. Po wyłączeniu błędy widgetu są zapisywane jedynie w konsoli przeglądarki i nie są przesyłane na serwer. Uwaga: ustawienie allowProfiling na true włącza również telemetrię.

allowProfiling — po włączeniu widget tworzy trwały identyfikator kontaktu przechowywany w przeglądarce użytkownika (localStorage) i wysyła go wraz z każdą wiadomością czatu. Oprócz identyfikatora kontaktu z każdą wiadomością zbierane są następujące metadane: język przeglądarki, user-agent, bieżący adres URL strony, typ urządzenia (komputer / tablet / telefon) oraz wymiary ekranu (rozdzielczość, rozmiar okna, współczynnik pikseli urządzenia). Dane te są wykorzystywane w portalu zarządzania do identyfikacji powracających użytkowników i dostarczania kontekstu agentom wsparcia. Po wyłączeniu wiadomości czatu są wysyłane anonimowo, bez identyfikatora kontaktu i metadanych urządzenia.

Dziennik błędów

Dziennik błędów w sekcji Integracja ustawień projektu rejestruje wszystkie problemy napotkane przez widget na Twojej stronie. Obejmuje to błędy ładowania, problemy z konfiguracją, awarie sieciowe i inne błędy runtime. Każdy wpis zawiera znacznik czasu, typ błędu, opis oraz adres URL strony, na której błąd wystąpił. Regularne przeglądanie dziennika błędów pomaga szybko identyfikować i rozwiązywać problemy, które mogą wpływać na doświadczenie odwiedzających.

Weryfikacja instalacji

Po dodaniu fragmentu kodu otwórz swoją stronę w przeglądarce i sprawdź, czy widget WebSpeaker się wyświetla — zazwyczaj jako pływający przycisk czatu w skonfigurowanym rogu strony. Kliknij przycisk, aby otworzyć widget i upewnić się, że ładuje się poprawnie. Jeśli widget nie pojawia się, sprawdź konsolę narzędzi deweloperskich przeglądarki pod kątem błędów. Typowe problemy to nieprawidłowy klucz dostępu, ograniczenia domenowe blokujące żądanie lub nieprawidłowe umieszczenie fragmentu kodu w HTML. Możesz również sprawdzić dziennik błędów widgetu w portalu w sekcji Integracja, aby zobaczyć zgłoszone problemy.