Konfiguracja i wdrożenie widgetu czatbota

0

Przegląd procesu wdrożenia

Wdrożenie widgetu czatbota na stronie internetowej to proces, który składa się z kilku głównych etapów:

Utworzenie chatbota na platformie ChatbotAssistant - stworzenie i konfiguracja chatbota, który będzie obsługiwał komunikację z użytkownikami.
Konfiguracja wyglądu widgetu - dostosowanie kolorystyki, pozycji, animacji i innych aspektów wizualnych widgetu.
Wygenerowanie kodu do osadzenia - uzyskanie kodu HTML/JavaScript, który należy umieścić na stronie.
Umieszczenie kodu na stronie - dodanie wygenerowanego kodu do kodu HTML strony internetowej.
Testowanie i weryfikacja - sprawdzenie poprawności działania widgetu na stronie.

Czas realizacji: Cały proces wdrożenia zajmuje zwykle od 10 do 30 minut, w zależności od Twojego doświadczenia z edycją kodu HTML. Poniższa instrukcja przeprowadzi Cię krok po kroku przez wszystkie etapy.

Wskazówka: Przed rozpoczęciem procesu wdrożenia, upewnij się, że masz dostęp do:

Konta na platformie ChatbotAssistant z aktywną subskrypcją
Możliwości edycji kodu HTML Twojej strony internetowej (np. dostęp do panelu administracyjnego, FTP lub systemu zarządzania treścią)
Podstawowej wiedzy na temat struktury kodu HTML (opcjonalnie)

1

Konfiguracja chatbota na platformie ChatbotAssistant

W pierwszym kroku należy utworzyć i skonfigurować nowego chatbota na platformie ChatbotAssistant.

Szczegółowa instrukcja:

Zaloguj się na swoje konto na platformie ChatbotAssistant.
Przejdź do sekcji Dashboard w panelu nawigacyjnym.
Kliknij przycisk Utwórz nowego chatbota
Wybierz opcję Widget na stronę jako platformę dla chatbota.
Wypełnij formularz tworzenia chatbota, wprowadzając następujące dane:
- Nazwa chatbota - wprowadź nazwę chatbota, którą będą widzieli użytkownicy np. Obsługa Klienta
- Opis (opcjonalne) - pomoże Ci odnaleźć właściwego chatbota
- Informacje o firmie - wprowadź szczegółowe informacje o Twojej firmie, produktach, usługach, cenach, godzinach otwarcia itp. Im więcej informacji podasz, tym lepiej chatbot będzie odpowiadał na pytania klientów.
- Dozwolone domeny - podaj domenę twojej strony internetowej np. example.com (bez https://). W przypadku posiadania więcej niż jednej domeny bądź subdomen, wprowadź wszystkie oddzielając je przecinkiem. (NIEZALECANE) Pozostaw puste pole, aby zezwolić na wszystkie domeny.
Kliknij przycisk Utwórz Chatbota, aby zapisać konfigurację.

Ekran wyboru typu chatbota z zaznaczoną opcją "Widget na stronę"

Formularz podstawowej konfiguracji chatbota z polami nazwy i opisu

Wskazówka: Uzupełnienie informacji o firmie w sposób kompletny i szczegółowy jest kluczowym czynnikiem decydującym o tym czy klient uzyska poprawną i szczegółową odpowiedź na pytanie.

Konfiguracja dozwolonych domen, na których chatbot może działać

Wskazówka: Podanie domen stron internetowych na których będzie działał chatbot jest istotnym zabezpieczeniem przed niepowołanym użyciem chatbota przez inne strony.

2

Konfiguracja wyglądu widgetu

Po utworzeniu chatbota możesz przejść do konfiguracji wyglądu widgetu. Platforma ChatbotAssistant oferuje przyjazny interfejs do dostosowania wyglądu widgetu bez konieczności znajomości programowania.

Dostęp do edytora widgetu:

W panelu Dashboard wybierz utworzonego chatbota z listy.
Przejdź do sekcji Opcje a następnie Kod do osadzenia.
Zobaczysz interfejs edytora widgetu podzielony na sekcje:
- Kod do osadzenia na stronie – wygenerowany skrypt z atrybutami konfiguracyjnymi oraz edytor kodu umożliwiający wprowadzenie zmian bezpośrednio w kodzie osadzenia.
- Instrukcja osadzania – szczegółowe kroki instalacji oraz przydatne wskazówki.
- Edytor wyglądu widgetu – panel personalizacji wizualnej z zakładkami:
  - Wygląd – wybór kolorów, pozycji i rozmiaru, ikony i zaokrąglenia rogów
  - Animacje – konfiguracja efektów otwierania i zamykania widgetu oraz wskaźnika pisania
  - Treść – edycja tytułu, wiadomości powitalnej i placeholdera
  - Zaawansowane – dodatkowe opcje oraz ustawienia rozmiaru okna chatbota
- Najlepsze praktyki – rekomendacje, które pomogą zoptymalizować działanie i wygląd chatbota:

Widok interfejsu edytora widgetu: po lewej panel konfiguracji z kartami, po prawej podgląd kodu i instrukcje

Podgląd aktywnego widgetu czatbota w prawym dolnym rogu (lub zgodnie z wybraną pozycją)

Konfiguracja wyglądu (zakładka "Wygląd"):

W zakładce "Wygląd" możesz dostosować następujące parametry:

Kolorystyka

Dostosuj kolory widgetu do identyfikacji wizualnej Twojej strony:

Kolor podstawowy - główny kolor widgetu, używany dla przycisków, nagłówków i wyróżnień.
Kolor drugorzędny - kolor uzupełniający, stosowany dla elementów drugorzędnych.
Motyw - wybierz między jasnym lub ciemnym.

Panel konfiguracji kolorystyki z wyborem kolorów i motywu

Wygląd widgetu

Konfiguruj pozycję i wymiary przycisku widgetu:

Pozycja widgetu - wybierz jeden z czterech rogów ekranu, w którym pojawi się przycisk czatbota.
Rozmiar przycisku - dostosuj wielkość przycisku uruchamiającego czatbota (od 40 do 90 pikseli).
Zaokrąglenie rogów - wybierz styl zaokrąglenia rogów (małe, standardowe, duże).

Panel konfiguracji pozycji i rozmiaru widgetu

Ikona

Wybierz ikonę dla przycisku czatbota:

Typ ikony - wybierz jedną z dostępnych ikon: Chat, Message, Headset, Support lub Robot.
Rozmiar ikony - określ czy ikona ma być mała, standardowa czy duża w stosunku do przycisku.

Panel wyboru ikon widgetu z dostępnymi opcjami

Konfiguracja animacji (zakładka "Animacje"):

W zakładce "Animacje" możesz skonfigurować efekty wizualne widgetu:

Animacje

Typ animacji - wybierz sposób pojawiania się i znikania okna czatbota: Fade (zanikanie), Scale (skalowanie), Slide (przesuwanie), Bounce (odbijanie) lub brak animacji.
Szybkość animacji - ustaw czas trwania animacji (od 150 do 1000 milisekund).

Panel konfiguracji typów i szybkości animacji

Wskaźnik pisania

Styl wskaźnika pisania - wybierz wizualizację aktywności chatbota podczas generowania odpowiedzi: Kropki, Pulsujący, Skaczący lub Paski.

Panel konfiguracji stylu wskaźnika pisania

Konfiguracja treści (zakładka "Treść"):

W zakładce "Treść" możesz dostosować teksty wyświetlane w widgecie:

Treść wiadomości

Tytuł nagłówka - nazwa wyświetlana w nagłówku okna czatbota.
Wiadomość powitalna - automatyczna wiadomość wyświetlana po uruchomieniu czatbota.
Placeholder pola wiadomości - tekst podpowiedzi w polu wprowadzania wiadomości.

Panel konfiguracji tekstów widgetu: tytuł, wiadomość powitalna, itp.

Ustawienia zaawansowane (zakładka "Zaawansowane"):

W zakładce "Zaawansowane" znajdziesz dodatkowe opcje konfiguracyjne:

Zachowanie

Automatycznie otwórz chatbota po 30 sekundach - włącz tę opcję, aby chatbot automatycznie otwierał się po określonym czasie.
Efekty dźwiękowe - włącz dźwięki powiadomień dla nowych wiadomości.

Panel konfiguracji zachowania chatbota z opcjami automatycznego otwierania i efektów dźwiękowych

Wymiary

Szerokość okna czatu - szerokość okna czatbota w pikselach (od 280 do 500 pikseli).
Wysokość okna czatu - wysokość okna czatbota w pikselach (od 400 do 700 pikseli).

Panel konfiguracji szerokości i wysokości okna czatu

Podgląd na żywo: Podczas konfiguracji możesz obserwować zmiany w czasie rzeczywistym, ponieważ widget czatbota jest aktywny w rogu ekranu. Kliknij ikonę chatbota, aby przetestować jego działanie.

Edycja kodu widgetu:

Dla zaawansowanych użytkowników, platforma oferuje możliwość bezpośredniej edycji kodu widgetu:

Kliknij przycisk Edytuj kod nad polem z kodem osadzenia.
Wprowadź zmiany bezpośrednio w kodzie.
Kliknij Zatwierdź zmiany, aby zastosować wprowadzone modyfikacje.
Jeśli chcesz anulować edycję, kliknij Anuluj edycję.

Interfejs edycji kodu widgetu z aktywnym trybem edycji i widocznymi przyciskami akcji

Uwaga: Edycja kodu widgetu wymaga podstawowej znajomości HTML i JavaScript. Nieprawidłowe zmiany mogą spowodować niepoprawne działanie widgetu.

Automatyczne zapisywanie: Wszystkie zmiany wprowadzane w konfiguracji są automatycznie zapisywane w przeglądarce. Możesz w dowolnym momencie przywrócić domyślne ustawienia za pomocą przycisku "Resetuj ustawienia".

3

Umieszczenie kodu na stronie

Po zakończeniu konfiguracji widgetu, ostatnim krokiem jest umieszczenie wygenerowanego kodu na Twojej stronie internetowej.

Kopiowanie kodu do osadzenia:

W edytorze widgetu znajdź pole z kodem do osadzenia.
Kliknij przycisk Kopiuj w prawym górnym rogu pola z kodem.
Zobaczysz komunikat potwierdzający skopiowanie kodu do schowka.

Umieszczenie kodu na stronie:

Sposób umieszczenia kodu na stronie zależy od platformy, na której działa Twoja strona internetowa:

HTML (edycja bezpośrednia)

Otwórz plik HTML Twojej strony w edytorze kodu.
Znajdź znacznik zamykający </body> (tuż przed końcem dokumentu).
Wklej skopiowany kod bezpośrednio przed tym znacznikiem.
Zapisz plik i przeładuj stronę w przeglądarce.

<!-- Reszta kodu HTML Twojej strony -->

<script src="https://example.com/static/js/chat-widget.js"
    data-chatbot-id="abcd1234"
    data-api-url="https://example.com"
    data-position="bottom-right"
    data-color="#4361ee"
    data-secondary-color="#3a56d4"
    data-theme="light"
    ... inne atrybuty konfiguracyjne ...>
</script>
<div id="ai-chatbot-widget"></div>

</body>
</html>
                            

WordPress

Dla stron opartych na WordPress oferujemy dedykowany plugin, który doda kod chatbota do Twojej strony.

Szczegółowe instrukcje instalacji i konfiguracji pluginu znajdziesz w naszej instrukcji dla WordPress.

Wix

Zaloguj się do panelu Wix i wybierz swoją stronę.
Kliknij "Ustawienia" w menu bocznym.
Wybierz "Personalizacja strony" > "Kod niestandardowy".
Kliknij przycisk "+ Dodaj kod niestandardowy".
Nadaj nazwę kodowi (np. "Widget Chatbota").
Wklej skopiowany kod do pola tekstowego.
Wybierz opcję "Załaduj w stopce" i zaznacz "Zastosuj do wszystkich stron".
Kliknij "Zastosuj", a następnie "Zapisz".

Shopify

Zaloguj się do panelu administracyjnego Shopify.
Przejdź do "Sklep online" > "Motywy".
Kliknij przycisk "Akcje" obok aktywnego motywu i wybierz "Edytuj kod".
Znajdź plik theme.liquid lub inny odpowiedni plik szablonu.
Wklej skopiowany kod przed znacznikiem </body>.
Kliknij "Zapisz" i odśwież stronę.

Google Tag Manager

Zaloguj się do konta Google Tag Manager.
Wybierz odpowiedni kontener.
Kliknij "Tagi" w menu nawigacyjnym, a następnie "Nowy".
Nadaj nazwę tagowi (np. "ChatbotAssistant Widget").
W konfiguracji tagu wybierz "Tag HTML niestandardowy".
Wklej skopiowany kod do pola tekstowego.
W sekcji "Wyzwalanie" wybierz lub utwórz wyzwalacz "All Pages".
Zapisz tag i opublikuj zmiany w kontenerze.

Weryfikacja wdrożenia:

Otwórz swoją stronę internetową w przeglądarce (najlepiej w trybie incognito lub w nowej karcie).
Sprawdź, czy widget chatbota jest widoczny w odpowiednim rogu strony.
Kliknij ikonę chatbota, aby upewnić się, że okno czatu otwiera się poprawnie.
Wyślij testową wiadomość, aby sprawdzić poprawność komunikacji z chatbotem.
Sprawdź działanie widgetu na różnych urządzeniach (komputer, tablet, telefon) i w różnych przeglądarkach.

Pamięć podręczna przeglądarki: Jeśli nie widzisz widgetu po wdrożeniu, może to być spowodowane pamięcią podręczną przeglądarki. Spróbuj wyczyścić pamięć podręczną lub otworzyć stronę w trybie incognito.

Testowanie na stronach lokalnych: Jeśli testujesz widget na lokalnym serwerze (np. localhost), upewnij się, że adres ten jest dodany do listy dozwolonych domen w konfiguracji chatbota.

Rozwiązywanie problemów:

Widget nie jest widoczny

Jeśli widget nie pojawia się na stronie, sprawdź:

Czy kod został poprawnie wklejony przed znacznikiem </body>.
Czy domena Twojej strony znajduje się na liście dozwolonych domen w konfiguracji chatbota.
Czy w konsoli przeglądarki (F12) nie ma błędów związanych z ładowaniem skryptu widgetu.
Czy nie ma konfliktów z innymi skryptami na stronie (np. inne chatboty, blokery reklam).
Czy ID chatbota w kodzie jest poprawne.

Widget się pojawia, ale nie działa poprawnie

Jeśli widget jest widoczny, ale nie działa prawidłowo:

Sprawdź, czy adres API w kodzie jest poprawny (atrybut data-api-url).
Upewnij się, że chatbot jest aktywny na platformie ChatbotAssistant.
Sprawdź, czy nie ma problemów z połączeniem sieciowym.
Zweryfikuj, czy w konsoli przeglądarki nie ma błędów związanych z działaniem widgetu.
Spróbuj wyczyścić pamięć podręczną przeglądarki i ciasteczka.

Problemy z stylizacją widgetu

Jeśli wygląd widgetu nie jest zgodny z konfiguracją:

Upewnij się, że zmiany w konfiguracji zostały poprawnie zapisane.
Sprawdź, czy w kodzie osadzonym na stronie są wszystkie atrybuty konfiguracyjne.
Zweryfikuj, czy nie ma stylów CSS na stronie, które nadpisują style widgetu.
Spróbuj zresetować ustawienia widgetu do wartości domyślnych, a następnie ponownie dostosować wygląd.

4

Rate Limiting

Rate limiting to mechanizm ograniczający liczbę wiadomości, które użytkownik może wysłać do chatbota w określonym czasie. Chroni to system przed nadmiernym obciążeniem i zapewnia sprawiedliwe wykorzystanie zasobów.

Jak działa Rate Limiting:

Limit per użytkownik: Każdy użytkownik ma swój własny limit (nie dzielony z innymi)
Okno czasowe: 60 sekund
Reset automatyczny: Licznik resetuje się co minutę
Konfigurowalny limit: Każdy użytkownik może mieć różny limit ustawiony przez administratora

Co to oznacza dla użytkowników:

Gdy użytkownik osiągnie swój limit wiadomości w ciągu minuty, chatbot wyświetli mu komunikat informujący o konieczności odczekania przed wysłaniem kolejnej wiadomości. Po upływie minuty od pierwszej wiadomości w danym oknie czasowym, licznik automatycznie się resetuje.

Rate limitng a jakość obsługi: Rate limiting nie wpływa na jakość obsługi użytkowników w normalnym użytkowaniu. Standardowe limity są ustawione na poziomie umożliwiającym naturalne rozmowy, chroniąc jednocześnie przed automatycznymi atakami lub nadmiernym użytkowaniem systemu.

Zwiększenie limitów rate limitingu:

Jeśli standardowe limity rate limitingu nie są wystarczające dla Twojego przypadku użycia (np. w przypadku chatbotów o bardzo wysokim ruchu lub specjalistycznych zastosowań), możesz poprosić o ich zwiększenie.

Jak zwiększyć limity: W celu zwiększenia limitów rate limitingu dla Twojego chatbota, skontaktuj się z administracją strony ChatbotAssistant. W wiadomości opisz swój przypadek użycia, oczekiwany ruch oraz uzasadnienie dla wyższych limitów.

🍪 Informacja o plikach cookies

ChatbotAssistant