Jak dodać chatbota AI Asyntai do WordPress

Instrukcja krok po kroku dla stron WordPress

Platforma:

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego panelu Asyntai i przewiń w dół do sekcji "Embed Code". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Krok 2: Wybierz metodę instalacji

Istnieje kilka sposobów dodania widgetu czatu do WordPress. Wybierz metodę, która najlepiej Ci odpowiada:

Metoda 1: Użycie wtyczki (zalecane)

Najłatwiejszym sposobem dodania widżetu czatu jest darmowa wtyczka "WPCode" (wcześniej nazywana "Insert Headers and Footers").

Użycie WPCode (darmowe)

Przejdź do Plugins → Add Plugin w panelu administracyjnym WordPress
Wyszukaj "WPCode" i zainstaluj
Aktywuj wtyczkę
Przejdź do Code Snippets → Header & Footer
Wklej kod osadzania Asyntai w sekcji "Footer"
Kliknij "Save Changes"

Dlaczego warto użyć wtyczki? Użycie wtyczki zapewnia, że kod pozostanie na miejscu nawet po aktualizacji lub zmianie motywu WordPress.

Metoda 2: Edycja plików motywu

Możesz dodać kod bezpośrednio do plików motywu. Lokalizacja edytora plików motywu zależy od wersji WordPress i typu motywu.

Dla motywów klasycznych

Przejdź do Appearance → Theme File Editor w panelu administracyjnym WordPress
Wybierz aktywny motyw z listy rozwijanej (jeśli nie jest już wybrany)
Znajdź i kliknij footer.php na liście plików po prawej stronie
Przewiń na dół i znajdź zamykający znacznik </body>
Wklej kod osadzania Asyntai tuz przed znacznikiem </body>
Kliknij "Update File"

Dla motywów blokowych (motywy FSE)

Motywy blokowe (takie jak Twenty Twenty-Four i inne motywy Full Site Editing) nie mają pliku footer.php ani znacznika </body> w plikach motywu. W przypadku motywu blokowego użyj metody z wtyczką (WPCode), która działa ze wszystkimi typami motywów.

Ważne: Aktualizacje motywu nadpiszą Twoje zmiany. Aby uzyskać trwałe rozwiązanie, użyj motywu potomnego lub metody z wtyczką.

Metoda 3: Użycie Elementor

Jeśli korzystasz z Elementor, możesz dodać kod za pomocą funkcji własnego kodu Elementor.

Elementor Pro

Przejdź do Elementor → Custom Code
Kliknij "Add New"
Nadaj nazwę, np. "Asyntai Chatbot"
Ustaw Location na "<body> – End"
Wklej swój kod osadzania Asyntai
Ustaw warunki wyświetlania na "Entire Site"
Kliknij "Publish"

Elementor Free

Jeśli korzystasz z darmowej wersji Elementor, użyj metody z wtyczka opisanej powyżej, ponieważ wstrzykiwanie własnego kodu wymaga Elementor Pro.

Krok 3: Weryfikacja instalacji

Po dodaniu kodu odwiedź swoja stronę w nowej karcie przeglądarki lub w oknie incognito. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu witryny. Kliknij go, aby upewnić sie, ze otwiera sie i działa prawidlowo.

Nie widzisz widgetu? Wyczyść pamięć podręczna przeglądarki oraz wszystkie wtyczki buforujace WordPress. Jeśli korzystasz z wtyczki buforujacej, takiej jak WP Rocket lub W3 Total Cache, wyczyść pamięć podręczna po dodaniu kodu.

Dodawanie paska wyszukiwania AI

Pasek wyszukiwania AI to osobny widżet z własnym kodem. Dodaj go obok czatu albo samodzielnie. Wymaga planu Standard lub wyższego: w niższym pasek się pojawia, ale nie zwraca wyników.

Dodaj atrybut data-replace do znacznika script, a pasek zajmie miejsce tego z Twojego motywu. Dodaj go za pomocą tej samej wtyczki do nagłówka i stopki co w przypadku kodu czatu, na przykład WPCode. Skrypt nie musi znajdować się w pobliżu pola wyszukiwania, więc nie musisz edytować żadnego pliku motywu.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

Przeczytaj pełny przewodnik po pasku wyszukiwania AI

Dokumentacja