Hur du lägger till ElevenLabs conversational AI-widget på din Webflow-webbplats
- Publicerad
- Senast uppdaterad
LyssnaLyssna på den här artikeln
Vill du förbättra kundupplevelsen? Conversational AI kan hjälpa. Genom att lägga till ElevenLabs Conversational AI på din Webflow-webbplats kan besökare föra naturliga samtal, som om de faktiskt pratade med någon i ditt team.
I den här guiden visar vi hur du lägger till ElevenLabs Conversational AI-widget på din Webflow-webbplats och integrerar den med anpassad HTML och JavaScript.
Innan du börjar
Se till att du har följande innan du börjar:
- Webflow-konto: Du behöver en aktiv Core-, Growth-, Agency- eller Freelancer Workspace, eller en Site Plan, för att få åtkomst till Embed Element.
- ElevenLabs-konto: Konfigurera din Conversational AI-röstagent i ElevenLabs och kopiera den angivna inbäddningskoden (som innehåller kodavsnitt för < script > och < div >).
- Kunskap om Webflows Designer: Det är bra att ha grundläggande kunskap om hur du lägger till och redigerar Embed Elements i Webflow.
Steg-för-steg-guide
Steg 1: Förbered din ElevenLabs-widget
- Logga in på ditt ElevenLabs-konto.
- Gå till avsnittet Conversational AI.
- Kopiera inbäddningskoden, som innehåller:
- Ett < script >-kodavsnitt som laddar widgetens funktioner.
- Ett < div >-kodavsnitt som anger var widgeten ska visas på sidan.
Steg 2: Lägg till widgeten på en Webflow-sida
Använd Embed Element för att visa widgeten på en viss sida.
- Öppna ditt Webflow-projekt i Designer.
- Gå till sidan där du vill att widgeten ska visas.
- Dra Embed Element från Elements Panel till önskad plats på sidan.
- Klistra in < div >-kodavsnittet från ElevenLabs inbäddningskod i Embed Elements kodredigerare.
- Klicka på Save & Close för att tillämpa ändringarna.
Obs! Embed Element fungerar som en platshållare för widgeten i Designer. Den faktiska widgeten visas först när webbplatsen har publicerats.
Steg 3: Lägg till skriptet globalt
För att widgeten ska fungera korrekt måste du lägga till < script >-kodavsnittet globalt på webbplatsen.
- Gå till Webflow Dashboard och öppna Project Settings.
- Gå till fliken Custom Code.
- Klistra in < script >-kodavsnittet i avsnittet Footer Code. Då laddas skriptet på alla sidor där widgeten används.
- Klicka på Save Changes.
Steg 4: Publicera och testa
- Publicera webbplatsen på Webflows stagingdomän eller din egen domän.
- Öppna webbplatsen i en webbläsare för att kontrollera att widgeten visas och fungerar som förväntat.
Viktigt: Anpassad kod renderas inte i Webflows Designer. Du måste publicera webbplatsen för att se widgeten live.
Vanliga problem och felsökning
Har du problem med att konfigurera integrationen? Oroa dig inte – tipsen nedan hjälper dig.
1. Widgeten visas inte
- Orsak: < script >- eller < div >-kodavsnitt saknas eller ligger fel.
- Lösning: Kontrollera att < script >-kodavsnittet finns i avsnittet Footer Code och att < div >-kodavsnittet är korrekt placerat i ett Embed Element.
2. Widgeten är feljusterad
- Orsak: Embed Element är fel placerat eller formaterat.
- Lösning: Använd Webflows Style Panel för att justera storlek och justering för Embed Element.
3. Fel
- Orsak: Konflikter med andra skript eller begränsningar i webbläsaren.
- Lösning: Använd webbläsarens utvecklarkonsol för att identifiera och åtgärda JavaScript-fel.
Avancerade tips
Här är vad du behöver veta om du vill anpassa widgeten, testa på olika enheter eller återanvända den på flera sidor.
- Anpassa widgeten: Använd Webflows Style Panel eller anpassad CSS för att justera widgetens utseende, till exempel storlek, justering eller färger.
- Testa på olika enheter: Använd Webflows verktyg för responsiv design för att säkerställa att widgeten fungerar smidigt på datorer, surfplattor och mobila enheter.
- Återanvänd widgeten: Spara Embed Element som en Component om du planerar att använda widgeten på flera sidor. Det ger en enhetlig formatering och enklare hantering.
Sammanfattning
Det är enkelt att integrera ElevenLabs Conversational AI-widget i Webflow tack vare plattformens funktioner Embed Element och Custom Code. Oavsett om du vill öka engagemanget på en enskild sida eller på hela webbplatsen kan du följa stegen ovan för att komma igång.
Om du behöver mer hjälp kan du kontakta ElevenLabs support eller besöka Webflows communityforum för mer vägledning.
Om du inte redan har gjort det kan du registrera dig för ElevenLabs AI Agents Platform redan i dag för att komma igång.
