Att lägga till ChatLab på din webbplats låter besökare interagera med din AI-chattbot direkt på sajten. Den här guiden förklarar hur du hämtar inbäddningskoden och lägger till den på din webbplats.
Innan du börjar
Skapa och träna din chattbot innan du delar den med kunder. För installationen behöver du också behörighet att redigera och publicera webbplatsen. Se Hur du skapar din första chattbot.
Öppna fliken Deploy
Välj din chattbot från huvudpanelen och klicka sedan på fliken Deploy (distribuera).
Välja din plattform
Panelen Select Platform (välj plattform) till höger listar de plattformar som stöds i två grupper: Website (webbplats), för att placera chattbotten på sidor du kontrollerar, och Messaging channels (meddelandekanaler), för att ansluta den till ett befintligt konversationskonto. Klicka på alternativet som matchar var du vill att chattbotten ska visas för att se anpassade instruktioner.
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 > Custom Code
- Webflow - via Site settings > Custom code, med åtkomst för anpassad kod aktiverad för din webbplats eller arbetsyta
- 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 Butiksdesign > Teman > Webbplatshuvud
- CS-Cart - via Design > Layouter > Anpassad HTML-kod
Meddelandekanaler:
- WhatsApp Business - svarar i ett WhatsApp Business-konto, se WhatsApp för företag
- Facebook Messenger - svarar på meddelanden på din Facebook-sida, se Integration med Facebook Messenger
- Instagram - svarar på direktmeddelanden på Instagram, se Integration med Instagram
Meddelandekanaler använder inte inbäddningskoden nedan. De ansluts till ett konto du redan äger, så ingen kod klistras in på en webbplats.
Varje plattform visar steg-för-steg-instruktioner som är specifika för just den integrationen. För plattformar med dedikerade 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 med alla webbplatser där du har åtkomst till källkoden. Du kommer att se två inbäddningsalternativ: Widget och Iframe.
Widget-läge
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 din webbläsare för att kontrollera att chattbotikonen visas
Iframe-läge
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 för att kopiera koden
- Klistra in koden var som helst i din webbplats HTML där du vill att chattbotten ska visas
- Justera attributen
widthochheightså att de passar din layout
Är du 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 (installation via tillägg, rekommenderas) och Manual Installation (manuell installation).
Installation via tillägg (rekommenderas)
- Klicka på Get the plugin on WordPress.org (hämta tillägget på WordPress.org), installera och aktivera sedan ChatLab-tillägget.
- Öppna ChatLab i WordPress. För en WooCommerce-butik behåller du WooCommerce integration markerat för att även ansluta butiksdata.
- Klicka på Continue (fortsätt), logga in på ChatLab och välj din chattbot.
- Slutför anslutningen, öppna din publicerade webbplats och skicka ett testmeddelande.
Manuell installation
Växla till Manual Installation och kopiera Widget-koden till din webbplats sidhuvud med hjälp av ett tillägg för kodinbäddning. För Iframe använder du ett HTML-block i sidinnehållet som tillåter iframe-HTML. Publicera sidan och testa chatten. Installera widgeten bara en gång, antingen via tillägget eller via ett manuellt kodfragment.
För fullständig information, 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 guiden för plattformen
GDPR-efterlevnad
Om du behöver att din chattbot laddas först efter att samtycke till cookies har getts, se Konfigurera ChatLab för GDPR-efterlevnad för integrationsguider som täcker CookieBot, Usercentrics och Google Tag Manager.
Content Security Policy (CSP)
Om din webbplats använder Content Security Policy-headers måste du tillåta ChatLabs domäner för att chattbotten ska fungera. Vilka direktiv som krävs beror på om du använder Widget- eller Iframe-läge.
Widget-läge
Widgeten laddar ett skript på din sida som skapar chattgränssnittet. Slå samman följande ChatLab-ursprung med dina befintliga CSP-direktiv; ersätt inte policyn för resten av din webbplats:
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 injicerar widgeten vissa formatmallar inline. Din policy måste också godkänna det infogade konfigurationsskriptet, till exempel med en CSP-nonce eller hash. Tillåt bildursprung som används av din bot och dina produktkort i img-src; ljud och andra aktiverade funktioner kan kräva ytterligare ursprung. För en byrådomän använder du domänerna från ditt genererade kodfragment.
CSP Safe Mode - undvik unsafe-inline
Om din webbplats säkerhetspolicy inte tillåter 'unsafe-inline' i style-src kan du aktivera CSP Safe Mode. Detta läser in widgetens behållarformatmall från en extern CSS-fil. Det godkänner inte ditt infogade konfigurationsskript och garanterar inte att alla anpassade formatmallar och aktiverade funktioner uppfyller din policy.
För att aktivera det lägger du till window.aichatbotCspSafe = true; före ChatLabs script-tagg:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
När CSP Safe Mode är aktiverat kan du testa en formatmallspolicy utan 'unsafe-inline'. En bra utgångspunkt är:
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;
Iframe-läge
Föräldrasidan måste tillåta ursprunget i den kopierade iframe-webbadressen. För standard ChatLab-hosting lägger du till detta i den befintliga policyn:
frame-src https://api.chatlab.com;