Jak dodać chatbota AI do Webflow (w 5 minut)

Nexoply to asystent AI, którego budujesz we własnym panelu i dodajesz do strony w Webflow jednym znacznikiem script. Webflow przechowuje tylko tę linijkę; wiedzą, wyglądem i zachowaniem asystenta zarządzasz w Nexoply, bez kodu i bez klucza AI, bo to Nexoply obsługuje AI. W praktyce oznacza to:

• Zna firmę. Dodaj usługi i ceny, FAQ, zasady, godziny otwarcia i obszary działania albo zaimportuj je z publicznych stron witryny w Webflow (15 na skanowanie w planie Darmowym). Nic nie zostanie dodane, dopóki tego nie zatwierdzisz.
• Odpowiada tylko na podstawie tych informacji. Ma polecenie mówić, że czegoś nie wie, zamiast zgadywać, a każdą rozmowę można przejrzeć w panelu.
• Pasuje do projektu. Przycisk wiadomości lub zakładka boczna, kolory, czcionki i logo, gotowe szablony, osobny wygląd na telefonach, reguły dla wybranych stron oraz przyciski na ekranie startowym, np. Rezerwacja, Telefon czy WhatsApp.
• Odpowiada w 12 językach. Odwiedzający, którzy piszą w innym obsługiwanym języku, dostają odpowiedzi w tym języku.
• Czym nie jest. Nie jest skrzynką czatu na żywo dla konsultantów i sam nie przyjmuje rezerwacji ani płatności; jego przyciski kierują odwiedzających na stronę rezerwacji, telefon lub WhatsApp.

Plan Darmowy obejmuje 50 rozmów miesięcznie; plany płatne zaczynają się od 19 $ miesięcznie, jak podaje strona z cennikiem. Tworzysz strony w Webflow dla klientów? Każda firma ma własne konto Nexoply i jednego chatbota, więc skonfiguruj go z informacjami danego klienta. Pełną listę możliwości znajdziesz w funkcjach chatbota.

Najpierw sprawdź te trzy rzeczy:

• Konto Nexoply. Zarejestruj się za darmo: plan Darmowy obejmuje 50 rozmów miesięcznie, bez karty.
• Informacje o firmie w Nexoply: usługi i ceny, FAQ, zasady, godziny otwarcia i obszary działania. Najszybciej jest podać adres witryny w Webflow i pozwolić Nexoply zaimportować jej publiczne strony, także te zbudowane w JavaScripcie. Przeglądasz propozycje; nic nie zostanie dodane, dopóki tego nie zatwierdzisz.
• Dostęp do ustawień projektu w Webflow i plan, który pozwala na własny kod. Jeśli ustawienia Custom code są dla Ciebie niedostępne, sprawdź swój plan lub zapytaj właściciela strony.

W panelu Nexoply otwórz stronę Chatbot (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. Chcesz zobaczyć asystenta, zanim zajrzysz do Webflow? Kliknij Otwórz stronę testową z Twoim chatbotem, aby wypróbować go na przykładowej stronie.

1. 1

   Otwórz Project settings

   W Webflow otwórz Project settings wybranego projektu.

2. 2

   Przejdź do Custom code

   Otwórz sekcję Custom code. Kod umieszczony tutaj dotyczy całej witryny, więc działa na każdej stronie projektu.

3. 3

   Wklej w Footer code

   Wklej kod Nexoply w pole Footer code. Kod stopki jest umieszczany tuż przed końcem każdej strony, czyli tam, gdzie powinien być ten skrypt.

4. 4

   Zapisz

   Zapisz zmiany w Project settings.

5. 5

   Opublikuj

   Opublikuj stronę. Własny kod jest dodawany tylko do opublikowanej witryny, więc dopiero ten krok sprawia, że pojawia się przycisk czatu.

Otwórz opublikowaną witrynę w nowym oknie prywatnym, aby zobaczyć ją tak jak odwiedzający. W dolnym rogu pojawi się przycisk czatu. Zadaj prawdziwe pytanie, np. „Czy przyjmujecie nowych pacjentów?” albo „Co zabrać na pierwszą wizytę?” (więcej przykładów w poradniku o chatbocie AI dla klinik). Po kilku sekundach rozmowa pojawi się w sekcji Rozmowy w panelu Nexoply. Od tej chwili zmiany wprowadzone w panelu trafiają na stronę w ciągu około minuty, bez ponownej publikacji w Webflow.

• Strona nieopublikowana. Samo zapisanie Project settings nie wystarczy: opublikuj stronę, a potem ją odśwież.
• Sprawdzasz w Designerze. Sprawdź opublikowaną witrynę w oknie prywatnym, a nie w Designerze.
• Niewłaściwe pole lub niekompletny kod. Otwórz ponownie Custom code i sprawdź, czy kod znajduje się w Footer code, kompletny i niezmieniony, od <script do </script>.
• Plan lub uprawnienia. Jeśli nie możesz zapisać własnego kodu, sprawdź, czy Twój plan Webflow na to pozwala albo czy Twoja rola w projekcie umożliwia edycję Project settings.
• Dozwolone domeny. Jeśli na stronie Chatbot pole Zezwalaj tylko na tych stronach jest wypełnione, wpisz każdy adres, pod którym strona jest opublikowana (np. mojaklinika.pl lub *.mojaklinika.pl dla subdomen).
• Content-Security-Policy. Jeśli strona wysyła nagłówek Content-Security-Policy, zezwól na https://nexoply.com 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, a nie w Webflow. W sekcji Chatbot → Personalizacja wybierzesz ikonę przycisku wiadomości (własny obraz lub wklejony kod 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ć go na wybranych stronach (np. /services/*). Dopasuj okno czatu do czcionek i kolorów strony, dodaj logo albo zacznij od gotowego szablonu. Ekran startowy może pokazywać Twoje własne przyciski, np. Rezerwacja, Telefon czy WhatsApp.

Aby otwierać czat jednym z własnych przycisków w Webflow, krótki skrypt może wywołać window.dispatchEvent(new Event("nexoply:open-chat")); aby otwierał się od razu po załadowaniu strony, dodaj data-open="true" do znacznika script. 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. Pełny obraz znajdziesz na stronie jak działa Nexoply, a instrukcje dla innych platform w poradniku jak dodać chatbota AI do dowolnej strony.