Å legge til ChatLab på nettstedet ditt lar besøkende samhandle med AI-chatboten din direkte på siden din. Denne veiledningen forklarer hvordan du henter innbyggingskoden og legger den til på nettstedet ditt.
Åpne Deploy-fanen
Velg chatboten din fra hovedoversikten, og klikk deretter på Deploy-fanen (publiser).
Velge plattform
Panelet Select Platform (velg plattform) til høyre viser alle støttede plattformer. Klikk på plattformen som samsvarer med nettstedet ditt for å se tilpassede installasjonsinstruksjoner.
Støttede plattformer:
- HTML Code - fungerer med alle nettsteder der du kan redigere HTML-koden
- WordPress - via den offisielle ChatLab-pluginen eller manuell innsetting av kode
- Wix - via Settings > Advanced > Custom Code
- Webflow - via Site Settings > Custom Code (krever et betalt Webflow-abonnement)
- PrestaShop - via ChatLab PrestaShop-modulen eller manuell innsetting av kode
- Shopify - via filen theme.liquid
- WooCommerce - via WordPress-pluginen eller manuell innsetting av kode
- Abicart - via Store design > Themes > Site header
- CS-Cart - via Design > Layouts > Custom HTML code
Hver plattform viser trinnvise instruksjoner som er spesifikke for den integrasjonen. For plattformer med egne hjelpeartikler vises en View full instructions-lenke (se fullstendige instruksjoner) nederst.
Legge til via HTML Code
Alternativet HTML Code fungerer med alle nettsteder der du har tilgang til kildekoden. Du vil se to innbyggingsalternativer: Widget og Iframe.
Widget-modus
Widget-fanen viser koden som legger til et chat-ikon på nettstedet ditt. Når besøkende klikker på ikonet, åpnes et chat-vindu.
- Klikk på Widget-fanen
- Klikk på Copy to clipboard (kopier til utklippstavle) for å kopiere koden
- Finn
<head>-delen på nettstedet ditt - Lim inn koden som det siste elementet i
<head>-delen - Oppdater nettleseren for å bekrefte at chatbot-ikonet vises
Iframe-modus
Iframe-fanen viser koden som bygger inn chatboten direkte i innholdet på siden din. Chatboten er alltid synlig og kan omgis av andre sideelementer.
- Klikk på Iframe-fanen
- Klikk på Copy to clipboard for å kopiere koden
- Lim inn koden hvor som helst i HTML-koden på nettstedet ditt der du vil at chatboten skal vises
- Juster attributtene
widthogheightfor å tilpasse oppsettet ditt
Usikker på hva du skal velge? Les Hva er forskjellen mellom widget og Iframe? for en detaljert sammenligning.
Legge til via WordPress eller WooCommerce
WordPress- og WooCommerce-plattformer tilbyr to installasjonsmetoder: Plugin Installation (anbefalt) og Manual Installation.
Plugin Installation (anbefalt)
- Klikk på Get WordPress Plugin (hent WordPress-plugin) for å åpne WordPress-pluginregisteret
- Installer og aktiver pluginen "ChatLab - AI Chatbot"
- Gå til innstillingssiden for pluginen i WordPress-administrasjonen
- Kopier din Bot ID fra ChatLab ved hjelp av Copy-knappen
- Lim inn Bot ID-en i plugin-innstillingene og lagre
- Bekreft at chatboten vises på nettstedet ditt
Manual Installation
Gå til Manual Installation-fanen (manuell installasjon) for kodebasert installasjon:
- Installer pluginen "Insert Headers and Footers" i WordPress
- Gå til Settings > Insert Headers and Footers
- Kopier koden fra ChatLab og lim den inn i Header-delen
- Lagre og oppdater nettstedet ditt
For fullstendige detaljer, se Hvordan legge til chatboten din på et WordPress-nettsted.
Legge til via andre plattformer
For Shopify, Wix, Webflow, PrestaShop, Abicart og CS-Cart velger du plattformen i Select Platform-panelet. Hver plattform viser:
- Innbyggingskoden med alternativene Widget og Iframe
- Plattformspesifikke, trinnvise instruksjoner for innliming
- En View full instructions-lenke til den fullstendige veiledningen for plattformen
GDPR-etterlevelse
Hvis du trenger at chatboten først skal lastes inn etter at samtykke til informasjonskapsler er gitt, se Sette opp ChatLab for GDPR-etterlevelse for integrasjonsveiledninger som dekker CookieBot, Usercentrics og Google Tag Manager.
Content Security Policy (CSP)
Hvis nettstedet ditt bruker Content Security Policy-headere, må du tillate ChatLab-domener for at chatboten skal fungere. Hvilke direktiver som kreves, avhenger av om du bruker Widget- eller Iframe-modus.
Widget-modus
Widgeten laster inn et skript på siden din som oppretter chat-grensesnittet. Legg til disse direktivene i CSP-headeren din:
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 injiserer widgeten noen stiler inline, så 'unsafe-inline' kreves i style-src.
CSP Safe Mode - unngå unsafe-inline
Hvis nettstedets sikkerhetspolicy ikke tillater 'unsafe-inline' i style-src, kan du aktivere CSP Safe Mode. Dette gjør at widgeten laster inn alle stiler fra eksterne CSS-filer i stedet for å injisere dem inline.
For å aktivere dette legger du til window.aichatbotCspSafe = true; før ChatLab-skripttaggen:
<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 er aktivert, trenger du ikke lenger 'unsafe-inline', og CSP-headeren din kan bruke:
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-modus
Iframe laster inn hele chatboten fra én enkelt URL, så bare ett direktiv er nødvendig:
frame-src https://api.chatlab.com;