Jak dodać widżet ElevenLabs Conversational AI do witryny Framer

Widżet ElevenLabs Conversational AI pozwala wzbogacić stronę Framer o interaktywne rozmowy z AI. Niezależnie od tego, czy chcesz zwiększyć zaangażowanie klientów czy usprawnić obsługę klienta, Conversational AI może pomóc. 

W tym przewodniku pokażemy, jak dodać widżet do strony Framer. Dowiesz się, jak skonfigurować widżety dla całej witryny lub konkretnych stron oraz rozwiązać częste 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 kod osadzania (w tym fragmenty < script > i < div >).
3. Znajomość Framer: podstawowa znajomość ustawień witryny i elementów Embed w Framer

Instrukcja krok po kroku

Krok 1: Przygotuj widżet ElevenLabs

1. Zaloguj się na konto ElevenLabs.
2. Przejdź do sekcji Conversational AI.
3. Skonfiguruj swojego agenta AI i skopiuj udostępniony kod osadzania, który zawiera:
4. • Fragment < script >, który ładuje funkcje widżetu.
   • Fragment < div > określający, gdzie pojawi się widżet.

Krok 2: Dodaj skrypt do ustawień witryny Framer

1. Otwórz projekt Framer.
2. W prawym górnym rogu kliknij Project Settings.
3. Przejdź do karty General i przewiń do sekcji Custom Code.
4. Wklej fragment < script > z kodu osadzania ElevenLabs w polu End of < body > tag.
5. Zapisz zmiany. Dzięki temu wymagany skrypt załaduje się na stronie.

Krok 3: Dodaj widżet do konkretnej strony

1. W projekcie Framer przejdź do strony, na której ma pojawić się widżet.
2. Dodaj Embed Element z sekcji Utilities w menu Insert.
3. Wybierz Embed Element na obszarze roboczym, aby otworzyć jego ustawienia.
4. Zmień Type na HTML.
5. Wklej fragment < div > z kodu osadzania ElevenLabs w polu HTML.
6. Ustaw położenie i rozmiar Embed Element na obszarze roboczym.

Krok 4: Opublikuj i przetestuj

1. Kliknij Publish, aby opublikować zmiany.
2. Otwórz stronę w przeglądarce i sprawdź, czy widżet wyświetla się i działa poprawnie.
3. • Uwaga: własny kod nie wyświetla się w trybie Preview w Framer — aby go zobaczyć, musisz opublikować stronę.

Częste problemy i ich rozwiązywanie

Jeśli integracja nie działa, nie martw się — sprawdź poniższe wskazówki. 

Problem 1: Widżet się nie wyświetla

• Przyczyna: brakuje fragmentu < script > lub < div > albo został umieszczony nieprawidłowo.
• Rozwiązanie: upewnij się, że fragment < script > został dodany w ustawieniach witryny do pola End of < body > tag, a fragment < div > znajduje się w Embed Element.

Problem 2: Widżet jest widoczny tylko częściowo

• Przyczyna: Embed Element ma nieprawidłowy rozmiar lub położenie.
• Rozwiązanie: dostosuj wymiary i wyrównanie Embed Element w edytorze Framer.

Problem 3: Błędy skryptu

• Przyczyna: skrypty powodują konflikt lub zasoby zewnętrzne są blokowane.
• 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 dostosowania? Te wskazówki pomogą. 

• Dostosowanie widżetu: użyj własnego CSS, aby ostylować widżet i dopasować go do wyglądu strony.
• Testowanie na różnych urządzeniach: narzędzia responsywnego projektowania Framer ułatwiają testowanie widżetu w widokach mobilnym, tabletowym i desktopowym, aby zapewnić prawidłowe skalowanie.
• Dodawanie widżetów do konkretnych stron: aby umieścić widżet tylko na wybranych stronach, dodaj fragment < div > do Embed Element na tych stronach i upewnij się, że fragment < script > jest w ustawieniach witryny.

Na koniec 

Dzięki temu przewodnikowi wzbogacisz stronę Framer o dynamiczne interakcje z AI dopasowane do potrzeb odbiorców. Opublikuj zmiany, przetestuj konfigurację i pozwól swojemu AI prowadzić rozmowy z odwiedzającymi już dziś. Jeśli potrzebujesz dodatkowej pomocy, skontaktuj się z działem wsparcia ElevenLabs.

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