Jak dodać chatbota AI do strony internetowej (na każdej platformie, krok po kroku)

Dodanie chatbota AI do strony składa się z dwóch części: zbudowania asystenta i umieszczenia go na stronie. W Nexoply pierwsza część odbywa się w panelu Nexoply, bez kodu i bez klucza AI, bo to Nexoply obsługuje AI. Druga część to jedna linijka kodu. Potrzebujesz:

• Konta Nexoply. Zarejestruj się za darmo: plan Darmowy obejmuje 50 rozmów miesięcznie, bez karty. Plany płatne zaczynają się od 19 $ miesięcznie, jak podaje strona z cennikiem.
• Dostępu do miejsca, w którym Twoja strona przyjmuje własny kod: ustawienia kodu w stopce w kreatorze stron, plików motywu albo szablonów HTML. W kreatorach hostowanych sprawdź, czy Twój plan pozwala na własny kod.
• Około pięciu minut oraz czasu na przejrzenie informacji o firmie.

Chatbot AI na stronie małej firmy jest tak przydatny, jak to, co wie. W Nexoply podajesz mu swoje usługi i ceny, FAQ, zasady, godziny otwarcia i obszary działania. Najszybciej jest skorzystać z importu ze strony: podajesz adres swojej strony, a Nexoply odczytuje Twoje publiczne strony (Darmowy 15, Starter 40, Business 100, Pro 200 na skanowanie), także te zbudowane w JavaScripcie, i proponuje usługi z cenami, FAQ, zasady, godziny otwarcia oraz dane kontaktowe. Przeglądasz propozycje; nic nie zostanie dodane, dopóki tego nie zatwierdzisz.

Od tej chwili asystent odpowiada tylko na podstawie tych informacji. Ma polecenie mówić, że czegoś nie wie, zamiast zgadywać, a każdą rozmowę możesz przejrzeć w panelu. Odwiedzający mogą pisać w dowolnym z 12 języków i dostają odpowiedzi w swoim. Nexoply nie jest skrzynką czatu na żywo dla konsultantów i sam nie przyjmuje rezerwacji ani płatności; jego przyciski mogą kierować odwiedzających na Twoją stronę rezerwacji, telefon lub WhatsApp. Pełny obraz znajdziesz na stronie jak działa Nexoply.

Otwórz stronę Chatbot w panelu (jeśli nie masz jeszcze chatbota, kliknij Utwórz chatbota) i skopiuj kod instalacyjny. Wygląda tak:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

YOUR-KEY zostaje zastąpione kluczem Twojego chatbota, który strona Chatbot wstawia za Ciebie. Klucz jest publiczny: nie jest hasłem i nie daje dostępu do Twojego konta; mówi tylko widżetowi, do której firmy należy. Aby zobaczyć asystenta przed zmianami na stronie, kliknij Otwórz stronę testową z Twoim chatbotem.

Na stronie, którą edytujesz jako pliki HTML, wklej kod w osobnej linii tuż nad zamykającym znacznikiem </body>:

    <!-- …treść Twojej strony… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   Znajdź wspólną stopkę

   Jeśli Twoje strony korzystają ze wspólnego szablonu lub pliku stopki (częste w stronach w PHP i generatorach stron statycznych), wklej kod tam jeden raz. W przeciwnym razie wklej go na każdej stronie, na której ma się pojawić przycisk czatu.

2. 2

   Wklej raz na stronę

   Wystarczy jedna kopia na stronę. Skrypt ładuje się asynchronicznie, więc umieszczenie go na końcu strony pozwala, by treść wyświetliła się najpierw.

3. 3

   Wgraj lub wdróż

   Zapisz pliki i wgraj lub wdróż je tak, jak zwykle aktualizujesz swoją stronę.

Każdy kreator stron i framework ma jedno miejsce na kod dla całej strony. Wklej tam tę samą linijkę; poradniki dla poszczególnych platform prowadzą przez to krok po kroku.

• Pakiet npm nie jest potrzebny. Widżet to zawsze ten sam znacznik script. Działa także wtedy, gdy znacznik jest dodawany z kodu, o ile zachowuje atrybut data-chatbot i src zawierające widget.js.
• Aplikacje jednostronicowe (SPA). Montuje się raz na stronie, poza głównym elementem Twojej aplikacji, zachowuje rozmowę podczas nawigacji i ponownie sprawdza reguły stron, gdy zmienia się adres URL. Dwukrotne załadowanie niczego nie psuje.
• Renderowanie po stronie serwera. Działa tylko w przeglądarce i nie dotyka znaczników generowanych przez framework, więc nie ma problemów z hydratacją.
• Content-Security-Policy. Jeśli Twoja strona ją wysyła, zezwól na https://nexoply.com w script-src, connect-src i img-src.
• Testy lokalne. Jeśli wypełnisz pole Zezwalaj tylko na tych stronach, dodaj lokalny host deweloperski z portem (np. localhost:3000) albo zostaw listę pustą na czas testów.

Otwórz opublikowaną stronę w nowym oknie prywatnym. W dolnym rogu pojawi się przycisk czatu. Zadaj prawdziwe pytanie, np. „Czy przyjeżdżacie w nagłych wypadkach w weekendy?” albo „Jaki obszar obsługujecie?” (więcej przykładów w poradniku o chatbocie AI dla hydraulików). Po kilku sekundach rozmowa pojawi się w sekcji Rozmowy w panelu Nexoply. Od tej chwili zmiany wprowadzone w panelu trafiają na Twoją stronę w ciągu około minuty, bez ponownej edycji kodu.

• Kod nie jest jeszcze opublikowany. Upewnij się, że zmiana została zapisana i opublikowana lub wdrożona, a potem odśwież stronę w oknie prywatnym. Podglądy w edytorach kreatorów stron nie zawsze uruchamiają własny kod.
• Kod zmieniony lub niekompletny. Sprawdź, czy linijka jest kompletna, od <script do </script>, a data-chatbot i Twój klucz pozostały bez zmian.
• Własny kod niedozwolony. W kreatorach hostowanych możliwość dodania własnego kodu może zależeć od planu (np. Wix wymaga planu premium z podłączoną domeną, a Squarespace planu Business lub wyższego).
• Dozwolone domeny. Jeśli na stronie Chatbot pole Zezwalaj tylko na tych stronach jest wypełnione, upewnij się, że każdy adres Twojej strony jest wpisany dokładnie (np. mojafirma.pl lub *.mojafirma.pl dla subdomen).
• Content-Security-Policy. Restrykcyjna polityka blokuje skrypt, dopóki https://nexoply.com nie zostanie dopuszczone w script-src, connect-src i img-src.
• Chatbot wyłączony lub blokery reklam. Sprawdź, czy przełącznik Chatbot włączony jest włączony. Rzadko zdarza się, że rozszerzenie przeglądarki blokuje widżety czatu; spróbuj w innej przeglądarce.

Wygląd ustawiasz w panelu Nexoply, nigdy w kodzie strony. W sekcji Chatbot → Personalizacja wybierzesz ikonę przycisku wiadomości (lub własny obraz albo SVG), napis, kształt, rozmiar, kolory, obramowanie, cień i położenie albo zamiast tego zakładkę boczną przy krawędzi ekranu (np. „Pomoc”). Możesz ustawić inny wygląd na telefonach i za pomocą reguł zmienić lub ukryć przycisk na wybranych stronach (np. /services/*). Dopasuj okno czatu do swoich czcionek i kolorów, dodaj logo albo zacznij od gotowego szablonu. Ekran startowy może pokazywać Twoje własne przyciski, np. Rezerwacja, Telefon czy WhatsApp. Widżet korzysta z Shadow DOM, więc style CSS Twojej strony na niego nie wpływają.

Potem regularnie przeglądaj rozmowy: pytania, na które asystent nie znał odpowiedzi, są wypisane i jednym kliknięciem możesz zamienić je w FAQ, a statystyki pokazują tematy, godziny największego ruchu i strony, na których otwierano czat. Pełną listę możliwości znajdziesz w funkcjach chatbota; jeśli chcesz najpierw porównać narzędzia, przeczytaj zestawienie najlepszych chatbotów AI dla małych firm.