Genom att lägga till ChatLab på din webbplats kan besökare interagera med din AI-chattbot direkt på sidan. Den här guiden förklarar hur du hämtar inbäddningskoden och lägger till den på din webbplats.
Öppna fliken Deploy
Välj din chattbot från huvudpanelen och klicka sedan på fliken Deploy (Driftsätt).
Välja plattform
Panelen Select Platform (Välj plattform) till höger visar alla plattformar som stöds. Klicka på den plattform som matchar din webbplats för att se anpassade installationsinstruktioner.
Plattformar som stöds:
- HTML Code - fungerar med alla webbplatser där du kan redigera HTML-koden
- WordPress - via det officiella ChatLab-tillägget eller manuell kodinbäddning
- Wix - via Settings > Advanced > Custom Code
- Webflow - via Site Settings > Custom Code (kräver en betalplan för Webflow)
- PrestaShop - via ChatLabs PrestaShop-modul eller manuell kodinbäddning
- Shopify - via filen theme.liquid
- WooCommerce - via WordPress-tillägget eller manuell kodinbäddning
- Abicart - via Store design > Themes > Site header
- CS-Cart - via Design > Layouts > Custom HTML code
Varje plattform visar steg-för-steg-instruktioner som är specifika för just den integrationen. För plattformar med egna hjälpartiklar visas länken View full instructions (Visa fullständiga instruktioner) längst ner.
Lägga till via HTML Code
Alternativet HTML Code fungerar på alla webbplatser där du har åtkomst till källkoden. Du kommer att se två inbäddningsalternativ: Widget och Iframe.
Läget Widget
Fliken Widget visar koden som lägger till en chattikon på din webbplats. När besökare klickar på ikonen öppnas en chattruta.
- Klicka på fliken Widget
- Klicka på Copy to clipboard (Kopiera till urklipp) för att kopiera koden
- Leta upp
<head>-sektionen på din webbplats - Klistra in koden som det sista elementet i
<head>-sektionen - Uppdatera webbläsaren för att kontrollera att chattbotikonen visas
Läget Iframe
Fliken Iframe visar koden som bäddar in chattbotten direkt i sidans innehåll. Chattbotten är alltid synlig och kan omges av andra sidelement.
- Klicka på fliken Iframe
- Klicka på Copy to clipboard (Kopiera till urklipp) för att kopiera koden
- Klistra in koden var som helst i webbplatsens HTML där du vill att chattbotten ska visas
- Justera attributen
widthochheightså att de passar din layout
Osäker på vad du ska välja? Läs Vad är skillnaden mellan widget och Iframe? för en detaljerad jämförelse.
Lägga till via WordPress eller WooCommerce
Plattformarna WordPress och WooCommerce erbjuder två installationsmetoder: Plugin Installation (Tilläggsinstallation, rekommenderas) och Manual Installation (Manuell installation).
Tilläggsinstallation (rekommenderas)
- Klicka på Get WordPress Plugin (Hämta WordPress-tillägg) för att öppna WordPress tilläggskatalog
- Installera och aktivera tillägget "ChatLab - AI Chatbot"
- Gå till tilläggets inställningssida i WordPress-administrationen
- Kopiera ditt Bot ID från ChatLab med knappen Copy (Kopiera)
- Klistra in Bot ID i tilläggets inställningar och spara
- Kontrollera att chattbotten visas på din webbplats
Manuell installation
Växla till fliken Manual Installation för kodbaserad installation:
- Installera tillägget "Insert Headers and Footers" i WordPress
- Gå till Settings > Insert Headers and Footers
- Kopiera koden från ChatLab och klistra in den i sektionen Header
- Spara och uppdatera din webbplats
För fullständiga detaljer, se Hur du lägger till din chattbot på en WordPress-webbplats.
Lägga till via andra plattformar
För Shopify, Wix, Webflow, PrestaShop, Abicart och CS-Cart väljer du plattformen i panelen Select Platform. Varje plattform visar:
- Inbäddningskoden med alternativen Widget och Iframe
- Plattformsspecifika steg-för-steg-instruktioner för inklistring
- Länken View full instructions till den fullständiga plattformsguiden
GDPR-efterlevnad
Om du behöver att chattbotten endast laddas efter att samtycke för cookies har getts, se Konfigurera ChatLab för GDPR-efterlevnad för integrationsguider för CookieBot, Usercentrics och Google Tag Manager.
Content Security Policy (CSP)
Om din webbplats använder Content Security Policy-headers måste du tillåta ChatLab-domäner för att chattbotten ska fungera. De direktiv som krävs beror på om du använder läget Widget eller Iframe.
Läget Widget
Widgeten laddar ett skript på din sida som skapar chattgränssnittet. Lägg till dessa direktiv i din CSP-header:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Som standard infogar widgeten vissa formatmallar inline, så 'unsafe-inline' krävs i style-src.
CSP Safe Mode - undvik unsafe-inline
Om webbplatsens säkerhetspolicy inte tillåter 'unsafe-inline' i style-src kan du aktivera CSP Safe Mode (Säkert CSP-läge). Detta gör att widgeten laddar alla formatmallar från externa CSS-filer istället för att infoga dem inline.
För att aktivera det lägger du till window.aichatbotCspSafe = true; före ChatLab-skripttaggen:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Med CSP Safe Mode aktiverat behöver du inte längre 'unsafe-inline', och din CSP-header kan använda:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Läget Iframe
Iframe laddar hela chattbotten från en enda URL, så det behövs bara ett direktiv:
frame-src https://api.chatlab.com;