Jak dodać widget ElevenLabs Conversational AI do swojej strony Ghost

Chcesz przenieść swoją stronę Ghost na wyższy poziom? ElevenLabs’ Conversational AI przekształca zaangażowanie klientów. Dodając ElevenLabs’ Conversational AI do swojej platformy Ghost, możesz oferować interaktywną, realistyczną obsługę klienta w rozmowach, które zbliżają twoją publiczność do marki.

Conversational AI

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. Stronę Ghost: Potrzebujesz płatnego planu lub samodzielnie hostowanej instancji Ghost. Niestandardowy JavaScript nie jest obsługiwany w darmowym planie Ghost.
2. Dostęp do panelu administracyjnego Ghost: Będziesz potrzebować dostępu do ustawień Code Injection lub Edytora.
3. Konto ElevenLabs: Skonfiguruj agent Conversational AI i skopiuj jego kod JavaScript do osadzenia.

Przewodnik krok po kroku

Opcja 1: Dodanie widgetu globalnie za pomocą Code Injection

Jeśli chcesz, aby widget pojawiał się na wszystkich stronach twojej strony, użyj funkcji Code Injection w Ghost.

Krok 1: Przygotuj swój widget

1. Zaloguj się na swoje konto ElevenLabs.
2. Przejdź do sekcji Conversational AI i skonfiguruj swojego agenta.
3. Skopiuj podany kod JavaScript do osadzenia.

Krok 2: Uzyskaj dostęp do ustawień Code Injection

1. Zaloguj się do panelu administracyjnego Ghost.
2. Przejdź do Ustawienia > Code Injection.

Krok 3: Osadź kod JavaScript

1. Wklej skopiowany kod JavaScript w polu Stopka strony.
2. Zapisz zmiany.

Krok 4: Przetestuj integrację

1. Otwórz swoją stronę Ghost, aby upewnić się, że widget pojawia się i działa zgodnie z oczekiwaniami.
2. Jeśli się nie wyświetla, sprawdź ponownie umiejscowienie kodu i konfigurację ElevenLabs.

Opcja 2: Dodanie widgetu do konkretnych stron lub postów za pomocą znaku plus

Jeśli wolisz, aby widget pojawiał się tylko na niektórych stronach lub postach, możesz osadzić go bezpośrednio w treści za pomocą znaku plus w Edytorze Ghost.

Krok 1: Przygotuj swój widget

1. Skopiuj kod JavaScript do osadzenia z konta ElevenLabs.

Krok 2: Edytuj post lub stronę w Ghost

1. Otwórz Edytor Ghost dla strony lub postu, gdzie chcesz dodać widget.
2. Kliknij znak plus (+), aby otworzyć menu bloków.

Krok 3: Wstaw blok HTML

1. Wybierz HTML z opcji bloków.
2. Wklej kod JavaScript do bloku HTML.

Krok 4: Opublikuj i przetestuj

1. Zapisz i opublikuj stronę lub post.
2. Otwórz stronę, aby potwierdzić, że widget się wyświetla i działa zgodnie z oczekiwaniami.

Typowe problemy i rozwiązywanie

Integracja nie działa zgodnie z oczekiwaniami? Postępuj zgodnie z poniższymi krokami, aby rozwiązać problemy.

Problem 1: Widget się nie ładuje

• Przyczyna: Kod JavaScript jest niepoprawnie dodany lub niekompletny.
• Rozwiązanie: Sprawdź ponownie umiejscowienie kodu i potwierdź, że twój agent ElevenLabs jest poprawnie skonfigurowany.

Problem 2: Konflikty skryptów

• Przyczyna: Inne niestandardowe skrypty w ustawieniach Code Injection mogą powodować konflikty z widgetem.
• Rozwiązanie: Tymczasowo wyłącz inne skrypty, aby sprawdzić konflikty. Dodawaj je ponownie jeden po drugim, aby zidentyfikować problem.

Zaawansowane wskazówki

Szukasz więcej sposobów na dostosowanie widgetu? Sprawdź poniższe wskazówki.

• Dostosowanie umiejscowienia widgetu: Użyj CSS, aby dostosować wygląd lub pozycję widgetu, gdy jest dodawany przez Code Injection lub blok HTML. Jeśli chcesz, aby widget pojawiał się w stałym miejscu (np. stopka lub pasek boczny), edytuj pliki motywu Ghost. Dodaj kod JavaScript do pliku default.hbs, a następnie ponownie załaduj swój motyw.
• Responsywność mobilna: Przetestuj widget na urządzeniach mobilnych, aby upewnić się, że skaluje się i działa poprawnie. Użyj responsywnego podglądu Ghost lub testuj bezpośrednio na fizycznych urządzeniach.
• Testowanie między przeglądarkami: Sprawdź, czy widget działa w popularnych przeglądarkach, takich jak Chrome, Firefox, Safari i Edge, aby zapewnić spójność dla wszystkich użytkowników.
• Debugowanie problemów z JavaScript: Użyj narzędzi deweloperskich przeglądarki (np. Chrome DevTools) do sprawdzenia błędów w Konsoli. Napraw problemy, takie jak brakujące zależności lub konflikty skryptów.

Ostateczne przemyślenia

Integracja widgetu ElevenLabs Conversational AI z Ghost jest prosta i elastyczna, pozwalając na zwiększenie interaktywności strony przy minimalnym wysiłku. Jeśli napotkasz problemy, przejrzyj kroki, dokładnie przetestuj lub skontaktuj się z ElevenLabs wsparcie jeśli potrzebujesz.

Zarejestruj się w Conversational AI już dziś, aby zacząć.