Przedstawiamy Eleven v3 Alpha

Wypróbuj v3

Jak dodać widget ElevenLabs Conversational AI do swojej strony Wix

Dowiedz się, jak dodać Conversational AI do strony Wix.

A speech bubble with a brain designed as a circuit board inside.

Chcesz zwiększyć obsługę klienta i zaangażowanie dodając ElevenLabs’ Conversational AI do swojej strony Wix. Jesteś we właściwym miejscu. Ten przewodnik przeprowadzi cię przez cały proces krok po kroku, pomagając uniknąć typowych błędów.

Flowchart diagram with black and white nodes labeled "USER," "SPEECH TO TEXT," "TEXT TO SPEECH," "AGENT," "LLM," "MONITORING," and "FUNCTION CALLING" connected by curved lines on a blue gradient background.

Daj głos swoim agentom – na stronach internetowych, w aplikacjach i systemach telefonicznych, w kilka minut. Nasze API działa w czasie rzeczywistym z minimalnym opóźnieniem, daje pełną kontrolę i łatwo się skaluje.

Zanim zaczniesz

Przed rozpoczęciem upewnij się, że masz:

  1. Konto premium Wix: Osadzanie niestandardowego JavaScript jest dostępne tylko w planach Premium.
  2. Konto ElevenLabs: Potrzebujesz konta ElevenLabs, aby stworzyć agentów Conversational AI. Zarejestruj się tutaj.
  3. Dostęp do Wix Editor z włączonym trybem dewelopera: Będziesz potrzebować trybu dewelopera, aby dodać niestandardowy kod do swojej strony.

Przewodnik krok po kroku

Krok 1: Przygotuj swój widget ElevenLabs

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

Krok 2: Włącz tryb dewelopera w Wix

  1. Otwórz swoją stronę Wix w Edytorze.
  2. Kliknij tryb dewelopera w górnym menu, aby włączyć zaawansowane funkcje, takie jak dodawanie niestandardowego kodu.

Uwaga: Jeśli tryb dewelopera nie jest widoczny, upewnij się, że używasz pełnego Edytora Wix, a nie Wix ADI (Artificial Design Intelligence).

Krok 3: Dodaj kod osadzania JavaScript

  1. Przejdź do Ustawienia > Niestandardowy kod w Edytorze Wix.
  2. Kliknij + Dodaj niestandardowy kod.
  3. Wklej kod JavaScript ElevenLabs w podane pole.
  4. Pod Zastosuj kod do, wybierz Wszystkie strony (lub wybierz konkretną stronę dla widgetu).
  5. Zapisz i opublikuj zmiany.

Typowe problemy i rozwiązywanie

Napotkałeś problem z dodaniem widgetu Conversational AI do swojej strony Wix? Postępuj zgodnie z tymi prostymi krokami, aby rozwiązać problem.

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

  • Przyczyna: Nieprawidłowa konfiguracja Allowlist lub używanie darmowego planu Wix.
  • Rozwiązanie: Upewnij się, że adres URL twojej strony jest usunięty z Allowlist lub poprawnie skonfigurowany w panelu ElevenLabs.

Problem 2: JavaScript nie działa

  • Przyczyna: Kod JavaScript nie został poprawnie dodany.
  • Rozwiązanie: Sprawdź, czy JavaScript jest wklejony w odpowiednie pole w Niestandardowy kod.

Problem 3: Darmowy plan Wix

  • Przyczyna: Osadzanie niestandardowego JavaScript nie jest obsługiwane w darmowych planach Wix.
  • Rozwiązanie: Przejdź na plan Premium Wix.

Zaawansowane wskazówki

Jeśli chcesz stworzyć najlepsze możliwe doświadczenie dla odwiedzających twoją stronę, sprawdź te zaawansowane najlepsze praktyki.

Dostosowanie allowlist

Jeśli twój widget nadal nie działa po osadzeniu kodu, postępuj zgodnie z tymi krokami:

  1. Zaloguj się na swoje konto ElevenLabs.
  2. Przejdź do ustawień Allowlist dla swojego agenta Conversational AI.
  3. Upewnij się, że domena twojej strony jest poprawnie dodana. Jeśli problemy nadal występują, spróbuj usunąć swoją domenę z Allowlist i przetestować ponownie.

Testowanie na żywej domenie

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

Testowanie kompatybilności między przeglądarkami

Gdy twój widget jest na żywo, przetestuj go w różnych przeglądarkach, takich jak Chrome, Firefox, Edge i Safari. Niektóre funkcje mogą działać inaczej w różnych przeglądarkach z powodu różnic w obsłudze JavaScript.

  1. Otwórz swoją stronę w każdej przeglądarce.
  2. Interaktywuj z widgetem i sprawdź jego responsywność.
  3. Szukaj problemów, takich jak zepsute style lub błędy w funkcjonalności. Jeśli pojawią się problemy, przejrzyj swój kod JavaScript lub skontaktuj się z pomocą techniczną ElevenLabs.

Responsywność mobilna

Sprawdź, czy widget działa płynnie na urządzeniach mobilnych, ponieważ wielu użytkowników korzysta z witryn za pomocą smartfonów lub tabletów.

  1. Użyj mobilnego edytora Wix, aby zobaczyć podgląd układu mobilnego swojej strony.
  2. Przetestuj widget na fizycznych urządzeniach, aby potwierdzić jego funkcjonalność i łatwość obsługi.
  3. Sprawdź, czy nie ma nakładających się elementów lub problemów z formatowaniem. Jeśli potrzebne są poprawki, użyj narzędzi do projektowania mobilnego Wix, aby zoptymalizować rozmieszczenie i rozmiar.

Wskazówki dotyczące debugowania JavaScript

Jeśli twój widget nie działa zgodnie z oczekiwaniami, narzędzia deweloperskie przeglądarki mogą pomóc zidentyfikować problemy.

  1. Otwórz swoją stronę w przeglądarce (zalecane Chrome).
  2. Kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz Inspekcja, aby otworzyć DevTools.
  3. Przejdź do zakładki Konsola i szukaj komunikatów o błędach związanych z widgetem.
  4. Jeśli widzisz błędy, sprawdź kod osadzania JavaScript i upewnij się, że wszystkie niezbędne adresy URL są dodane do Allowlist. Ta metoda może również wskazać brakujące zależności lub inne problemy uniemożliwiające poprawne działanie widgetu.

Ostateczne przemyślenia

Integracja widgetu Conversational AI ElevenLabs z Wix wymaga starannej konfiguracji, ale z odpowiednimi krokami możesz mieć go uruchomionego w krótkim czasie. Upewnij się, że masz plan Premium Wix, postępuj zgodnie z powyższymi krokami i rozwiązuj typowe problemy w miarę potrzeb. Jeśli napotkasz dalsze problemy, skontaktuj się z wsparciem ElevenLabs po pomoc.

Lub, jeśli jeszcze tego nie zrobiłeś, zarejestruj się do Conversational AI już dziś.

Flowchart diagram with black and white nodes labeled "USER," "SPEECH TO TEXT," "TEXT TO SPEECH," "AGENT," "LLM," "MONITORING," and "FUNCTION CALLING" connected by curved lines on a blue gradient background.

Daj głos swoim agentom – na stronach internetowych, w aplikacjach i systemach telefonicznych, w kilka minut. Nasze API działa w czasie rzeczywistym z minimalnym opóźnieniem, daje pełną kontrolę i łatwo się skaluje.

Osadzanie niestandardowego JavaScript jest ograniczone do planów Premium. Darmowe plany nie pozwalają na tę funkcję.

Sprawdź ustawienia Allowlist w Wix i upewnij się, że JavaScript widgetu został poprawnie dodany.

Tak. Proces polega na prostym kopiowaniu i wklejaniu i nie wymaga umiejętności kodowania.

Przeglądaj artykuły zespołu ElevenLabs

ElevenLabs

Twórz z najwyższą jakością dźwięku AI