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

Vill du ta din Ghost-webbplats till nästa nivå? ElevenLabs’ Conversational AI förvandlar kundengagemang. Genom att lägga till ElevenLabs’ Conversational AI på din Ghost-plattform kan du erbjuda interaktiv, verklighetstrogen kundsupport konversationer som för dina användare närmare ditt varumärke.

Innan du börjar

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

1. En Ghost-webbplats: Du behöver en betald plan eller en självhostad Ghost-instans. Anpassad JavaScript stöds inte på Ghosts gratisplan.
2. Tillgång till Ghosts adminpanel: Du behöver tillgång till antingen inställningarna för Code Injection eller Editorn.
3. Ett ElevenLabs-konto: Konfigurera en Conversational AI-agent och kopiera dess JavaScript-inbäddningskod.

Steg-för-steg-guide

Alternativ 1: Lägg till widgeten globalt med Code Injection

Om du vill att widgeten ska visas på alla sidor av din webbplats, använd Ghosts Code Injection-funktion.

Steg 1: Förbered din widget

1. Logga in på ditt ElevenLabs-konto.
2. Gå till Conversational AI-sektionen och konfigurera din agent.
3. Kopiera den tillhandahållna JavaScript-inbäddningskoden.

Steg 2: Gå till inställningarna för Code Injection

1. Logga in på din Ghost Admin Panel.
2. Gå till Inställningar > Code Injection.

Steg 3: Bädda in JavaScript-koden

1. Klistra in den kopierade JavaScript-koden i fältet för sidfot.
2. Spara dina ändringar.

Steg 4: Testa integrationen

1. Öppna din Ghost-webbplats för att säkerställa att widgeten visas och fungerar som förväntat.
2. Om den inte visas, dubbelkolla kodplaceringen och din ElevenLabs-konfiguration.

Alternativ 2: Lägg till widgeten på specifika sidor eller inlägg med plustecknet

Om du föredrar att widgeten endast visas på vissa sidor eller inlägg kan du bädda in den direkt i innehållet med plustecknet i Ghosts Editor.

Steg 1: Förbered din widget

1. Kopiera JavaScript-inbäddningskoden från ditt ElevenLabs-konto.

Steg 2: Redigera ett inlägg eller en sida i Ghost

1. Öppna Ghost Editorn för sidan eller inlägget där du vill lägga till widgeten.
2. Klicka på plustecknet (+) för att öppna blockmenyn.

Steg 3: Infoga ett HTML-block

1. Välj HTML från blockalternativen.
2. Klistra in JavaScript-koden i HTML-blocket.

Steg 4: Publicera och testa

1. Spara och publicera sidan eller inlägget.
2. Öppna sidan för att bekräfta att widgeten visas och fungerar som förväntat.

Vanliga problem och felsökning

Fungerar inte integrationen som förväntat? Följ stegen nedan för att lösa problemen du stöter på.

Problem 1: Widgeten laddas inte

• Orsak: JavaScript-koden är felaktigt tillagd eller ofullständig.
• Lösning: Dubbelkolla kodens placering och bekräfta att din ElevenLabs-agent är korrekt konfigurerad.

Problem 2: Skriptkonflikter

• Orsak: Andra anpassade skript i inställningarna för Code Injection kan komma i konflikt med widgeten.
• Lösning: Inaktivera tillfälligt andra skript för att testa för konflikter. Lägg till dem igen en i taget för att identifiera problemet.

Avancerade tips

Letar du efter fler sätt att anpassa widgeten? Kolla in tipsen nedan för hjälp.

• Anpassa widgetens placering: Använd CSS för att justera widgetens utseende eller position när den läggs till via Code Injection eller HTML-blocket. Om du vill att widgeten ska visas på en konsekvent plats (t.ex. sidfot eller sidopanel), redigera dina Ghost-temafiler. Lägg till JavaScript-inbäddningskoden i default.hbs-filen och ladda sedan upp ditt tema igen.
• Mobilanpassning: Testa widgeten på mobila enheter för att säkerställa att den skalas och fungerar korrekt. Använd Ghosts responsiva förhandsvisning eller testa direkt på fysiska enheter.
• Webbläsartestning: Verifiera att widgeten fungerar i populära webbläsare, inklusive Chrome, Firefox, Safari och Edge, för att säkerställa konsekvens för alla användare.
• Felsökning av JavaScript-problem: Använd webbläsarens utvecklarverktyg (t.ex. Chrome DevTools) för att inspektera eventuella fel i konsolen. Åtgärda problem som saknade beroenden eller skriptkonflikter.

Slutliga tankar

Att integrera ElevenLabs Conversational AI-widget i Ghost är enkelt och flexibelt, vilket gör att du kan förbättra din webbplats interaktivitet med minimal ansträngning. Om du stöter på problem, gå igenom stegen igen, testa noggrant eller kontakta ElevenLabs support om det behövs.

Registrera dig för Conversational AI idag för att komma igång.