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

Vill du förbättra din kundupplevelse? Conversational AI kan hjälpa. Genom att lägga till ElevenLabs’ Conversational AI på din Webflow-webbplats kan besökare ha naturliga samtal som om de faktiskt pratade med en medlem av ditt team.

I den här guiden går vi igenom hur du lägger till ElevenLabs Conversational AI-widget på din Webflow-webbplats och integrerar widgeten med anpassad HTML och JavaScript.

Innan du börjar

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

1. Webflow-konto: Du behöver ett aktivt Core-, Growth-, Agency- eller Freelancer Workspace, eller en Site Plan, för att få tillgång till Embed Element.
2. ElevenLabs-konto: Konfigurera din Conversational AI-agent i ElevenLabs och kopiera den medföljande inbäddningskoden (som inkluderar < script > och < div > snippets).
3. Bekantskap med Webflows Designer: Grundläggande förståelse för hur man lägger till och redigerar Embed Elements i Webflow är hjälpsamt.

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. Kopiera inbäddningskoden, som inkluderar:
4. • En < script > snippet för att ladda widgetens funktionalitet.
   • En < div > snippet för att definiera var widgeten ska visas på sidan.

Steg 2: Lägg till widgeten på en Webflow-sida

För att visa widgeten på en specifik sida, använd Embed Element.

1. Öppna ditt Webflow-projekt i Designer.
2. Navigera till sidan där du vill att widgeten ska visas.
3. Från Elements Panel, dra Embed Element till önskad plats på sidan.
4. I Embed Element’s kodredigerare, klistra in < div > snippet från ElevenLabs inbäddningskod.
5. Klicka på Spara & Stäng för att tillämpa ändringarna.

Obs: Embed Element fungerar som en platshållare för din widget i Designer. Den faktiska widgeten visas först när webbplatsen publiceras.

Steg 3: Lägg till skriptet globalt

För att säkerställa att widgeten fungerar korrekt, behöver du inkludera < script > snippet globalt på din webbplats.

1. Gå till din Webflow Dashboard och öppna Projektinställningar.
2. Navigera till fliken Custom Code.
3. Klistra in < script > snippet i avsnittet Footer Code. Detta säkerställer att skriptet laddas på alla sidor där widgeten används.
4. Klicka på Spara ändringar.

Steg 4: Publicera och testa

1. Publicera din webbplats till Webflows staging-domän eller din egen domän.
2. Öppna din webbplats i en webbläsare för att verifiera att widgeten visas och fungerar som förväntat.

Viktigt: Anpassad kod renderas inte i Webflows Designer. Du måste publicera din webbplats för att se widgeten live.

Vanliga problem och felsökning

Har du problem med att ställa in integrationen? Oroa dig inte—dessa tips nedan bör hjälpa.

1. Widget visas inte

• Orsak: Saknade eller felplacerade < script > eller < div > snippets.
• Lösning: Se till att < script > snippet finns i avsnittet Footer Code, och att < div > snippet är korrekt placerad i ett Embed Element.

2. Widget feljustering

• Orsak: Felaktig placering eller styling av Embed Element.
• Lösning: Använd Webflows Style Panel för att justera dimensioner och justering av Embed Element.

3. Fel

• Orsak: Konflikter med andra skript eller webbläsarbegränsningar.
• Lösning: Använd webbläsarens utvecklarkonsol för att identifiera och åtgärda JavaScript-fel.

Avancerade tips

Om du vill anpassa widgeten, testa på olika enheter eller återanvända widgeten på flera sidor, här är vad du behöver veta.

• Anpassa widgeten: Använd Webflows Style Panel eller anpassad CSS för att justera widgetens utseende, såsom storlek, justering eller färger.
• Testa på olika enheter: Använd Webflows responsiva designverktyg för att säkerställa att widgeten fungerar sömlöst på datorer, surfplattor och mobila enheter.
• Återanvända widgeten: Spara Embed Element som en komponent om du planerar att använda widgeten på flera sidor. Detta möjliggör konsekvent styling och enklare hantering.

Slutliga tankar

Att integrera ElevenLabs Conversational AI-widget i Webflow är enkelt tack vare plattformens Embed Element och Custom Code-funktioner. Oavsett om du vill öka engagemanget på en enskild sida eller över hela din webbplats, följ stegen ovan för att komma igång.

För ytterligare hjälp, tveka inte att kontakta ElevenLabs support eller utforska Webflows community-forum för ytterligare vägledning.

Om du inte redan har gjort det, registrera dig för ElevenLabs idag för att komma igång.

Vanliga frågor