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

Vill du öka engagemanget och ge nästa nivå av kundsupport på din Squarespace-webbplats? ElevenLabs’ Conversational AI kan hjälpa till.

Den här guiden visar hur du lägger till widgeten på din Squarespace-sida, oavsett om du vill ha den på en specifik sida eller över hela webbplatsen. Den förklarar också vanliga problem du kan stöta på och ger dig felsökningstips för att lösa dessa hinder.

Innan du börjar

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

1. Squarespace-konto: Tillgång till en Business- eller Commerce-plan, eftersom dessa planer tillåter användning av Code Blocks och Code Injection.
2. ElevenLabs-konto: Konfigurera din Conversational AI-agent i ElevenLabs och kopiera inbäddningskoden (som innehåller både < script > och < div > snippets).
3. Bekantskap med Squarespace: Grundläggande kunskap om att lägga till block eller navigera i Code Injection-inställningarna.

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 och konfigurera din AI-agent.
3. Kopiera den tillhandahållna inbäddningskoden, som består av:
4. • En < script > snippet för att ladda widgetens funktionalitet.
   • En < div > snippet för att specificera var widgeten ska visas.

Steg 2: Lägg till widgeten med ett kodblock

Om du vill ha widgeten på en specifik sida eller blogginlägg, använd ett kodblock.

1. Navigera till Squarespace-sidan eller inlägget där du vill att widgeten ska visas.
2. Klicka på + symbolen för att lägga till ett block.
3. Välj Kod från menyn.
4. Klistra in < div > snippet från ElevenLabs inbäddningskod i Kodblocket.
5. Spara blocket och se till att det är korrekt placerat på sidan.

Steg 3: Lägg till skriptet med Code Injection

För att säkerställa att widgeten fungerar korrekt, måste du inkludera < script > snippet med hjälp av Code Injection.

1. Från din Squarespace-instrumentpanel, gå till Inställningar > Avancerat > Code Injection.
2. Klistra in < script > snippet i sidfotssektionen.
3. Spara dina ändringar.

Obs: Sidfotssektionen säkerställer att skriptet laddas över alla sidor, vilket möjliggör funktionaliteten för widgets som lagts till via Kodblock.

Steg 4: Publicera och testa

1. Publicera sidan eller inlägget där widgeten har lagts till.
2. Öppna din live-webbplats för att verifiera att widgeten visas och fungerar korrekt. Viktigt: Anpassad kod visas ofta inte i Squarespace’s redigeringsförhandsvisning—publicera sidan för att testa integrationen.

Vanliga problem och felsökning

Om du har problem med att få integrationen att fungera korrekt, oroa dig inte—dessa tips bör hjälpa.

Problem 1: Widgeten visas inte

• Orsak: Saknade eller felplacerade < script > eller < div > snippets.
• Lösning: Se till att < script > snippet finns i sidfotssektionen för Code Injection och att
  snippet är korrekt tillagd i ett Kodblock.

Problem 2: Widgeten är bara delvis synlig

• Orsak: Kodblockets storlek eller layoutkonflikter.
• Lösning: Justera blockets storlek och placering. Använd anpassad CSS vid behov för exakt placering.

Problem 3: Skriptfel

• Orsak: Konflikterande skript eller webbläsarbegränsningar.
• Lösning: Använd webbläsarkonsolen (t.ex. Chrome DevTools) för att identifiera fel. Lös skriptkonflikter eller kontrollera CORS-problem.

Avancerade tips

Letar du efter mer avancerade anpassningsalternativ? Kolla in tipsen nedan.

• Anpassa widgeten: Använd anpassad CSS i Squarespace Design > Anpassad CSS-sektionen för att styla widgeten. Justera färger, typsnitt eller placering för att passa din webbplats design.
• Testa på olika enheter: Testa din webbplats på olika enheter (dator, surfplatta och mobil) för att säkerställa att widgeten skalas och fungerar korrekt på alla skärmstorlekar.
• Lägga till widgets på flera sidor: För att inkludera widgeten på flera sidor, upprepa Kodblock-processen för varje sida och se till att skriptet är aktivt i sidfotssektionen för Code Injection.

Slutliga tankar

Att lägga till ElevenLabs Conversational AI-widget på din Squarespace-webbplats är ett enkelt sätt att förbättra interaktivitet och engagemang. Oavsett om du bäddar in den på en enskild sida eller över hela din webbplats, gör Squarespace’s Kodblock och Code Injection-funktioner integrationen smidig.

Följ denna guide steg-för-steg, testa din installation noggrant och njut av fördelarna med conversational AI på din webbplats. För ytterligare hjälp, kontakta ElevenLabs support.

Eller, om du inte redan har gjort det, registrera dig för Conversational AI idag.