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

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

I den här guiden går vi igenom stegen för att lägga till widgeten på din Framer-webbplats. Du lär dig hur du konfigurerar webbplatsövergripande eller sid-specifika widgets och löser vanliga problem.

Innan du börjar

Innan du börjar, se till att du har följande:

1. Framer-konto: Tillgång till ett Framer-projekt med möjlighet att lägga till egen kod (tillgängligt på betalda planer).
2. ElevenLabs-konto: Konfigurera din Conversational AI-agent och kopiera dess inbäddnings kod (inklusive < script > och < div > snippets).
3. Kännedom om Framer: Grundläggande förståelse för Framers webbplatsinställningar och inbäddningselement

Steg-för-steg-guide

Steg 1: Förbered din ElevenLabs-widget

1. Logga in på ditt ElevenLabs-konto.
2. Gå till Conversational AI-sektionen.
3. Konfigurera din
4. • En < script > snippet för att ladda widgetens funktionalitet.
   • En < div > snippet för att definiera var widgeten ska visas.

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

1. Öppna ditt Framer-projekt.
2. Klicka på Projektinställningar i det övre högra hörnet.
3. Gå till fliken Allmänt och scrolla ner till avsnittet Egen kod.
4. Klistra in < script > snippet från din ElevenLabs inbäddningskod i fältet Slutet av < body > taggen.
5. Spara dina ändringar. Detta steg säkerställer att det nödvändiga skriptet laddas för din webbplats.

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

1. I ditt Framer-projekt, gå till sidan där du vill att widgeten ska visas.
2. Lägg till ett inbäddningselement från avsnittet Verktyg i Infoga-menyn.
3. Välj inbäddningselementet på din arbetsyta för att komma åt dess inställningar.
4. Byt typ till HTML.
5. Klistra in < div > snippet från ElevenLabs inbäddningskod i HTML-fältet.
6. Placera och storleksanpassa inbäddningselementet på din arbetsyta efter behov.

Steg 4: Publicera och testa

1. Klicka på Publicera för att göra dina ändringar live.
2. Öppna din webbplats i en webbläsare för att verifiera att widgeten visas och fungerar korrekt.
3. • Obs: Egen kod visas inte i Framers förhandsgranskningsläge—den måste publiceras för att ses.

Vanliga problem och felsökning

Om du har problem med att få integrationen att fungera, oroa dig inte—kolla in dessa felsökningstips nedan.

Problem 1: Widgeten visas inte

• Orsak: Saknad eller felplacerad < script > eller < div > snippet.
• Lösning: Se till att < script > snippet är tillagd i fältet Slutet av < body > taggen i webbplatsinställningarna och att < div > snippet finns i inbäddningselementet.

Problem 2: Widgeten är bara delvis synlig

• Orsak: Inbäddningselementet är felaktigt storleksanpassat eller placerat.
• Lösning: Justera dimensionerna och placeringen av inbäddningselementet i Framer Editor.

Problem 3: Skriptfel

• Orsak: Konflikterande skript eller blockerade externa resurser.
• Lösning: Öppna webbläsarkonsolen för att kontrollera JavaScript-fel. Se till att Framer har behörighet att ladda externa skript.

Avancerade tips

Letar du efter mer avancerade anpassningsalternativ? Dessa tips kan hjälpa.

• Anpassa widgeten: Använd anpassad CSS för att styla widgeten och integrera den sömlöst med din webbplats design.
• Testa på olika enheter: Framers responsiva designverktyg gör det enkelt att testa widgeten på mobil, surfplatta och skrivbord för att säkerställa korrekt skalning.
• Lägga till widgets på specifika sidor: För att inkludera widgeten endast på specifika sidor, lägg till < div > snippet i ett inbäddningselement på de önskade sidorna och se till att < script > snippet finns i webbplatsinställningarna.

Avslutande tankar

Genom att följa denna guide kan du förbättra din Framer-webbplats med dynamiska, AI-drivna interaktioner, anpassade efter din publiks behov. Publicera dina ändringar, testa din installation och låt din Conversational AI börja engagera besökare idag. För ytterligare hjälp, kontakta ElevenLabs support.

Registrera dig för