Jak dodać widget ElevenLabs Conversational AI do swojej strony na Framerze

ElevenLabs Conversational AI widget pozwala wzbogacić twoją stronę Framer o interaktywne rozmowy napędzane AI. Niezależnie od tego, czy chcesz zwiększyć zaangażowanie klientów czy ulepszyć wsparcie klienta, Conversational AI może pomóc.

W tym przewodniku pokażemy ci, jak dodać widget do twojej strony Framer. Nauczysz się konfigurować widgety na całej stronie lub na konkretnych stronach oraz rozwiązywać typowe problemy.

Zanim zaczniesz

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

1. Konto Framer: Dostęp do projektu Framer z możliwością dodawania własnego kodu (dostępne w płatnych planach).
2. Konto ElevenLabs: Skonfiguruj swojego agenta Conversational AI i skopiuj jego kod do osadzenia (w tym fragmenty < script > i < div >).
3. Znajomość Framer: Podstawowa znajomość ustawień strony Framer i elementów osadzania

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. Skonfiguruj swojego agenta AI i skopiuj podany kod do osadzenia, który zawiera:
4. • Fragment < script > do załadowania funkcjonalności widgetu.
   • Fragment < div > do określenia, gdzie widget się pojawi.

Krok 2: Dodaj skrypt do ustawień strony Framer

1. Otwórz swój projekt Framer.
2. W prawym górnym rogu kliknij Ustawienia projektu.
3. Przejdź do zakładki Ogólne i przewiń do sekcji Własny kod.
4. Wklej fragment < script > z kodu osadzenia ElevenLabs do pola Koniec tagu < body >.
5. Zapisz zmiany. Ten krok zapewnia załadowanie wymaganego skryptu na twojej stronie.

Krok 3: Dodaj widget do konkretnej strony

1. W swoim projekcie Framer przejdź do strony, na której chcesz, aby widget się pojawił.
2. Dodaj element osadzania z sekcji Narzędzia w menu Wstaw.
3. Wybierz element osadzania na swoim płótnie, aby uzyskać dostęp do jego ustawień.
4. Zmień typ na HTML.
5. Wklej fragment < div > z kodu osadzenia ElevenLabs do pola HTML.
6. Ustaw pozycję i rozmiar elementu osadzania na swoim płótnie według potrzeb.

Krok 4: Opublikuj i przetestuj

1. Kliknij Opublikuj, aby wprowadzić zmiany na żywo.
2. Otwórz swoją stronę w przeglądarce, aby sprawdzić, czy widget się pojawia i działa poprawnie.
3. • Uwaga: Własny kod nie wyświetli się w trybie podglądu Framer—musi być opublikowany, aby go zobaczyć.

Typowe problemy i rozwiązywanie

Jeśli masz trudności z integracją, nie martw się—sprawdź poniższe wskazówki dotyczące rozwiązywania problemów.

Problem 1: Widget się nie wyświetla

• Przyczyna: Brakujący lub źle umieszczony fragment < script > lub < div >.
• Rozwiązanie: Upewnij się, że fragment < script > jest dodany do pola Koniec tagu < body > w ustawieniach strony, a fragment < div > jest w elemencie osadzania.

Problem 2: Widget jest tylko częściowo widoczny

• Przyczyna: Element osadzania jest źle rozmiarowany lub umieszczony.
• Rozwiązanie: Dostosuj wymiary i wyrównanie elementu osadzania w edytorze Framer.

Problem 3: Błędy skryptu

• Przyczyna: Konfliktujące skrypty lub zablokowane zasoby zewnętrzne.
• Rozwiązanie: Otwórz konsolę przeglądarki, aby sprawdzić błędy JavaScript. Upewnij się, że Framer ma uprawnienia do ładowania zewnętrznych skryptów.

Zaawansowane wskazówki

Szukasz bardziej zaawansowanych opcji dostosowywania? Te wskazówki powinny pomóc.

• Dostosowywanie widgetu: Użyj własnego CSS, aby dostosować widget i zintegrować go płynnie z projektem twojej strony.
• Testowanie na różnych urządzeniach: Narzędzia do projektowania responsywnego Framer ułatwiają testowanie widgetu na widokach mobilnych, tabletach i komputerach, aby zapewnić prawidłowe skalowanie.
• Dodawanie widgetów do konkretnych stron: Aby umieścić widget tylko na określonych stronach, dodaj fragment < div > do elementu osadzania na wybranych stronach i upewnij się, że fragment < script > jest obecny w ustawieniach strony.

Końcowe przemyślenia

Postępując zgodnie z tym przewodnikiem, możesz wzbogacić swoją stronę Framer o dynamiczne interakcje napędzane AI, dostosowane do potrzeb twojej publiczności. Opublikuj zmiany, przetestuj ustawienia i pozwól, aby twój Conversational AI zaczął angażować odwiedzających już dziś. W razie potrzeby skontaktuj się z ElevenLabs wsparciem.

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