Så lägger du 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 kundengagemanget eller förbättra din kundsupport kan Conversational AI hjälpa dig. 

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 specifika sidor och lösa vanliga problem.

Innan du börjar

Kontrollera att du har följande innan du börjar:

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 kodavsnitten < script > och < div >).
3. Kunskap om Framer: Grundläggande förståelse för Framer 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 medföljande inbäddningskoden, som innehåller:
4. • Ett < script >-kodavsnitt som laddar widgetens funktioner.
   • Ett < div >-kodavsnitt som anger var widgeten ska visas.

Steg 2: Lägg till skriptet i Framer-webbplatsens inställningar

1. Öppna ditt Framer-projekt.
2. Klicka på Project Settings i det övre högra hörnet.
3. Gå till fliken General och skrolla ned till avsnittet Custom Code.
4. Klistra in < script >-kodavsnittet från din ElevenLabs-inbäddningskod i fältet End of < body > tag.
5. Spara ändringarna. Då säkerställer du att det skript som behövs laddas för din webbplats.

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

1. Gå till sidan 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å arbetsytan för att komma åt dess inställningar.
4. Ändra Type till HTML.
5. Klistra in < div >-kodavsnittet från ElevenLabs-inbäddningskoden i HTML-fältet.
6. Placera och ändra storleken på Embed Element på arbetsytan efter behov.

Steg 4: Publicera och testa

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

Vanliga problem och felsökning

Om du har svårt att få integrationen att fungera behöver du inte oroa dig – läs felsökningstipsen nedan. 

Problem 1: Widgeten visas inte

• Orsak: < script >- eller < div >-kodavsnitt saknas eller har placerats fel.
• Lösning: Kontrollera att < script >-kodavsnittet har lagts till i fältet End of < body > tag i Site Settings och att < div >-kodavsnittet 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: Konflikterande skript eller blockerade externa resurser.
• Lösning: Öppna webbläsarkonsolen för att kontrollera JavaScript-fel. Kontrollera att Framer har behörighet att ladda externa skript.

Avancerade tips

Letar du efter mer avancerade anpassningsmöjligheter? De här tipsen kan hjälpa. 

• Anpassa widgeten: Använd anpassad CSS för att formge widgeten och integrera den smidigt med webbplatsens design.
• Testa på olika enheter: Med Framers responsiva designverktyg kan du enkelt testa widgeten i vyer för mobil, surfplatta och dator för att säkerställa att den skalas korrekt.
• Lägga till widgetar på specifika sidor: Om du bara vill inkludera widgeten på specifika sidor lägger du till < div >-kodavsnittet i ett Embed Element på de aktuella sidorna och kontrollerar att < script >-kodavsnittet 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 målgruppens behov. Publicera ändringarna, testa konfigurationen och låt din konversations-AI börja engagera besökarna redan i dag. Kontakta ElevenLabs support om du behöver mer hjälp.

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