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 engagemang. Om du har 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-sida med hjälp av Custom HTML Blocks för specifika sidor och Code Injection för global funktionalitet.

Innan du börjar

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

1. WordPress-plan: För WordPress.com-användare krävs en Business- eller Commerce-plan för att lägga till anpassad JavaScript. Självhostade WordPress-användare kan lägga till kod utan dessa begränsningar.
2. ElevenLabs-konto: Konfigurera din Conversational AI-agent i ElevenLabs och kopiera inbäddningskoden, som inkluderar < script > och < div > snippets.
3. Grundläggande WordPress-kunskaper: Kännedom om att lägga till block, redigera sidor eller använda plugins ä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. Konfigurera din AI-agent och 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.

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

För att visa widgeten på en specifik sida, använd WordPress’s Custom HTML Block.

1. Logga in på din WordPress-instrumentpanel.
2. Navigera 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 Custom HTML från blockalternativen.
5. Klistra in < div > snippet 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 live.

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

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

Alternativ A: Använda en plugin (rekommenderas för icke-utvecklare)

1. Installera och aktivera en plugin som Header Footer Code Manager.
2. Navigera till plugin-inställningarna och skapa en ny kodsnutt.
3. Klistra in < script > snippet i Footer-sektionen.
4. Ställ in snutten att köras på Alla Sidor.
5. Spara dina ändringar.

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

1. Gå till Utseende > Temaredigerare i din WordPress-instrumentpanel.
2. Öppna footer.php-filen i ditt aktiva tema.
3. Klistra in < script > snippet precis före den avslutande < /body > taggen.
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 webbläsare för att säkerställa att den fungerar smidigt.

Vanliga problem och felsökning

Har du problem med att få widgeten att fungera? Dessa tips kan hjälpa.

Problem 1: Widgeten visas inte

• Orsak: Saknade eller felplacerade < script > eller < div > snippets.
• Lösning: Kontrollera att < script > är tillagt globalt och att < div > är placerad på sidan.

Problem 2: Widgeten är feljusterad

• Orsak: Blockjustering eller saknad styling.
• Lösning: Använd WordPress’s blockjusteringsverktyg eller lägg till anpassad CSS för att positionera widgeten korrekt.

Problem 3: Plugin-konflikter

• Orsak: Andra plugins stör JavaScript-exekvering.
• Lösning: Avaktivera plugins en i taget för att identifiera konflikten.

Avancerade tips

Kolla in dessa tips för mer hjälp med att få widgeten att fungera som du vill. 

• Anpassa widgeten: Använd WordPress’s Anpassa > Ytterligare CSS-sektion för att styla widgeten så att den matchar din webbplats design.
• Testa på olika enheter: Testa widgeten på dator, surfplatta och mobil för att säkerställa en konsekvent användarupplevelse.
• Sid-specifika widgets: Om du vill att widgeten bara ska visas på specifika sidor, undvik att lägga till < script > snippet globalt. Inkludera den istället i en plugin eller block som riktar sig mot dessa sidor.

Slutliga 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 enskild sida eller över hela din webbplats, ger WordPress de verktyg du behöver för sömlös integration.

Följ stegen som beskrivs här, testa din implementering noggrant och gör justeringar vid behov. Om du stöter på problem, tveka inte att kontakta ElevenLabs support för hjälp.

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