Jak dodać widget ElevenLabs Conversational AI do swojej strony WordPress

ElevenLabs’ Conversational AI to potężne narzędzie wsparcia klienta do tworzenia interaktywnych doświadczeń opartych na AI, które zwiększają zaangażowanie. Jeśli masz stronę na WordPressie, możesz łatwo zintegrować niestandardowy HTML i JavaScript, w tym dynamiczne funkcje jak Conversational AI od ElevenLabs.

W tym przewodniku pokażemy ci, jak dodać widget Conversational AI do swojej strony WordPress, używając niestandardowych bloków HTML dla konkretnych stron i wstrzykiwania kodu dla globalnej funkcjonalności.

Zanim zaczniesz

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

1. Plan WordPress: Dla użytkowników WordPress.com wymagany jest plan Business lub Commerce, aby dodać niestandardowy JavaScript. Użytkownicy WordPressa na własnym serwerze mogą dodawać kod bez tych ograniczeń.
2. Konto ElevenLabs: Skonfiguruj swojego agenta Conversational AI w ElevenLabs i skopiuj kod do osadzenia, który zawiera fragmenty < script > i < div >.
3. Podstawowa wiedza o WordPressie: Znajomość dodawania bloków, edytowania stron lub używania wtyczek jest pomocna.

Przewodnik krok po kroku

Krok 1: Przygotuj widget ElevenLabs

1. Zaloguj się na swoje konto ElevenLabs.
2. Przejdź do sekcji Conversational AI.
3. Skonfiguruj swojego agenta AI i skopiuj kod do osadzenia, który zawiera:
4. • Fragment < script > do załadowania funkcjonalności widgetu.
   • Fragment < div > do określenia, gdzie widget się pojawi.

Krok 2: Dodaj widget do konkretnej strony używając niestandardowych bloków HTML

Aby wyświetlić widget na konkretnej stronie, użyj niestandardowego bloku HTML WordPressa.

1. Zaloguj się do swojego panelu WordPress.
2. Przejdź do Strony i utwórz nową stronę lub edytuj istniejącą.
3. Kliknij ikonę +, aby dodać nowy blok.
4. Wyszukaj i wybierz Niestandardowy HTML z opcji bloków.
5. Wklej fragment < div > z kodu osadzenia ElevenLabs do bloku.
6. Kliknij Podgląd, aby potwierdzić, że widget renderuje się poprawnie.
7. Opublikuj lub zaktualizuj stronę, aby wprowadzić zmiany na żywo.

Krok 3: Dodaj skrypt globalnie używając wtyczki lub ustawień motywu

Aby widget działał poprawnie, musisz dodać fragment < script > globalnie.

Opcja A: Użycie wtyczki (zalecane dla niedeweloperów)

1. Zainstaluj i aktywuj wtyczkę, taką jak Header Footer Code Manager.
2. Przejdź do ustawień wtyczki i utwórz nowy fragment kodu.
3. Wklej fragment < script > do sekcji Stopka.
4. Ustaw, aby fragment działał na Wszystkich Stronach.
5. Zapisz zmiany.

Opcja B: Dodanie skryptu bezpośrednio do motywu

1. Przejdź do Wygląd > Edytor motywu w swoim panelu WordPress.
2. Otwórz plik footer.php aktywnego motywu.
3. Wklej fragment < script > tuż przed zamykającym tagiem < /body >.
4. Zapisz plik.

Krok 4: Opublikuj i przetestuj

1. Odwiedź stronę, na której dodałeś widget, aby potwierdzić, że się pojawia i działa poprawnie.
2. Przetestuj widget na różnych urządzeniach i przeglądarkach, aby upewnić się, że działa bezproblemowo.

Typowe problemy i rozwiązywanie

Masz problem z uruchomieniem widgetu? Te wskazówki mogą pomóc.

Problem 1: Widget się nie wyświetla

• Przyczyna: Brakujące lub źle umieszczone fragmenty < script > lub < div >.
• Rozwiązanie: Sprawdź, czy < script > jest dodany globalnie, a < div > umieszczony na stronie.

Problem 2: Widget źle wyrównany

• Przyczyna: Wyrównanie bloku lub brak stylizacji.
• Rozwiązanie: Użyj narzędzi do wyrównania bloków WordPressa lub dodaj niestandardowy CSS, aby poprawnie umieścić widget.

Problem 3: Konflikty wtyczek

• Przyczyna: Inne wtyczki zakłócające działanie JavaScript.
• Rozwiązanie: Dezaktywuj wtyczki jedna po drugiej, aby zidentyfikować konflikt.

Zaawansowane wskazówki

Sprawdź te wskazówki, aby uzyskać więcej pomocy w działaniu widgetu zgodnie z twoimi oczekiwaniami. 

• Dostosowywanie widgetu: Użyj sekcji Dostosuj > Dodatkowy CSS w WordPressie, aby stylizować widget, dopasowując go do projektu strony.
• Testowanie na różnych urządzeniach: Przetestuj widget na komputerze, tablecie i urządzeniach mobilnych, aby zapewnić spójne doświadczenie użytkownika.
• Widgety dla konkretnych stron: Jeśli chcesz, aby widget pojawiał się tylko na konkretnych stronach, unikaj dodawania fragmentu < script > globalnie. Zamiast tego, umieść go w wtyczce lub bloku, który celuje w te strony.

Końcowe przemyślenia

Dodanie widgetu Conversational AI od ElevenLabs do twojej strony WordPress to skuteczny sposób na zaangażowanie odwiedzających dzięki interakcjom opartym na AI. Niezależnie od tego, czy osadzasz go na jednej stronie, czy na całej witrynie, WordPress zapewnia narzędzia potrzebne do bezproblemowej integracji.

Postępuj zgodnie z opisanymi tutaj krokami, dokładnie przetestuj swoją implementację i w razie potrzeby wprowadź poprawki. Jeśli napotkasz problemy, nie wahaj się skontaktować z wsparciem ElevenLabs po pomoc.

Lub, jeśli jeszcze tego nie zrobiłeś, zarejestruj się w ElevenLabs już dziś, aby rozpocząć proces.