Jak dodać widget Conversational AI ElevenLabs do swojej strony Webflow

Chcesz ulepszyć doświadczenie klienta? Conversational AI może pomóc. Dodając Conversational AI od ElevenLabs 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 Conversational AI od ElevenLabs do strony Webflow, integrując go za pomocą niestandardowego HTML i JavaScript.

Zanim zaczniesz

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

1. Konto Webflow: Potrzebujesz aktywnego Workspace Core, Growth, Agency lub Freelancer, albo Planu Strony, aby uzyskać dostęp do Elementu Osadzania.
2. Konto ElevenLabs: Skonfiguruj swojego agenta Conversational AI w ElevenLabs i skopiuj dostarczony kod osadzania (zawierający fragmenty < script > i < div >).
3. Znajomość Designer Webflow: Podstawowa wiedza o dodawaniu i edytowaniu Elementów Osadzania w Webflow 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. 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 Elementu Osadzania.

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 Element Osadzania na wybrane miejsce na stronie.
4. W edytorze kodu Elementu Osadzania wklej fragment < div > z kodu osadzania ElevenLabs.
5. Kliknij Zapisz i Zamknij, aby zastosować zmiany.

Uwaga: Element Osadzania działa jako zastępstwo dla twojego widgetu w Designer. Faktyczny widget pojawi się 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 swojego Dashboard Webflow i otwórz Ustawienia Projektu.
2. Przejdź do zakładki Kod Niestandardowy.
3. Wklej fragment < script > w sekcji Kod Stopki. 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 testowej 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: Kod niestandardowy nie renderuje się w Designer Webflow. Musisz opublikować stronę, aby zobaczyć widget na żywo.

Typowe problemy i rozwiązywanie

Masz problemy z konfiguracją integracji? 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 Kod Stopki, a fragment < div > jest poprawnie umieszczony w Elemencie Osadzania.

2. Nieprawidłowe wyrównanie widgetu

• Przyczyna: Nieprawidłowe umieszczenie lub stylizacja Elementu Osadzania.
• Rozwiązanie: Użyj Panelu Stylu Webflow, aby dostosować wymiary i wyrównanie Elementu Osadzania.

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 Stylu 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 Element Osadzania 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 Conversational AI od ElevenLabs z Webflow jest prosta dzięki funkcjom Elementu Osadzania i Kodu Niestandardowego. 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 wsparciem ElevenLabs lub zajrzyj na fora społeczności Webflow po dodatkowe wskazówki.

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

FAQ