Jak dodać widget ElevenLabs Conversational AI do swojej strony Webflow

Chcesz poprawić obsługę klientów? Conversational AI może pomóc. Dodaj Conversational AI od ElevenLabs do swojej strony Webflow, a odwiedzający będą mogli prowadzić naturalne rozmowy, jakby naprawdę rozmawiali z członkiem twojego zespołu. 

W tym przewodniku pokażemy, jak dodać widżet ElevenLabs Conversational AI do strony Webflow za pomocą własnego kodu HTML i JavaScript.

Zanim zaczniesz

Zanim zaczniesz, upewnij się, że masz:

1. Konto Webflow: Aby uzyskać dostęp do Embed Element, potrzebujesz aktywnego planu Core, Growth, Agency lub Freelancer Workspace albo Site Plan.
2. Konto ElevenLabs: Skonfiguruj swojego konwersacyjnego agenta głosowego AI w ElevenLabs i skopiuj podany kod osadzania (z fragmentami < script > i < div >).
3. Znajomość Designera Webflow: Przyda się podstawowa wiedza o dodawaniu i edycji Embed Elements w Webflow.

Instrukcja krok po kroku

Krok 1: Przygotuj widżet ElevenLabs

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

Krok 2: Dodaj widżet do strony Webflow

Aby wyświetlić widżet na konkretnej stronie, użyj Embed Element.

1. Otwórz projekt Webflow w Designerze.
2. Przejdź do strony, na której ma pojawić się widżet.
3. W panelu Elements przeciągnij Embed Element w wybrane miejsce na stronie.
4. W edytorze kodu Embed Element wklej fragment < div > z kodu osadzania ElevenLabs.
5. Kliknij Save & Close, aby zastosować zmiany.

Uwaga: Embed Element działa w Designerze jako symbol zastępczy widżetu. Właściwy widżet pojawi się dopiero po opublikowaniu strony.

Krok 3: Dodaj skrypt globalnie

Aby widżet działał poprawnie, dodaj fragment < script > globalnie na swojej stronie.

1. Przejdź do Webflow Dashboard i otwórz Project Settings.
2. Przejdź do karty Custom Code.
3. Wklej fragment < script > do sekcji Footer Code. Dzięki temu skrypt załaduje się na wszystkich stronach, na których używasz widżetu.
4. Kliknij Save Changes.

Krok 4: Opublikuj i przetestuj

1. Opublikuj stronę w domenie testowej Webflow lub własnej domenie.
2. Otwórz stronę w przeglądarce, aby sprawdzić, czy widżet się wyświetla i działa zgodnie z oczekiwaniami.

Ważne: Własny kod nie renderuje się w Designerze Webflow. Aby zobaczyć widżet na żywo, musisz opublikować stronę.

Najczęstsze problemy i rozwiązania

Masz problem z konfiguracją integracji? Spokojnie — poniższe wskazówki powinny pomóc.

1. Widżet się nie wyświetla

• Przyczyna: Brakuje fragmentów < script > lub < div > albo zostały umieszczone w złym miejscu.
• Rozwiązanie: Upewnij się, że fragment < script > znajduje się w sekcji Footer Code, a fragment < div > jest poprawnie umieszczony w Embed Element.

2. Widżet jest źle wyrównany

• Przyczyna: Embed Element został umieszczony lub ostylowany nieprawidłowo.
• Rozwiązanie: Użyj panelu Style w Webflow, aby dostosować wymiary i wyrównanie Embed Element.

3. Błędy

• Przyczyna: Konflikty z innymi skryptami lub ograniczenia przeglądarki.
• Rozwiązanie: Skorzystaj z konsoli deweloperskiej przeglądarki, aby znaleźć i naprawić błędy JavaScript.

Zaawansowane wskazówki

Chcesz dostosować widżet, przetestować go na różnych urządzeniach lub użyć go na wielu stronach? Oto co warto wiedzieć.

• Dostosowanie widżetu: Użyj panelu Style w Webflow lub własnego CSS, aby zmienić wygląd widżetu, np. rozmiar, wyrównanie czy kolory.
• Testowanie na różnych urządzeniach: Użyj narzędzi responsywnego projektowania Webflow, aby upewnić się, że widżet działa bez problemów na komputerach, tabletach i urządzeniach mobilnych.
• Ponowne użycie widżetu: Zapisz Embed Element jako Component, jeśli chcesz używać widżetu na wielu stronach. Ułatwi to zachowanie spójnego stylu i zarządzanie.

Podsumowanie

Integracja widżetu ElevenLabs Conversational AI z Webflow jest prosta dzięki funkcjom Embed Element i Custom Code tej platformy. Niezależnie od tego, czy chcesz zwiększyć zaangażowanie na jednej stronie, czy w całym serwisie, wykonaj powyższe kroki, aby zacząć.

Jeśli potrzebujesz pomocy, skontaktuj się z działem wsparcia ElevenLabs lub zajrzyj na forum społeczności Webflow, aby znaleźć więcej wskazówek. 

Jeśli jeszcze tego nie zrobiłeś, załóż konto na platformie ElevenLabs AI Agents Platform już dziś, aby zacząć. 

Najczęstsze pytania