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

ElevenLabs Conversational AI är ett kraftfullt kundsupport-verktyg för att skapa interaktiva, AI-drivna upplevelser som ökar engagemanget. Har du en WordPress-webbplats kan du enkelt integrera anpassad HTML och JavaScript, inklusive dynamiska funktioner som ElevenLabs Conversational AI.

I den här guiden visar vi hur du lägger till Conversational AI-widgeten på din WordPress-webbplats med anpassade HTML-block för enskilda sidor och kodinjektion för global funktionalitet.

Innan du börjar

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

1. WordPress-plan: För WordPress.com-användare krävs ett Business- eller Commerce-abonnemang för att lägga till anpassad JavaScript. Användare med egenhostad WordPress kan lägga till kod utan dessa begränsningar.
2. ElevenLabs-konto: Konfigurera din Conversational AI-röstagent i ElevenLabs och kopiera inbäddningskoden, som innehåller kodsnuttar för < script > och < div >.
3. Grundläggande WordPress-kunskaper: Det är bra om du är bekant med att lägga till block, redigera sidor eller använda tillägg.

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 inbäddningskoden, som innehåller:
4. • En < script >-kodsnutt som laddar widgetens funktionalitet.
   • En < div >-kodsnutt som anger var widgeten ska visas.

Steg 2: Lägg till widgeten på en specifik sida med anpassade HTML-block

Om du vill visa widgeten på en specifik sida använder du WordPress anpassade HTML-block.

1. Logga in på din WordPress-administrationspanel.
2. Gå till Sidor och skapa antingen en ny sida eller redigera en befintlig.
3. Klicka på ikonen + för att lägga till ett nytt block.
4. Sök efter och välj Anpassad HTML bland blockalternativen.
5. Klistra in < div >-kodsnutten från din ElevenLabs-inbäddningskod i blocket.
6. Klicka på Förhandsgranska för att bekräfta att widgeten visas korrekt.
7. Publicera eller uppdatera sidan för att göra ändringarna synliga.

Steg 3: Lägg till skriptet globalt med ett tillägg eller temainställningar

För att widgeten ska fungera korrekt måste du lägga till < script >-kodsnutten globalt.

Alternativ A: Använda ett tillägg (rekommenderas för icke-utvecklare)

1. Installera och aktivera ett tillägg som Header Footer Code Manager.
2. Gå till tilläggets inställningar och skapa en ny kodsnutt.
3. Klistra in < script >-kodsnutten i avsnittet Footer.
4. Ställ in kodsnutten så att den körs på Alla sidor.
5. Spara ändringarna.

Alternativ B: Lägg till skriptet direkt i ditt tema

1. Gå till Utseende > Temaredigerare i din WordPress-administrationspanel.
2. Öppna filen footer.php i ditt aktiva tema.
3. Klistra in < script >-kodsnutten precis före den avslutande taggen < /body >.
4. Spara filen.

Steg 4: Publicera och testa

1. Besök sidan där du lade till widgeten för att bekräfta att den visas och fungerar korrekt.
2. Testa widgeten på flera enheter och i olika webbläsare för att säkerställa att den fungerar smidigt.

Vanliga problem och felsökning

Har du svårt att få widgeten att fungera? De här tipsen kan hjälpa. 

Problem 1: Widgeten visas inte

• Orsak: Kodsnuttarna < script > eller < div > saknas eller är felplacerade.
• Lösning: Kontrollera att < script > har lagts till globalt och att < div > har placerats på sidan.

Problem 2: Widgeten är feljusterad

• Orsak: Blockjustering eller saknad formatering.
• Lösning: Använd WordPress verktyg för blockjustering eller lägg till anpassad CSS för att placera widgeten korrekt.

Problem 3: Konflikter mellan tillägg

• Orsak: Andra tillägg stör körningen av JavaScript.
• Lösning: Inaktivera tillägg ett i taget för att identifiera konflikten.

Avancerade tips

Se de här tipsen om du vill ha mer hjälp med att få widgeten att fungera som du vill. 

• Anpassa widgeten: Använd avsnittet Anpassa > Ytterligare CSS i WordPress för att formge widgeten så att den matchar webbplatsens design.
• Testa på olika enheter: Testa widgeten på datorer, surfplattor och mobila enheter för att säkerställa en konsekvent användarupplevelse.
• Sidspecifika widgetar: Om du bara vill att widgeten ska visas på specifika sidor ska du inte lägga till < script >-kodsnutten globalt. Lägg i stället till den i ett tillägg eller block som riktas mot dessa sidor.

Avslutande tankar

Att lägga till ElevenLabs Conversational AI-widget på din WordPress-webbplats är ett effektivt sätt att engagera besökare med AI-drivna interaktioner. Oavsett om du bäddar in den på en enda sida eller på hela webbplatsen har WordPress verktygen du behöver för en smidig integrering.

Följ stegen ovan, testa implementeringen noggrant och gör justeringar vid behov. Om du stöter på problem är du välkommen att kontakta ElevenLabs kundtjänst för hjälp.

Eller, om du inte redan har gjort det, registrera dig för ElevenLabs Agents Platform i dag för att komma igång.