Jak dodać chatbota AI do swojej witryny Webflow

Witryny Webflow wyglądają dopracowane, szybko się wczytują i dają precyzyjną kontrolę nad designem. Nie mają jednak wbudowanego czatu AI. Jeśli chcesz mieć chatbota, który naprawdę rozumie Twoją treść i potrafi prowadzić prawdziwe rozmowy z odwiedzającymi, musisz dodać go samodzielnie.

Dobra wiadomość: dodanie chatbota AI do Webflow zajmuje około 20 minut i nie wymaga żadnego kodu poza wklejeniem pojedynczego tagu skryptu. Tworzysz chatbota, trenujesz go na treści swojej witryny i dodajesz go do Webflow przez ustawienia Custom Code. Działa na każdej stronie, pasuje do Twojego designu i od razu zaczyna odpowiadać na pytania odwiedzających.

Ten przewodnik omawia cały proces: tworzenie i trenowanie chatbota, osadzanie go w Webflow, dostosowanie wyglądu i konfigurację pod kątem najlepszych rezultatów.

Porównanie opcji chatbotów dla Webflow

Zanim przejdziemy do konfiguracji, oto jak wypadają w porównaniu główne podejścia do dodawania funkcji czatu do Webflow.

Jeśli potrzebujesz widżetu czatu, w którym ludzki zespół odpowiada w czasie rzeczywistym, właściwym wyborem jest narzędzie do czatu na żywo, takie jak Intercom. Jeśli chcesz asystenta opartego na AI, który automatycznie odpowiada na pytania, wytrenowanego na rzeczywistej treści Twojej witryny, lepiej sprawdzi się chatbot AI. Większość właścicieli witryn Webflow chce tego drugiego rozwiązania — samoobsługowego asystenta, który obsługuje pytania odwiedzających bez konieczności zatrudniania dodatkowych osób.

Krok 1: Utwórz swojego chatbota

Zacznij od utworzenia chatbota w Agentkit. Potrzebujesz darmowego konta.

1. Przejdź do Agentkit i zarejestruj się.
2. Utwórz nowego chatbota i nadaj mu nazwę odzwierciedlającą jego cel (np. „Asystent witryny” albo nazwę Twojej marki).
3. Wybierz model AI. GPT-4o to solidny wybór domyślny. Masz do wyboru szeroki zakres modeli od OpenAI, Anthropic (Claude) i Google (Gemini).

Krok 2: Wytrenuj na treści swojej witryny Webflow

To krok, który sprawia, że chatbot staje się naprawdę użyteczny. Podajesz mu rzeczywistą treść swojej witryny, aby mógł dokładnie odpowiadać na pytania odwiedzających.

Dodaj adres URL swojej witryny

1. W panelu Agentkit przejdź do strony Źródła swojego chatbota.
2. Kliknij Dodaj źródło i wybierz Strona internetowa.
3. Wpisz adres URL swojej witryny Webflow (np. https://yoursite.webflow.io lub swoją domenę niestandardową https://yoursite.com).
4. Mechanizm przeszukiwania podąża za linkami z Twojego głównego adresu URL i indeksuje wszystkie dostępne strony: stronę główną, stronę „o nas”, strony usług, portfolio, wpisy na blogu, FAQ, cennik i wszelką inną powiązaną treść.

Dla witryn Webflow korzystających z interakcji, animacji lub dynamicznie wczytywanej treści mechanizm przeszukiwania Agentkit używa Firecrawl do renderowania JavaScript przed indeksowaniem. Zapewnia to dokładne przechwycenie treści wczytywanej przez interakcje Webflow.

Dodaj pary Q&A dla kluczowych tematów

Podczas gdy przeszukiwanie witryny przechwytuje Twoją ogólną treść, pary Q&A dają Ci precyzyjną kontrolę nad konkretnymi odpowiedziami. Utwórz pary dla najważniejszych pytań odwiedzających:

Pary Q&A mają pierwszeństwo przed przeszukaną treścią, więc są Twoim narzędziem do tego, by mieć pewność, że chatbot mówi dokładnie to, co chcesz, w kluczowych tematach.

Prześlij dokumenty (opcjonalnie)

Jeśli masz materiały, których nie ma na Twojej witrynie Webflow — studia przypadków w formacie PDF, dokumenty specyfikacji usług, cenniki — prześlij je jako źródła dokumentów. Chatbot wykorzysta tę treść razem z danymi z Twojej witryny, aby odpowiadać na pytania.

Przetestuj w Playground

Zanim dodasz chatbota do swojej działającej witryny, przetestuj go w Playground Agentkit.

Zadaj pytania, które zwykle zadają Twoi odwiedzający:

• „Jakie usługi oferujecie?”
• „Ile to kosztuje?”
• „Jak zacząć?”
• „Czy współpracujecie z firmami z branży [branża]?”
• „Jaka jest Wasza polityka zwrotów?”

Jeśli jakakolwiek odpowiedź jest błędna, niepełna lub źle sformułowana, dostosuj swoje dane treningowe. Dodaj lub zaktualizuj pary Q&A, dodaj więcej fragmentów tekstu albo doprecyzuj źródło ze swojej witryny, uwzględniając konkretne strony, które mogłeś pominąć.

Krok 3: Dostosuj wygląd widżetu

Przed osadzeniem skonfiguruj widżet chatbota tak, aby pasował do designu Twojej witryny Webflow.

W panelu Agentkit przejdź do Ustawień swojego chatbota:

Motyw kolorystyczny. Ustaw kolor podstawowy zgodny z Twoją marką. Użyj dokładnego kodu hex ze swojego przewodnika stylu Webflow. Dymek czatu, nagłówek i przycisk wysyłania korzystają z tego koloru.

Pozycja. Wybierz dolny prawy róg (domyślny i najczęstszy) lub dolny lewy róg. Wybierz stronę, która nie koliduje z innymi pływającymi elementami na Twojej witrynie Webflow.

Wiadomość powitalna. Napisz wiadomość zgodną z tonem Twojej marki i jasno określającą oczekiwania:

• Dla firmy usługowej: „Cześć, mogę odpowiedzieć na pytania o nasze usługi, ceny i proces współpracy. W czym mogę pomóc?”
• Dla produktu SaaS: „Witaj! Zapytaj mnie o cokolwiek dotyczące naszego produktu, funkcji czy cennika.”
• Dla witryny portfolio: „Cześć. Mogę opowiedzieć o naszych realizacjach, możliwościach i sposobie współpracy z klientami.”

Sugerowane wiadomości. Dodaj od trzech do pięciu sugerowanych wiadomości, które kierują odwiedzających w stronę najbardziej wartościowych rozmów:

• „Jakie usługi oferujecie?”
• „Ile to kosztuje?”
• „Czy mogę zobaczyć przykłady Waszych prac?”
• „Jak zacząć?”

Awatar. Prześlij swoje logo lub ikonę marki jako awatar chatbota, aby uzyskać spójny wygląd.

Krok 4: Osadź w Webflow

Oto właściwa instalacja. Masz dwie opcje w Webflow: instalacja na całej witrynie (każda strona) lub dla konkretnej strony.

Opcja A: instalacja na całej witrynie (zalecana)

To rozwiązanie dodaje chatbota do każdej strony Twojej witryny Webflow.

1. W panelu Agentkit przejdź do Ustawień swojego chatbota, a następnie do Publikuj.
2. Skopiuj tag skryptu:

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

3. W Webflow otwórz Project Settings (ikona koła zębatego na lewym pasku bocznym Designera lub z panelu projektów).
4. Przejdź do zakładki Custom Code.
5. Wklej tag skryptu w sekcji Footer Code (pole opisane jako „Before </body> tag”).
6. Kliknij Save Changes.
7. Kliknij Publish, aby zmiany zaczęły obowiązywać.

Chatbot pojawi się teraz na każdej stronie Twojej opublikowanej witryny Webflow.

Opcja B: instalacja dla konkretnej strony

Jeśli chcesz mieć chatbota tylko na wybranych stronach (na przykład na stronie cennika i kontaktu, ale nie na blogu):

1. W Designerze Webflow otwórz stronę, na której ma się znaleźć chatbot.
2. Otwórz Page Settings (ikona koła zębatego przy nazwie strony w panelu Pages).
3. Przewiń do sekcji Custom Code.
4. Wklej tag skryptu w polu Before </body> tag.
5. Kliknij Save, a następnie Publish.

Powtórz dla każdej strony, na której chcesz mieć chatbota. Strony bez skryptu nie będą wyświetlać chatbota.

Weryfikacja instalacji

Po publikacji:

1. Otwórz swoją witrynę Webflow w nowej karcie przeglądarki (lub w oknie incognito, aby ominąć pamięć podręczną).
2. Poszukaj dymka czatu w rogu strony.
3. Kliknij dymek i wyślij testową wiadomość.
4. Zweryfikuj, że odpowiedź jest trafna, a stylizacja wygląda poprawnie.
5. Przetestuj na urządzeniu mobilnym, aby potwierdzić, że widżet wyświetla się poprawnie na mniejszych ekranach.

Jeśli chatbot nie pojawia się od razu po publikacji, wykonaj twarde odświeżenie strony (Ctrl+Shift+R lub Cmd+Shift+R). Propagacja zaktualizowanego kodu przez CDN Webflow może zająć minutę.

Krok 5: Skonfiguruj ograniczenia domen

Gdy chatbot już działa, ogranicz go do swojej domeny, aby nie można go było osadzić na nieautoryzowanych witrynach.

1. W panelu Agentkit przejdź do Ustawień swojego chatbota.
2. W sekcji Ograniczenia domen dodaj domenę swojej witryny Webflow (np. yoursite.com).
3. Jeśli korzystasz też z domyślnej domeny Webflow (yoursite.webflow.io), dodaj również ją.

Chatbot będzie wczytywał się wyłącznie na wskazanych domenach. Zapobiega to sytuacji, w której ktoś skopiuje Twój kod osadzania i wykorzysta Twojego chatbota (oraz Twój limit wiadomości) na swojej witrynie.

Wskazówki specyficzne dla Webflow

Praca z interakcjami Webflow

Jeśli Twoja witryna Webflow korzysta z intensywnych interakcji i animacji, widżet chatbota wczytuje się niezależnie i nie koliduje z nimi. Widżet korzysta z nakładki o stałej pozycji, więc znajduje się na wierzchu treści strony, nie będąc pod wpływem transformacji Webflow ani animacji wyzwalanych przewijaniem.

Strony kolekcji CMS

Jeśli masz blog lub portfolio w Webflow CMS, chatbot (zainstalowany na całej witrynie) pojawi się na każdej stronie kolekcji CMS. Wytrenuj chatbota na adresie URL całej witryny, aby mógł odpowiadać na pytania dotyczące dowolnej treści, w tym stron CMS.

Jeśli treść Twojego CMS zmienia się często, rozważ plan Standard ($119.99/mies.), który obejmuje automatyczne ponowne trenowanie. Chatbot okresowo ponownie przeszukuje Twoją witrynę i automatycznie wychwytuje nowe wpisy CMS.

E-commerce w Webflow

Dla witryn Webflow Ecommerce wytrenuj chatbota na stronach produktów, polityce wysyłki, polityce zwrotów i FAQ. Chatbot może odpowiadać na pytania o produkty, wyjaśniać opcje wysyłki i obsługiwać zapytania dotyczące zwrotów. Szczegółowe wskazówki konfiguracyjne znajdziesz w naszym przewodniku po chatbotach dla e-commerce.

Środowisko testowe a produkcyjne

Jeśli korzystasz ze środowiska testowego Webflow (yoursite.webflow.io) do testów przed publikacją na domenie niestandardowej, możesz dodać skrypt chatbota do obu. Użyj ograniczeń domen, aby kontrolować, na której domenie chatbot jest aktywny. Podczas testów dopuść obie domeny. Na produkcji ogranicz do swojej domeny niestandardowej.

Wpływ na wydajność

Widżet Agentkit wczytuje się asynchronicznie (zwróć uwagę na atrybut async w tagu skryptu). Oznacza to, że nie blokuje wczytywania Twojej strony. Wczytuje się w tle, po tym jak treść strony jest już gotowa. Nie ma mierzalnego wpływu na czas wczytywania Twojej witryny Webflow ani na wynik Lighthouse.

Zbieranie leadów w Webflow

Chatbot na Twojej witrynie Webflow to, oprócz narzędzia wsparcia, także narzędzie do zbierania leadów. Odwiedzający, którzy angażują się w rozmowę z chatbotem, wykazali zainteresowanie. Zebranie ich e-maila w odpowiednim momencie zamienia przypadkowego przeglądającego w okazję do dalszego kontaktu.

Konfigurowanie zbierania leadów

1. W panelu Agentkit przejdź do Akcji swojego chatbota.
2. Włącz Zbieraj leady z imieniem i e-mailem jako wymaganymi polami.
3. Skonfiguruj, kiedy formularz ma się pojawiać, w instrukcjach chatbota: „Po odpowiedzi na pytanie odwiedzającego o usługi lub ceny zaproponuj przesłanie mu dodatkowych szczegółów i użyj formularza zbierania leadów, aby zebrać jego e-mail.”

Łączenie leadów z Twoimi narzędziami

Zapier, webhooki i dostęp do REST API są dostępne już od planu Hobby ($29.99/mies.).

Więcej o strategiach zbierania leadów znajdziesz w Jak wykorzystać chatboty do generowania leadów.

Dopasowanie do designu Twojej witryny Webflow

Twoja witryna Webflow ma określony język wizualny. Oto jak sprawić, aby chatbot wyglądał naturalnie, a nie jak doklejony element.

Kolor marki. Skopiuj dokładną wartość hex swojego głównego koloru marki z panelu stylów Webflow i użyj jej jako koloru widżetu chatbota. Zapewnia to, że dymek czatu i nagłówek harmonizują z Twoją witryną.

Spójność czcionek. Widżet chatbota korzysta z czystego stosu fontów systemowych, który dobrze komponuje się z większością wyborów typograficznych w Webflow. Tekst widżetu jest celowo neutralny, więc nie gryzie się z niestandardowymi czcionkami.

Odstępy i pozycja. Jeśli Twoja witryna Webflow ma stałą stopkę, pływający przycisk CTA lub baner cookie, umieść chatbota po przeciwnej stronie, aby uniknąć nakładania się. W ustawieniach chatbota możesz wybrać dolny lewy lub dolny prawy róg.

Ton wiadomości powitalnej. Napisz wiadomość powitalną i sugerowane wiadomości w tym samym tonie, co treść Twojej witryny Webflow. Jeśli Twoja witryna jest swobodna i przyjazna, chatbot powinien to odzwierciedlać. Jeśli jest profesjonalna i formalna, chatbot powinien to odzwierciedlać.

Mierzenie wydajności chatbota na Twojej witrynie Webflow

Po kilku tygodniach działania chatbota przejrzyj jego wyniki w panelu Agentkit.

Przeglądaj dzienniki czatu co tydzień przez pierwszy miesiąc. To tam znajdziesz szybkie usprawnienia: pytania, z którymi chatbot radzi sobie słabo i które łatwo naprawić parą Q&A, oraz pytania, na które odpowiada dobrze, co pozwala zweryfikować Twoje podejście do trenowania.

Plany Agentkit dla witryn Webflow

Rozliczenie roczne oszczędza około 20% na wszystkich planach płatnych. Większość witryn Webflow zaczyna od planu Free, aby przetestować rozwiązanie, a następnie przechodzi na Hobby, gdy zobaczy, jak chatbot obsługuje rzeczywiste pytania odwiedzających.

Rozwiązywanie typowych problemów

Chatbot nie pojawia się po publikacji. CDN Webflow może potrzebować kilku minut na propagację. Wykonaj twarde odświeżenie strony. Jeśli nadal się nie pojawia, sprawdź, czy skrypt znajduje się we właściwym polu Custom Code (Footer Code w Project Settings albo Before </body> tag w Page Settings).

Chatbot pojawia się w Designerze, ale nie na opublikowanej witrynie (lub odwrotnie). Podgląd Designera nie wykonuje niestandardowych skryptów. Chatbota zobaczysz tylko na opublikowanej witrynie. To oczekiwane zachowanie Webflow.

Chatbot nakłada się na element Webflow. Zmień pozycję chatbota (dolny lewy czy dolny prawy) w ustawieniach Agentkit albo dostosuj z-index swojego elementu Webflow, jeśli powinien być wyświetlany nad chatbotem.

Chatbot udziela błędnych odpowiedzi. Przejrzyj konkretne pytanie w dziennikach czatu, a następnie dodaj lub zaktualizuj parę Q&A z poprawną odpowiedzią. Pary Q&A mają pierwszeństwo przed przeszukaną treścią dla pasujących pytań.

Chatbot nie wczytuje się na konkretnych stronach. Jeśli użyłeś instalacji dla konkretnej strony, sprawdź, czy skrypt jest obecny w ustawieniach Custom Code tej strony. Jeśli użyłeś instalacji na całej witrynie, sprawdź, czy nie ma konfliktującego skryptu lub nagłówka bezpieczeństwa, który go blokuje.

Pierwsze kroki

Dodanie chatbota AI do swojej witryny Webflow to jedna z najbardziej efektywnych zmian, jakie możesz wprowadzić przy najmniejszym nakładzie pracy. Jeden tag skryptu daje Ci asystenta działającego przez całą dobę, który odpowiada na pytania odwiedzających, zbiera leady i poprawia doświadczenie każdego, kto odwiedza Twoją witrynę.

1. Zarejestruj się w Agentkit (za darmo).
2. Utwórz chatbota i wytrenuj go na adresie URL swojej witryny Webflow.
3. Dodaj pary Q&A dla najważniejszych pytań odwiedzających.
4. Dostosuj widżet do swojej marki.
5. Wklej kod osadzania w ustawieniach Custom Code w Webflow.
6. Opublikuj i przetestuj.

Cały proces zajmuje około 20 minut. Twój chatbot od razu zaczyna odpowiadać na rzeczywiste pytania odwiedzających.

Zbuduj swojego chatbota za darmo →

Karta kredytowa nie jest wymagana.