Jak dodać widget ElevenLabs Conversational AI do swojej strony Webflow

Chcesz ulepszyć doświadczenie klienta? Conversational AI może pomóc. Dodając ElevenLabs’ Conversational AI do swojej strony Webflow, odwiedzający mogą prowadzić naturalne rozmowy, jakby rozmawiali z członkiem twojego zespołu.

W tym przewodniku pokażemy ci, jak dodać widget ElevenLabs Conversational AI do swojej strony Webflow, integrując widget za pomocą niestandardowego HTML i JavaScript.

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

Zanim zaczniesz, upewnij się, że masz:

1. Konto Webflow: Potrzebujesz aktywnego Core, Growth, Agency lub Freelancer Workspace, lub Site Plan, aby uzyskać dostęp do Embed Element.
2. Konto ElevenLabs: Skonfiguruj swojego Conversational
3. Znajomość Designer Webflow: Podstawowa wiedza o tym, jak dodawać i edytować Embed Elements w Webflow, jest pomocna.

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. Skopiuj kod osadzania, który zawiera:
4. • Fragment < script > do ładowania funkcjonalności widgetu.
   • Fragment < div > do określenia, gdzie widget pojawi się na stronie.

Krok 2: Dodaj widget do strony Webflow

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

1. Otwórz swój projekt Webflow w Designer.
2. Przejdź do strony, na której chcesz, aby widget się pojawił.
3. Z Panelu Elementów przeciągnij Embed Element na wybrane miejsce na stronie.
4. W edytorze kodu Embed Element wklej fragment < div > z kodu osadzania ElevenLabs.
5. Kliknij Zapisz i Zamknij, aby zastosować zmiany.

Uwaga: Embed Element działa jako placeholder dla twojego widgetu w Designer. Faktyczny widget zostanie wyświetlony dopiero po opublikowaniu strony.

Krok 3: Dodaj skrypt globalnie

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

1. Przejdź do Dashboard Webflow i otwórz Ustawienia Projektu.
2. Przejdź do zakładki Custom Code.
3. Wklej fragment < script > do sekcji Footer Code. To zapewnia, że skrypt jest ładowany na wszystkich stronach, gdzie używany jest widget.
4. Kliknij Zapisz Zmiany.

Krok 4: Opublikuj i przetestuj

1. Opublikuj swoją stronę na domenie staging Webflow lub na swojej własnej domenie.
2. Otwórz swoją stronę w przeglądarce, aby sprawdzić, czy widget pojawia się i działa zgodnie z oczekiwaniami.

Ważne: Niestandardowy kod nie renderuje się w Designer Webflow. Musisz opublikować swoją stronę, aby zobaczyć widget na żywo.

Typowe problemy i rozwiązywanie

Masz problemy z integracją? Nie martw się — te wskazówki powinny pomóc.

1. Widget się nie wyświetla

• Przyczyna: Brakujące lub źle umieszczone fragmenty < script > lub < div >.
• Rozwiązanie: Upewnij się, że fragment < script > jest w sekcji Footer Code, a fragment < div > jest poprawnie umieszczony w Embed Element.

2. Nieprawidłowe wyrównanie widgetu

• Przyczyna: Nieprawidłowe umiejscowienie lub stylizacja Embed Element.
• Rozwiązanie: Użyj Panelu Stylów Webflow, aby dostosować wymiary i wyrównanie Embed Element.

3. Błędy

• Przyczyna: Konflikty z innymi skryptami lub ograniczenia przeglądarki.
• Rozwiązanie: Użyj konsoli dewelopera przeglądarki, aby zidentyfikować i naprawić błędy JavaScript.

Zaawansowane wskazówki

Jeśli chcesz dostosować widget, przetestować na różnych urządzeniach lub użyć widgetu na wielu stronach, oto co musisz wiedzieć.

• Dostosowywanie widgetu: Użyj Panelu Stylów Webflow lub niestandardowego CSS, aby dostosować wygląd widgetu, np. rozmiar, wyrównanie czy kolory.
• Testowanie na różnych urządzeniach: Użyj narzędzi do projektowania responsywnego Webflow, aby upewnić się, że widget działa płynnie na komputerach, tabletach i urządzeniach mobilnych.
• Ponowne użycie widgetu: Zapisz Embed Element jako Komponent, jeśli planujesz używać widgetu na wielu stronach. To pozwala na spójne stylizowanie i łatwiejsze zarządzanie.

Końcowe przemyślenia

Integracja widgetu ElevenLabs Conversational AI z Webflow jest prosta, dzięki funkcjom Embed Element i Custom Code platformy. Niezależnie od tego, czy chcesz zwiększyć zaangażowanie na jednej stronie czy na całej stronie, postępuj zgodnie z powyższymi krokami, aby zacząć.

Jeśli potrzebujesz dalszej pomocy, nie wahaj się skontaktować z ElevenLabs wsparciem lub zajrzyj na fora społeczności Webflow po dodatkowe wskazówki.

Jeśli jeszcze tego nie zrobiłeś, zarejestruj się na ElevenLabs

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.

FAQ