Jak dodać widget ElevenLabs Conversational AI do swojej strony Wix

Chcesz usprawnić obsługę klienta i zaangażowanie dzięki dodaniu Conversational AI od ElevenLabs do swojej strony Wix? Jesteś w dobrym miejscu. Ten przewodnik przeprowadzi cię przez cały proces krok po kroku i pomoże uniknąć typowych problemów.

Zanim zaczniesz

Zanim zaczniesz, upewnij się, że masz:

1. Konto Wix Premium: Osadzanie własnego kodu JavaScript jest dostępne tylko w planach Premium.
2. Konto ElevenLabs: Konto ElevenLabs jest potrzebne, aby tworzyć konwersacyjnych agentów głosowych AI. Zarejestruj się tutaj.
3. Dostęp do Wix Editor z włączonym Dev Mode: Dev Mode jest potrzebny, aby dodać własny kod do strony.

Instrukcja krok po kroku

Krok 1: Przygotuj widget ElevenLabs

1. Zaloguj się na konto ElevenLabs.
2. Przejdź do sekcji Conversational AI.
3. Skonfiguruj agenta konwersacyjnego i skopiuj podany kod osadzania JavaScript.

Krok 2: Włącz Dev Mode w Wix

1. Otwórz swoją stronę Wix w edytorze.
2. Kliknij Dev Mode w górnym menu, aby włączyć zaawansowane funkcje, takie jak dodawanie własnego kodu.

Uwaga: Jeśli Dev Mode nie jest widoczny, upewnij się, że korzystasz z pełnego Wix Editor, a nie Wix ADI (Artificial Design Intelligence).

Krok 3: Dodaj kod osadzania JavaScript

1. W Wix Editor przejdź do Ustawienia > Custom Code.
2. Kliknij + Add Custom Code.
3. Wklej kod JavaScript ElevenLabs w odpowiednie pole.
4. W sekcji Apply Code To wybierz All Pages (lub konkretną stronę dla widgetu).
5. Zapisz i opublikuj zmiany.

Typowe problemy i rozwiązania

Masz problem z dodaniem widgetu Conversational AI do strony Wix? Wykonaj te proste kroki, aby go rozwiązać.

Problem 1: Widget rozłącza się lub nie ładuje

• Przyczyna: Nieprawidłowa konfiguracja Allowlist lub darmowy plan Wix.
• Rozwiązanie: Upewnij się, że adres URL strony został usunięty z Allowlist albo poprawnie skonfigurowany w panelu ElevenLabs.

Problem 2: JavaScript nie działa

• Przyczyna: Kod JavaScript nie został dodany poprawnie.
• Rozwiązanie: Sprawdź ponownie, czy JavaScript został wklejony w odpowiednim polu w sekcji Custom Code.

Problem 3: Darmowy plan Wix

• Przyczyna: Darmowe plany Wix nie obsługują osadzania własnego kodu JavaScript.
• Rozwiązanie: Przejdź na plan Wix Premium.

Zaawansowane wskazówki

Chcesz zapewnić odwiedzającym stronę jak najlepsze wrażenia? Sprawdź te zaawansowane dobre praktyki. 

Dostosowanie Allowlist

Jeśli widget nadal nie działa po osadzeniu kodu, wykonaj te kroki:

1. Zaloguj się na konto ElevenLabs.
2. Przejdź do ustawień Allowlist swojego agenta Conversational AI.
3. Upewnij się, że domena strony została poprawnie dodana. Jeśli problem nie znika, usuń domenę z Allowlist i przetestuj ponownie.

Testowanie na aktywnej domenie

Widget może nie działać poprawnie w trybie podglądu Wix. Opublikuj stronę i przetestuj ją na aktywnej domenie, aby upewnić się, że wszystko działa zgodnie z oczekiwaniami.

Testy zgodności z różnymi przeglądarkami

Gdy widget będzie już aktywny, przetestuj go w kilku przeglądarkach, takich jak Chrome, Firefox, Edge i Safari. Niektóre funkcje mogą działać inaczej w zależności od sposobu obsługi JavaScript przez przeglądarkę.

1. Otwórz stronę w każdej przeglądarce.
2. Skorzystaj z widgetu i sprawdź, czy reaguje prawidłowo.
3. Sprawdź, czy nie ma problemów, takich jak uszkodzone style lub błędy działania. Jeśli się pojawią, przejrzyj kod JavaScript albo skontaktuj się z pomocą ElevenLabs.

Dostosowanie do urządzeń mobilnych

Sprawdź, czy widget działa bez problemów na urządzeniach mobilnych, ponieważ wielu użytkowników korzysta ze stron na smartfonach i tabletach.

1. Użyj Mobile Editor Wix, aby zobaczyć podgląd mobilnego układu strony.
2. Przetestuj widget na fizycznych urządzeniach, aby potwierdzić, że działa i jest łatwy w użyciu.
3. Sprawdź, czy elementy się nie nakładają i czy nie ma problemów z formatowaniem. W razie potrzeby użyj narzędzi mobilnych Wix, aby zoptymalizować położenie i rozmiar.

Wskazówki dotyczące debugowania JavaScript

Jeśli widget nie działa zgodnie z oczekiwaniami, narzędzia deweloperskie przeglądarki mogą pomóc znaleźć problem.

1. Otwórz stronę w przeglądarce (zalecamy Chrome).
2. Kliknij prawym przyciskiem myszy w dowolnym miejscu strony i wybierz Zbadaj, aby otworzyć DevTools.
3. Przejdź do karty Console i sprawdź komunikaty o błędach związane z widgetem.
4. Jeśli widzisz błędy, porównaj kod osadzania JavaScript i upewnij się, że wszystkie potrzebne adresy URL zostały dodane do Allowlist. Ta metoda może też wskazać brakujące zależności lub inne problemy, które uniemożliwiają poprawne działanie widgetu.

Podsumowanie

Integracja widgetu ElevenLabs Conversational AI z Wix wymaga starannej konfiguracji, ale przy właściwym podejściu szybko go uruchomisz. Upewnij się, że masz plan Wix Premium, wykonaj powyższe kroki i w razie potrzeby rozwiąż typowe problemy. Jeśli potrzebujesz dodatkowej pomocy, skontaktuj się z pomocą techniczną ElevenLabs.

Możesz też, jeśli jeszcze tego nie zrobiłeś, zarejestrować się na platformie Conversational AI Agents już dziś.