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

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

W tym przewodniku pokażemy, jak dodać widżet do witryny Framer. Dowiesz się, jak skonfigurować widżety dla całej witryny lub wybranych stron oraz rozwiązywać typowe problemy.

Zanim zaczniesz

Zanim zaczniesz, upewnij się, że masz:

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

Przewodnik 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 >, który określa, gdzie pojawi się widżet.

Krok 2: Dodaj skrypt w ustawieniach 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 zostanie załadowany w witrynie.

Krok 3: Dodaj widżet do wybranej strony

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

Krok 4: Opublikuj i przetestuj

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

Typowe problemy i ich rozwiązania

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ł dodany w niewłaściwym miejscu.
• Rozwiązanie: upewnij się, że fragment < script > dodano w polu End of < body > tag w Site Settings, a fragment < div > znajduje się w elemencie Embed.

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

• Przyczyna: element Embed ma niewłaściwy rozmiar lub pozycję.
• Rozwiązanie: dostosuj wymiary i wyrównanie elementu Embed w edytorze Framer.

Problem 3: Błędy skryptu

• Przyczyna: konflikty między skryptami lub zablokowane zasoby zewnętrzne.
• Rozwiązanie: otwórz konsolę przeglądarki i sprawdź 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 powinny pomóc. 

• Dostosowanie widżetu: użyj własnego CSS, aby ostylować widżet i dopasować go do wyglądu witryny.
• Testowanie na różnych urządzeniach: responsywne narzędzia projektowe Framer ułatwiają testowanie widżetu w widokach telefonu, tabletu i komputera, aby zapewnić właściwe skalowanie.
• Dodawanie widżetów do wybranych stron: aby dodać widżet tylko do wybranych stron, umieść fragment < div > w elemencie Embed na tych stronach i upewnij się, że fragment < script > znajduje się w Site Settings.

Na koniec 

Dzięki temu przewodnikowi wzbogacisz witrynę Framer o dynamiczne interakcje oparte na AI, dopasowane do potrzeb odbiorców. Opublikuj zmiany, przetestuj konfigurację i pozwól swojemu konwersacyjnemu AI zacząć angażować odwiedzających już dziś. Jeśli potrzebujesz pomocy, skontaktuj się z działem wsparcia ElevenLabs.

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