Jak dodać chatbota do WordPressa (bez kodu)

WordPress napędza ponad 40% wszystkich stron internetowych, więc jest spora szansa, że Twoja witryna też na nim działa. Dodanie chatbota do WordPressa jest proste. Nie potrzebujesz do tego programisty, niestandardowej wtyczki ani żadnego doświadczenia w programowaniu. Ten przewodnik opisuje trzy metody — od najprostszej wtyczki po instalację na poziomie motywu — i omawia pułapki, w które najczęściej wpadają użytkownicy.

Zanim zaczniesz

Zanim dodasz chatbota do swojej witryny WordPress, potrzebujesz dwóch rzeczy.

1. Konta Agentkit z wytrenowanym chatbotem.

Jeśli jeszcze tego nie zrobiłeś, zarejestruj się za darmo i utwórz swojego pierwszego chatbota. Wytrenuj go na treści swojej witryny, stronach FAQ, dokumentacji lub innych materiałach, o które pytają Twoi odwiedzający. Szczegóły znajdziesz w przewodniku po trenowaniu.

2. Tagu skryptu do osadzenia.

Gdy Twój chatbot jest już wytrenowany, przejdź do zakładki Publikuj w panelu Agentkit. Zobaczysz tag skryptu podobny do tego:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Skopiuj ten fragment kodu. Wkleisz go do WordPressa, korzystając z jednej z trzech metod opisanych poniżej.

Porównanie metod

Wybierz metodę dopasowaną do swojego poziomu zaawansowania. Metoda z wtyczką jest zalecana dla większości użytkowników, bo jest najprostsza i najbardziej odporna na aktualizacje motywu.

Metoda 1: podejście z wtyczką (zalecane)

To najłatwiejsza metoda. Instalujesz bezpłatną wtyczkę, która pozwala dodawać fragmenty kodu do witryny bez edytowania plików motywu.

Korzystanie z WPCode (Insert Headers and Footers)

WPCode to bezpłatna wtyczka WordPress z ponad 2 milionami instalacji. Pozwala dodać kod do nagłówka lub stopki witryny bez ingerencji w pliki motywu.

Krok 1: Zainstaluj wtyczkę

1. W panelu administracyjnym WordPress przejdź do Wtyczki, a następnie Dodaj nową.
2. Wyszukaj „WPCode” (pełna nazwa to WPCode - Insert Headers, Footers, and Code Snippets).
3. Kliknij Zainstaluj teraz, a następnie Aktywuj.

Krok 2: Dodaj fragment kodu chatbota

1. W panelu bocznym WordPress przejdź do Code Snippets, a następnie Header & Footer.
2. Znajdź sekcję Footer.
3. Wklej tag skryptu do osadzenia chatbota Agentkit w polu Footer.
4. Kliknij Save Changes.

To wszystko. Widżet chatbota pojawi się teraz na każdej stronie Twojej witryny WordPress.

Krok 3: Zweryfikuj działanie

1. Otwórz swoją witrynę w nowej karcie przeglądarki (nie w panelu administracyjnym WordPress).
2. Powinieneś zobaczyć dymek czatu w prawym dolnym rogu.
3. Kliknij go i wyślij testową wiadomość, aby potwierdzić, że chatbot poprawnie odpowiada.

Korzystanie z Insert Headers and Footers (alternatywa)

Jeśli wolisz inną wtyczkę, „Insert Headers and Footers” od WPBeginner działa w ten sam sposób:

1. Zainstaluj i aktywuj wtyczkę.
2. Przejdź do Ustawienia, a następnie Insert Headers and Footers.
3. Wklej skrypt do osadzenia w polu Scripts in Footer.
4. Zapisz.

Kontrolowanie, na których stronach wyświetla się chatbot

Zarówno WPCode, jak i podobne wtyczki obsługują logikę warunkową. Jeśli chcesz, aby chatbot pojawiał się tylko na wybranych stronach:

1. W WPCode, zamiast korzystać z sekcji Header & Footer, utwórz nowy Code Snippet.
2. Ustaw typ kodu na „HTML Snippet”.
3. Wklej swój skrypt do osadzenia.
4. W sekcji Insertion wybierz „Site Wide Footer”.
5. W sekcji Smart Conditional Logic dodaj warunki, na przykład:
   • Strona to „Contact”, „Support” lub „Pricing”
   • Typ wpisu to „Product”
   • Adres URL zawiera „/help”
6. Zapisz i aktywuj fragment kodu.

Dzięki temu masz precyzyjną kontrolę bez konieczności tworzenia wielu chatbotów.

Metoda 2: blok HTML niestandardowy (konkretne strony)

Jeśli chcesz mieć chatbota tylko na jednej lub dwóch stronach i nie chcesz instalować wtyczki, możesz skorzystać z edytora bloków WordPress.

Krok 1: Edytuj stronę, na której chcesz umieścić chatbota.

Krok 2: Dodaj blok HTML niestandardowy na dole treści strony.

Krok 3: Wklej skrypt do osadzenia Agentkit w bloku:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Krok 4: Zaktualizuj lub opublikuj stronę.

Chatbot pojawi się wyłącznie na tej konkretnej stronie. Powtórz dla kolejnych stron w miarę potrzeb.

Ograniczenia tej metody:

• Skrypt ładuje się jako część treści strony, więc może wczytywać się nieco później niż w przypadku umieszczenia w stopce.
• Jeśli chcesz mieć chatbota na wielu stronach, ta metoda staje się żmudna. Skorzystaj wtedy z metody z wtyczką.
• Niektóre kreatory stron (Elementor, Divi) mogą usuwać tagi skryptów z bloków HTML. Jeśli tak się stanie, użyj metody z wtyczką.

Metoda 3: stopka motywu (footer.php)

Ta metoda dodaje chatbota na poziomie motywu. To najbardziej bezpośrednie podejście, ale wymaga edycji plików motywu.

Ważne: Jeśli edytujesz plik footer.php swojego motywu bezpośrednio, Twoje zmiany zostaną utracone przy aktualizacji motywu. Użyj motywu potomnego, aby zmiana była trwała.

Z motywem potomnym

Krok 1: Jeśli nie masz jeszcze motywu potomnego, utwórz go. Większość twórców motywów udostępnia instrukcje. Alternatywnie skorzystaj z wtyczki „Child Theme Configurator”.

Krok 2: W panelu administracyjnym WordPress przejdź do Wygląd, a następnie Edytor plików motywu.

Krok 3: Wybierz swój motyw potomny z listy rozwijanej.

Krok 4: Otwórz footer.php. Jeśli nie istnieje w Twoim motywie potomnym, utwórz go, kopiując footer.php z motywu nadrzędnego.

Krok 5: Znajdź zamykający tag </body>. Wklej skrypt do osadzenia tuż przed nim:

<!-- Agentkit Chatbot -->
<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>
</body>
</html>

Krok 6: Zapisz plik.

Bez motywu potomnego (niezalecane)

Jeśli edytujesz footer.php motywu nadrzędnego bezpośrednio, wykonaj te same kroki, ale pamiętaj, że aktualizacja motywu nadpisze Twoje zmiany. Jeśli zdecydujesz się na tę drogę, zachowaj kopię zmodyfikowanego pliku footer.php, aby móc go ponownie zastosować po aktualizacji.

Testowanie instalacji

Po dodaniu chatbota dowolną metodą przejdź przez tę listę kontrolną.

Podstawowa weryfikacja

Lista kontrolna czyszczenia pamięci podręcznej

Buforowanie to najczęstszy powód, dla którego ktoś dodaje skrypt chatbota, a mimo to go nie widzi na swojej witrynie. Wyczyść pamięć podręczną w tej kolejności:

1. Wtyczka pamięci podręcznej WordPress (WP Super Cache, W3 Total Cache, WP Rocket, LiteSpeed Cache): przejdź do ustawień wtyczki i wyczyść całą pamięć podręczną.
2. Pamięć podręczna na poziomie hostingu (SiteGround, WP Engine, Cloudflare): sprawdź w panelu hostingu opcję czyszczenia pamięci podręcznej.
3. Pamięć podręczna CDN (Cloudflare, StackPath, Fastly): jeśli korzystasz z CDN, wyczyść pamięć podręczną również tam.
4. Pamięć podręczna przeglądarki: otwórz swoją witrynę w oknie incognito/prywatnym, aby pominąć lokalną pamięć podręczną przeglądarki.

Jeśli chatbot nadal się nie pojawia po wyczyszczeniu wszystkich pamięci podręcznych, sprawdź konsolę deweloperską przeglądarki (F12 na komputerze) pod kątem błędów JavaScript.

Rozwiązywanie typowych problemów

Chatbot się nie pojawia

Przyczyna: buforowanie. To najczęstszy problem. Postępuj zgodnie z powyższą listą kontrolną czyszczenia pamięci podręcznej.

Przyczyna: umiejscowienie tagu skryptu. Upewnij się, że skrypt znajduje się wewnątrz tagu <body>, a nie <head>. Niektóre wtyczki do nagłówków/stopek domyślnie umieszczają kod w <head>.

Przyczyna: Content Security Policy. Niektóre wtyczki zabezpieczające dodają nagłówki Content Security Policy blokujące zewnętrzne skrypty. Sprawdź, czy Twoja wtyczka zabezpieczająca (Wordfence, Sucuri, iThemes Security) ma ustawienia CSP, i dodaj cdn.agentkit.ai do dozwolonych źródeł skryptów.

Przyczyna: konflikt z kreatorem stron. Niektóre kreatory stron usuwają tagi skryptów z obszarów treści. Zamiast bloku HTML niestandardowego użyj metody z wtyczką (metoda 1).

Chatbot się pojawia, ale nie odpowiada

Przyczyna: chatbot nie jest wytrenowany. Przejdź do panelu Agentkit i sprawdź, czy Twój chatbot ma dane treningowe. Niewytrenowany chatbot nie ma z czego czerpać.

Przyczyna: nieprawidłowe ID chatbota. Sprawdź, czy wartość data-chatbot w Twoim kodzie do osadzenia zgadza się z ID widocznym w panelu Agentkit.

Przyczyna: ograniczenie domeny. Jeśli skonfigurowałeś ograniczenia domen w ustawieniach chatbota, upewnij się, że Twoja domena WordPress znajduje się na liście dozwolonych.

Chatbot koliduje z inną wtyczką czatu

Jeśli korzystasz z innej wtyczki czatu na żywo lub chatbota (Tidio, Intercom, Drift, Crisp), oba widżety mogą się nakładać lub ze sobą kolidować.

Rozwiązania:

• Usuń drugą wtyczkę czatu, jeśli w pełni przechodzisz na Agentkit.
• Jeśli potrzebujesz obu, użyj metody bloku HTML niestandardowego Agentkit, aby umieścić go tylko na stronach, gdzie druga wtyczka nie jest aktywna.
• Dostosuj pozycję widżetu w ustawieniach panelu Agentkit, jeśli oba mają współistnieć.

Wolne ładowanie strony po dodaniu chatbota

Widżet Agentkit ładuje się asynchronicznie (atrybut async w tagu skryptu), więc nie powinien blokować renderowania strony. Jeśli zauważysz spowolnienie:

1. Sprawdź, czy atrybut async znajduje się w Twoim tagu skryptu.
2. Uruchom test szybkości (Google PageSpeed Insights, GTmetrix) i sprawdź, czy skrypt Agentkit jest oznaczony jako problem. Asynchroniczne skrypty rzadko wpływają na wyniki wydajności.
3. Jeśli korzystasz z wtyczki wydajnościowej opóźniającej JavaScript, dodaj cdn.agentkit.ai do białej listy, aby nie kolidowała z ładowaniem widżetu.

Konfigurowanie chatbota dla WordPress

Gdy chatbot jest już aktywny na Twojej witrynie WordPress, rozważ poniższe kroki konfiguracyjne w panelu Agentkit.

Ograniczenie domeny

W Ustawieniach chatbota ustaw dozwoloną domenę na domenę swojej witryny WordPress (np. yourdomain.com). Zapobiega to skopiowaniu Twojego kodu do osadzenia i użyciu chatbota na innej witrynie.

Trenowanie na treści WordPress

Najlepszym źródłem do trenowania jest rzeczywista treść Twojej witryny. W Agentkit dodaj adres URL swojej witryny WordPress jako źródło treningowe, a system automatycznie zaindeksuje Twoje strony. Jeśli Twoja witryna korzysta z renderowania JavaScript, poradzi sobie z tym mechanizm przeszukiwania oparty na Firecrawl.

Skup trenowanie na:

• Stronach FAQ lub bazy wiedzy
• Stronach produktów lub usług
• Stronie z cennikiem
• Stronie „O nas”
• Dokumentacji wsparcia
• Wpisach na blogu odpowiadających na częste pytania

Pomiń trenowanie na stronach z ubogą treścią, stronach logowania lub stronach zabezpieczonych uwierzytelnianiem.

Pełny przewodnik po trenowaniu znajdziesz w artykule Jak wytrenować chatbota na treści swojej witryny.

Zbieranie leadów

Włącz akcję zbierania leadów, aby zbierać e-maile i imiona odwiedzających bezpośrednio w czacie. Zebrane leady pojawiają się w panelu Agentkit i mogą być wysyłane do Twojego CRM przez Zapier lub webhooki. Instrukcje konfiguracji znajdziesz w dokumentacji zbierania leadów.

Dokumentacja integracji specyficzna dla WordPress

Najbardziej aktualne instrukcje konfiguracji i funkcje specyficzne dla WordPress znajdziesz w dokumentacji integracji z WordPress.

Podsumowanie porównania metod

Dla większości użytkowników WordPress metoda z wtyczką jest właściwym wyborem. Jest szybka, bezpieczna i daje najwięcej elastyczności bez ryzyka dla plików motywu.

Kolejne kroki

Gdy chatbot działa już na Twojej witrynie WordPress, spędź kilka minut w Agentkit Playground, testując odpowiedzi. Jeśli chatbot nie odpowiada dobrze na konkretne tematy, dodaj więcej danych treningowych w tych obszarach. Playground pozwala szybko iterować bez konieczności testowania na żywej witrynie za każdym razem.

Następnie zbadaj możliwości połączenia chatbota z innymi narzędziami. Przewodnik po integracjach omawia przepływy pracy Zapier, webhooki i REST API dla bardziej zaawansowanych konfiguracji.

Zbuduj swojego chatbota za darmo →

Karta kredytowa nie jest wymagana.