Jak dodać widget ElevenLabs Conversational AI do swojej strony WordPress

Rozwiązanie ElevenLabs Conversational AI to skuteczne narzędzie obsługi klienta do tworzenia interaktywnych doświadczeń opartych na AI, które zwiększają zaangażowanie. Jeśli masz stronę WordPress, łatwo zintegrujesz z nią własny HTML i JavaScript, w tym dynamiczne funkcje, takie jak Conversational AI od ElevenLabs.

W tym przewodniku pokażemy, jak dodać widżet Conversational AI do strony WordPress za pomocą bloków Custom HTML na wybranych stronach oraz Code Injection dla funkcji globalnych.

Zanim zaczniesz

Zanim zaczniesz, upewnij się, że masz:

1. Plan WordPress: Użytkownicy WordPress.com potrzebują planu Business lub Commerce, aby dodać własny JavaScript. Użytkownicy WordPress hostowanego samodzielnie mogą dodawać kod bez tych ograniczeń.
2. Konto ElevenLabs: Skonfiguruj swojego agenta głosowego AI Conversational AI w ElevenLabs i skopiuj kod osadzania, który zawiera fragmenty < script > i < div >.
3. Podstawową znajomość WordPress: Przyda się umiejętność dodawania bloków, edycji stron lub korzystania z wtyczek.

Instrukcja krok po kroku

Krok 1: Przygotuj widżet ElevenLabs

1. Zaloguj się na konto ElevenLabs.
2. Przejdź do sekcji Conversational AI.
3. Skonfiguruj agenta AI i skopiuj kod osadzania, który zawiera:
4. • Fragment < script >, który ładuje funkcje widżetu.
   • Fragment < div >, który określa, gdzie pojawi się widżet.

Krok 2: Dodaj widżet do wybranej strony za pomocą bloków Custom HTML

Aby wyświetlić widżet na wybranej stronie, użyj bloku Custom HTML w WordPress.

1. Zaloguj się do panelu WordPress.
2. Przejdź do sekcji Strony i utwórz nową stronę albo edytuj istniejącą.
3. Kliknij ikonę +, aby dodać nowy blok.
4. Wyszukaj i wybierz Custom HTML z opcji bloków.
5. Wklej do bloku fragment < div > z kodu osadzania ElevenLabs.
6. Kliknij Podgląd, aby sprawdzić, czy widżet wyświetla się poprawnie.
7. Opublikuj lub zaktualizuj stronę, aby wdrożyć zmiany.

Krok 3: Dodaj skrypt globalnie za pomocą wtyczki lub ustawień motywu

Aby widżet działał poprawnie, musisz dodać fragment < script > globalnie.

Opcja A: Użycie wtyczki (zalecane dla osób bez doświadczenia technicznego)

1. Zainstaluj i aktywuj wtyczkę, np. Header Footer Code Manager.
2. Przejdź do ustawień wtyczki i utwórz nowy fragment kodu.
3. Wklej fragment < script > do sekcji Footer.
4. Ustaw uruchamianie fragmentu na All Pages.
5. Zapisz zmiany.

Opcja B: Dodanie skryptu bezpośrednio do motywu

1. W panelu WordPress przejdź do Wygląd > Edytor motywu.
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. Otwórz stronę, na której dodano widżet, aby sprawdzić, czy wyświetla się i działa poprawnie.
2. Przetestuj widżet na różnych urządzeniach i w różnych przeglądarkach, aby upewnić się, że działa bez problemów.

Typowe problemy i ich rozwiązania

Nie możesz uruchomić widżetu? Te wskazówki mogą pomóc. 

Problem 1: Widżet się nie wyświetla

• Przyczyna: Brakuje fragmentów < script > lub < div > albo znajdują się w niewłaściwym miejscu.
• Rozwiązanie: Sprawdź, czy < script > został dodany globalnie, a < div > znajduje się na stronie.

Problem 2: Widżet jest źle wyrównany

• Przyczyna: Wyrównanie bloku lub brak stylów.
• Rozwiązanie: Użyj narzędzi WordPress do wyrównywania bloków albo dodaj własny CSS, aby prawidłowo ustawić widżet.

Problem 3: Konflikty wtyczek

• Przyczyna: Inne wtyczki zakłócają wykonywanie JavaScript.
• Rozwiązanie: Wyłączaj wtyczki pojedynczo, aby znaleźć źródło konfliktu.

Zaawansowane wskazówki

Sprawdź te wskazówki, aby lepiej dostosować działanie widżetu do swoich potrzeb. 

• Dostosowanie widżetu: Użyj sekcji WordPress Dostosuj > Dodatkowy CSS, aby ostylować widżet i dopasować go do wyglądu strony.
• Testowanie na różnych urządzeniach: Przetestuj widżet na komputerach, tabletach i urządzeniach mobilnych, aby zapewnić spójne doświadczenie użytkownika.
• Widżety dla wybranych stron: Jeśli widżet ma pojawiać się tylko na wybranych stronach, nie dodawaj fragmentu < script > globalnie. Zamiast tego umieść go we wtyczce lub bloku kierowanym na te strony.

Podsumowanie

Dodanie widżetu ElevenLabs Conversational AI do strony WordPress to skuteczny sposób na angażowanie odwiedzających za pomocą interakcji opartych na AI. Niezależnie od tego, czy osadzasz go na jednej stronie, czy w całej witrynie, WordPress zapewnia narzędzia potrzebne do płynnej integracji.

Wykonaj opisane kroki, dokładnie przetestuj wdrożenie i w razie potrzeby wprowadź poprawki. Jeśli pojawią się problemy, skontaktuj się z ElevenLabs pomocą techniczną — chętnie pomożemy.

Jeśli jeszcze tego nie zrobiono, zarejestruj się już dziś w ElevenLabs Agents Platform i zacznij korzystać z platformy.