Integracja chatbota z Wix: przewodnik krok po kroku

Wix ma wbudowaną funkcję czatu, ale to podstawowe narzędzie do czatu na żywo, które wymaga człowieka po drugiej stronie. Gdy nikt nie jest online, odwiedzający dostają formularz kontaktowy. To za mało, gdy ktoś przegląda Twoją witrynę o 23:00 i zastanawia się, czy zarezerwować Twoją usługę albo kupić Twój produkt.

Chatbot AI wytrenowany na treści Twojej witryny odpowiada na te pytania natychmiast, bez udziału człowieka. Ten przewodnik omawia dwie metody dodania chatbota do Wix, prowadzi przez całą konfigurację od początku do końca i wyjaśnia, jak uzyskać najlepsze rezultaty.

Wbudowany czat Wix a chatbot AI

Zanim przejdziemy do instalacji, warto zrozumieć, czym dedykowany chatbot AI różni się od tego, co Wix oferuje od razu w standardzie.

Wix Chat sprawdza się, jeśli zależy Ci na rozmowach z prawdziwymi ludźmi w czasie rzeczywistym. Ale większość małych firm nie może być online przez cały dzień. Chatbot AI wypełnia te luki i przejmuje powtarzalne pytania, które stanowią większość zapytań odwiedzających.

Możesz korzystać z obu rozwiązań jednocześnie: chatbot AI automatycznie obsługuje typowe pytania, a Wix Chat jest dostępny na wypadek sytuacji, w których potrzebny jest ludzki kontakt.

Czego potrzebujesz przed rozpoczęciem

1. Wytrenowanego chatbota w Agentkit.

Zarejestruj się za darmo, utwórz chatbota i wytrenuj go na treściach swojej witryny Wix. Plan darmowy daje Ci 1 chatbota i 50 wiadomości miesięcznie.

Dodaj adres URL swojej witryny Wix jako źródło treningowe. Mechanizm przeszukiwania automatycznie indeksuje Twoje strony. Następnie dodaj pary Q&A dla najważniejszych tematów (cennik, godziny otwarcia, proces rezerwacji, zasady zwrotów).

Szczegółowe wskazówki dotyczące trenowania znajdziesz w artykule Jak wytrenować chatbota na treści swojej witryny.

2. Planu Wix Premium.

Dodanie niestandardowego kodu do Wix wymaga planu Premium (dowolnego poziomu). Darmowe witryny Wix nie obsługują niestandardowych osadzeń HTML ani Velo.

Metoda 1: osadzenie HTML (zalecana)

To najprostsza metoda i działa dla wszystkich użytkowników Wix z planem Premium. Dodajesz skrypt chatbota za pomocą elementu osadzania HTML w edytorze Wix.

Krok 1: Pobierz kod osadzania

W panelu Agentkit przejdź do Ustawień swojego chatbota, a następnie do Publikuj. Zobaczysz dwie opcje osadzania. Dla Wix użyj kodu osadzania iframe:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

Możesz też użyć widżetu JavaScript, ale element osadzania HTML w Wix obsługuje ramki iframe bardziej niezawodnie niż tagi skryptu. Metoda iframe jest zalecanym podejściem dla Wix.

Krok 2: Dodaj osadzenie HTML do swojej strony

1. Otwórz Wix Editor swojej witryny.
2. Kliknij przycisk Dodaj (niebieska ikona „+”) na lewym pasku narzędzi.
3. Wybierz Embed Code, a następnie Embed HTML.
4. Na stronie pojawi się element HTML. Kliknij go i wybierz Enter Code.
5. Przełącz się na zakładkę Code (nie na zakładkę URL).
6. Wklej kod iframe z kroku 1.
7. Kliknij Update.
8. Zmień rozmiar i pozycję elementu tak, aby chatbot pojawiał się w wybranym miejscu na stronie.

Krok 3: Zastosuj na całej witrynie (opcjonalnie)

Metoda osadzania HTML dodaje chatbota do pojedynczej strony. Jeśli chcesz mieć chatbota na każdej stronie, masz dwie opcje:

Opcja A: Dodaj do nagłówka lub stopki witryny.

1. W edytorze Wix kliknij sekcję Header lub Footer swojej strony.
2. Dodaj element osadzania HTML do nagłówka lub stopki.
3. Ponieważ nagłówek i stopka pojawiają się na wszystkich stronach, chatbot będzie dostępny w całej witrynie.

Opcja B: Użyj funkcji „Custom Element” z Wix App Market.

1. Przejdź do Add, a następnie Embed Code, a następnie Custom Element.
2. Skonfiguruj ją tak, aby wczytywała skrypt chatbota na wszystkich stronach.

Opcja A jest prostsza dla większości użytkowników.

Krok 4: Opublikuj i zweryfikuj

1. Kliknij Publish w prawym górnym rogu edytora Wix.
2. Odwiedź swoją opublikowaną witrynę na żywo (nie podgląd edytora).
3. Potwierdź, że chatbot się pojawia i odpowiada na testowe wiadomości.
4. Sprawdź na urządzeniu mobilnym, aby zweryfikować układ.

Metoda 2: Velo by Wix (dla deweloperów)

Velo to wbudowana platforma deweloperska Wix. Jeśli swobodnie piszesz w JavaScript, Velo daje Ci większą kontrolę nad tym, kiedy i jak wczytuje się chatbot.

Kiedy używać Velo

• Chcesz, aby chatbot wczytywał się warunkowo (np. tylko dla zalogowanych członków, tylko na określonych stronach).
• Musisz przekazać chatbotowi dynamiczne dane (np. imię odwiedzającego lub poziom członkostwa).
• Chcesz programowo wyzwalać akcje chatbota.

Krok 1: Włącz Velo

1. W edytorze Wix kliknij Dev Mode w górnym pasku menu.
2. Kliknij Turn on Dev Mode.
3. U dołu edytora pojawi się panel kodu.

Krok 2: Dodaj skrypt za pomocą kodu strony

1. Wybierz stronę, na której ma się znaleźć chatbot.
2. W panelu kodu u dołu zobaczysz plik dla tej strony (np. Home.js).
3. Dodaj poniższy kod, aby dynamicznie wczytać widżet Agentkit:

$w.onReady(function () {
  const script = document.createElement('script');
  script.src = 'https://cdn.agentkit.ai/widget.js';
  script.setAttribute('data-chatbot', 'your-chatbot-id');
  script.async = true;
  document.body.appendChild(script);
});

4. Zapisz i opublikuj.

Krok 3: Wczytywanie na całej witrynie za pomocą masterPage.js

Aby wczytać chatbota na każdej stronie:

1. W panelu kodu otwórz masterPage.js (ten plik działa na wszystkich stronach).
2. Dodaj ten sam kod wczytujący skrypt wewnątrz funkcji onReady.
3. Zapisz i opublikuj.

Przykład wczytywania warunkowego

Jeśli chcesz mieć chatbota tylko na wybranych stronach:

// masterPage.js
import wixLocation from 'wix-location';

$w.onReady(function () {
  const path = wixLocation.path;
  const chatbotPages = ['services', 'pricing', 'contact', 'faq'];

  if (chatbotPages.some(page => path.includes(page))) {
    const script = document.createElement('script');
    script.src = 'https://cdn.agentkit.ai/widget.js';
    script.setAttribute('data-chatbot', 'your-chatbot-id');
    script.async = true;
    document.body.appendChild(script);
  }
});

To rozwiązanie wczytuje chatbota tylko na stronach Services, Pricing, Contact i FAQ.

Porównanie opcji chatbotów dla Wix

Z Wix współpracuje kilka narzędzi do obsługi chatbotów. Oto jak wypadają w porównaniu najważniejsze z nich.

Jeśli zależy Ci na odpowiedziach opartych na AI, wytrenowanych na Twojej własnej treści, z najbardziej elastycznymi opcjami osadzania, Agentkit jest najlepszym wyborem. Jeśli potrzebujesz kreatora przepływów opartego na regułach, bez AI, Joonbot jest stworzony właśnie do tego. A jeśli potrzebujesz jedynie podstawowego czatu między ludźmi, Wix Chat jest już wliczony w Twój plan.

Dostosowanie chatbota do swojej witryny Wix

Gdy chatbot już działa, skonfiguruj poniższe ustawienia w panelu Agentkit, aby uzyskać najlepsze rezultaty.

Kolory marki i pozycja

W Ustawieniach swojego chatbota dostosuj wygląd widżetu:

• Kolor podstawowy: dopasuj do koloru akcentu swojej witryny Wix.
• Pozycja: dolny prawy róg to ustawienie domyślne i sprawdza się w większości witryn. Przełącz na dolny lewy róg, jeśli Twoja witryna Wix ma konfliktujący element w dolnym prawym rogu.
• Wiadomość powitalna: napisz coś specyficznego dla swojej firmy. „Cześć! Mogę odpowiedzieć na pytania o nasze usługi, ceny i dostępność” jest lepsze niż „Jak mogę pomóc?”.

Ograniczenia domen

Dodaj swoją domenę Wix do listy dozwolonych domen. Obejmuje to zarówno Twoją domenę niestandardową (np. yourbusiness.com), jak i domyślny adres URL Wix (np. yourbusiness.wixsite.com/yoursite). Ograniczenia domen zapobiegają nieautoryzowanemu użyciu Twojego chatbota.

Instrukcje niestandardowe

Dodaj instrukcje, które kształtują zachowanie chatbota dla Twojej konkretnej firmy:

• „Jeśli ktoś zapyta o ceny, zawsze wspomnij o opcji bezpłatnej konsultacji.”
• „Przy pytaniach o dostępność zaproponuj rezerwację przez stronę harmonogramu.”
• „Nigdy nie obiecuj konkretnych terminów dostawy. Poproś o kontakt w sprawie aktualnych terminów.”
• „Jeśli ktoś zada pytanie, na które nie potrafisz odpowiedzieć, zaproponuj zebranie jego e-maila w celu dalszego kontaktu.”

Zbieranie leadów

Włącz akcję zbierania leadów, aby zbierać adresy e-mail od zaangażowanych odwiedzających. Jest to szczególnie cenne dla firm usługowych na Wix, gdzie zamiana odwiedzającego w leada jest głównym celem.

Zebrane leady pojawiają się w Twoim panelu Agentkit. Połącz je z narzędziem do e-mail marketingu lub CRM za pomocą Zapier. Szczegóły znajdziesz w przewodniku po integracji.

Wskazówki dotyczące trenowania dla witryn Wix

Witryny Wix często korzystają z układów wizualnych, animacji i elementów interaktywnych, które mogą ograniczać to, co wyodrębni mechanizm przeszukiwania. Oto jak zmaksymalizować wiedzę swojego chatbota.

Uzupełnij przeszukiwanie parami Q&A

Po wytrenowaniu na podstawie adresu URL przetestuj chatbota w Playground. Dla każdego pytania, na które odpowiada słabo, utwórz parę Q&A z idealną odpowiedzią. Typowe tematy do uwzględnienia:

Prześlij dodatkowe dokumenty

Jeśli masz pliki PDF, menu, broszury lub katalogi usług, prześlij je jako źródła dokumentów. Dają one chatbotowi szczegółowe informacje, których może w ogóle nie być na Twojej witrynie.

Utrzymuj dane treningowe aktualne

Gdy aktualizujesz witrynę Wix, przetrenuj chatbota ponownie. W planie Standard ($119.99/mies.) lub wyższym automatyczne ponowne trenowanie robi to za Ciebie. W planie Free lub Hobby uruchom ręczne ponowne trenowanie z panelu Agentkit po istotnych zmianach treści.

Rozwiązywanie problemów

Chatbot nie pojawia się po publikacji

• Sprawdź swój plan Wix. Niestandardowy kod wymaga planu Premium.
• Przeglądaj witrynę na żywo, nie edytor. Podgląd edytora Wix nie zawsze uruchamia niestandardowe skrypty.
• Wyczyść pamięć podręczną przeglądarki lub użyj okna incognito.
• Sprawdź kod osadzania HTML. Upewnij się, że wkleiłeś pełny tag iframe lub script bez dodatkowych znaków.

Element osadzania HTML pokazuje puste miejsce

• Zwiększ wysokość elementu osadzania HTML. Domyślny rozmiar może być zbyt mały, aby wyświetlić interfejs czatu.
• Upewnij się, że adres URL src w iframe jest poprawny i zawiera identyfikator Twojego chatbota.
• Sprawdź konsolę przeglądarki (F12) pod kątem błędów zablokowanej treści.

Chatbot działa na komputerze, ale nie na urządzeniu mobilnym

Wix automatycznie obsługuje responsywny design, ale elementy osadzania HTML czasem wymagają ręcznej korekty dla urządzeń mobilnych. W edytorze Wix:

1. Przełącz się na widok edytora mobilnego.
2. Znajdź element osadzania HTML.
3. Dostosuj jego rozmiar i pozycję dla urządzeń mobilnych.
4. Opublikuj i przetestuj.

Jeśli korzystasz z widżetu JavaScript przez Velo (Metoda 2), widżet jest domyślnie responsywny i powinien działać na wszystkich rozmiarach ekranu bez korekt.

Chatbot odpowiada nieprawidłowo

To problem z trenowaniem, nie z osadzaniem. Przejdź do panelu Agentkit i:

1. Sprawdź, które strony zostały pomyślnie przeszukane.
2. Dodaj pary Q&A dla tematów ze słabymi odpowiedziami.
3. Testuj w Playground, aż odpowiedzi będą zadowalające.
4. Dodaj instrukcje niestandardowe, aby ukierunkować ton i zachowanie chatbota.

Kwestie cenowe

Oto jak cennik Agentkit odpowiada typowym przypadkom użycia w Wix.

Rozliczenie roczne oszczędza około 20% na wszystkich planach płatnych.

Kolejne kroki

Twoja witryna Wix ma teraz chatbota AI, który obsługuje pytania odwiedzających przez całą dobę. Oto na czym warto się teraz skupić:

1. Dopracuj dane treningowe na podstawie pierwszego tygodnia rozmów. Szukaj wzorców w tym, o co pytają odwiedzający, i uzupełniaj luki w treningu.
2. Włącz zbieranie leadów, aby zamieniać rozmowy w kontakty. To właśnie tutaj chatbot zwraca się z nawiązką.
3. Połącz ze swoimi narzędziami za pomocą Zapier lub webhooków. Przesyłaj leady do Google Sheets, Mailchimp, HubSpot lub dowolnego narzędzia, z którego korzysta Twój zespół. Szczegóły znajdziesz w przewodniku po integracji.
4. Przeczytaj przewodnik po Squarespace, jeśli zarządzasz witrynami na innych platformach: Dodaj chatbota do Squarespace.
5. Poznaj wszystkie opcje osadzania w pełnym przewodniku po osadzaniu.

Zbuduj swojego chatbota za darmo →

Karta kredytowa nie jest wymagana.