Så lägger du till ElevenLabs Conversational AI-widget på din Framer-webbplats

ElevenLabs Conversational AI-widgeten hjälper dig att förbättra din Framer-webbplats med interaktiva, AI-drivna konversationer. Oavsett om du vill öka kundengagemanget eller förbättra din kundsupport kan Conversational AI hjälpa till. 

I den här guiden går vi igenom hur du lägger till widgeten på din Framer-webbplats. Du får lära dig att konfigurera widgetar för hela webbplatsen eller för specifika sidor och lösa vanliga problem.

Innan du börjar

Innan du börjar behöver du följande:

1. Framer-konto: Åtkomst till ett Framer-projekt där du kan lägga till anpassad kod (tillgängligt med betalplaner).
2. ElevenLabs-konto: Konfigurera din Conversational AI-agent och kopiera dess inbäddnings kod (inklusive < script >- och < div >-snuttarna).
3. Kännedom om Framer: Grundläggande förståelse för Framers Site Settings och Embed Elements

Steg-för-steg-guide

Steg 1: Förbered din ElevenLabs-widget

1. Logga in på ditt ElevenLabs-konto.
2. Gå till avsnittet Conversational AI.
3. Konfigurera din AI-agent och kopiera den inbäddningskod som tillhandahålls, vilken innehåller:
4. • En < script >-snutt som laddar widgetens funktioner.
   • En < div >-snutt som anger var widgeten ska visas.

Steg 2: Lägg till skriptet i Framers webbplatsinställningar

1. Öppna ditt Framer-projekt.
2. Klicka på Project Settings uppe till höger.
3. Gå till fliken General och skrolla ner till avsnittet Custom Code.
4. Klistra in < script >-snutten från din ElevenLabs-inbäddningskod i fältet End of < body > tag.
5. Spara ändringarna. Då laddas det nödvändiga skriptet för din webbplats.

Steg 3: Lägg till widgeten på en specifik sida

1. Gå till den sida i ditt Framer-projekt där du vill att widgeten ska visas.
2. Lägg till ett Embed Element från avsnittet Utilities i menyn Insert.
3. Välj Embed Element på din arbetsyta för att öppna dess inställningar.
4. Ändra Type till HTML.
5. Klistra in < div >-snutten från ElevenLabs-inbäddningskoden i HTML-fältet.
6. Placera och ändra storlek på Embed Element på arbetsytan efter behov.

Steg 4: Publicera och testa

1. Klicka på Publish för att publicera ändringarna.
2. Öppna webbplatsen i en webbläsare och kontrollera att widgeten visas och fungerar korrekt.
3. • Obs! Anpassad kod visas inte i Framers Preview-läge – du måste publicera webbplatsen för att se den.

Vanliga problem och felsökning

Om integrationen inte fungerar som den ska behöver du inte oroa dig – se felsökningstipsen nedan. 

Problem 1: Widgeten visas inte

• Orsak: < script >- eller < div >-snutten saknas eller har placerats fel.
• Lösning: Kontrollera att < script >-snutten har lagts till i fältet End of < body > tag i Site Settings och att < div >-snutten finns i Embed Element.

Problem 2: Widgeten visas bara delvis

• Orsak: Embed Element har fel storlek eller placering.
• Lösning: Justera storlek och justering för Embed Element i Framer Editor.

Problem 3: Skriptfel

• Orsak: Skript som krockar eller blockerade externa resurser.
• Lösning: Öppna webbläsarkonsolen och kontrollera om det finns JavaScript-fel. Kontrollera att Framer har behörighet att ladda externa skript.

Avancerade tips

Letar du efter mer avancerade anpassningsalternativ? De här tipsen kan hjälpa. 

• Anpassa widgeten: Använd anpassad CSS för att formge widgeten och få den att passa sömlöst med webbplatsens design.
• Testa på olika enheter: Framers verktyg för responsiv design gör det enkelt att testa widgeten i mobil-, surfplatte- och datorvy för att säkerställa korrekt skalning.
• Lägg till widgetar på specifika sidor: Om du bara vill ha widgeten på specifika sidor lägger du till < div >-snutten i ett Embed Element på de önskade sidorna och kontrollerar att < script >-snutten finns i Site Settings.

Avslutande tankar 

Genom att följa den här guiden kan du förbättra din Framer-webbplats med dynamiska, AI-drivna interaktioner som är anpassade efter din målgrupps behov. Publicera ändringarna, testa konfigurationen och låt din Conversational AI börja engagera besökare redan i dag. Kontakta ElevenLabs kundtjänst om du behöver mer hjälp.

Registrera dig för AI Voice Agents i dag för att komma igång.