Å legge til ChatLab på nettstedet ditt lar besøkende samhandle med AI-chatboten din direkte på nettstedet. Denne veiledningen forklarer hvordan du henter innbyggingskoden og legger den til på nettstedet ditt.
Før du starter
Opprett og tren chatboten din før du deler den med kunder. For installasjonen trenger du også tillatelse til å redigere og publisere nettstedet. Se Hvordan opprette din første chatbot.
Åpne Deploy-fanen
Velg chatboten din fra hovedoversikten, og klikk deretter på fanen Deploy (publiser).
Velge plattform
Panelet Select Platform (velg plattform) til høyre viser de støttede destinasjonene i to grupper: Website (nettsted), for å plassere chatboten på sider du kontrollerer, og Messaging channels (meldingskanaler), for å koble den til en eksisterende samtakonto. Klikk på oppføringen som samsvarer med hvor du vil at chatboten skal vises, for å se tilpassede instruksjoner.
Støttede plattformer:
- HTML Code - fungerer med alle nettsteder der du kan redigere HTML-koden
- WordPress - via den offisielle ChatLab-utvidelsen eller manuell innsetting av kode
- Wix - via Settings > Custom Code
- Webflow - via Site settings > Custom code, med tilgang til tilpasset kode aktivert for nettstedet eller arbeidsområdet ditt
- PrestaShop - via ChatLab PrestaShop-modulen eller manuell innsetting av kode
- Shopify - via theme.liquid-filen
- WooCommerce - via WordPress-utvidelsen eller manuell innsetting av kode
- Abicart - via Store design > Themes > Site header
- CS-Cart - via Design > Layouts > Custom HTML code
Meldingskanaler:
- WhatsApp Business - svarer i en WhatsApp Business-konto, se WhatsApp for Business
- Facebook Messenger - svarer på meldingene til Facebook-siden din, se Integrasjon med Facebook Messenger
- Instagram - svarer på direktemeldinger på Instagram, se Integrasjon med Instagram
Meldingskanaler bruker ikke innbyggingskoden nedenfor. De kobles til en konto du allerede eier, så ingen kode limes inn på et nettsted.
Hver plattform viser trinnvise instruksjoner som er spesifikke for den integrasjonen. For plattformer med egne hjelpeartikler vises en lenke med View full instructions (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
Fanen Widget viser koden som legger til et chat-ikon på nettstedet ditt. Når besøkende klikker på ikonet, åpnes et chat-vindu.
- Klikk på fanen Widget
- Klikk på Copy to clipboard (kopier til utklippstavle) for å kopiere koden
- Finn
<head>-seksjonen på nettstedet ditt - Lim inn koden som det siste elementet i
<head>-seksjonen - Oppdater nettleseren for å bekrefte at chatbot-ikonet vises
Iframe-modus
Fanen Iframe viser koden som bygger inn chatboten direkte i innholdet på siden din. Chatboten er alltid synlig og kan omgis av andre sideelementer.
- Klikk på fanen Iframe
- Klikk på Copy to clipboard for å kopiere koden
- Lim inn koden hvor som helst i nettstedets HTML 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
Plattformene WordPress og WooCommerce tilbyr to installasjonsmetoder: Plugin Installation (installasjon via utvidelse, anbefalt) og Manual Installation (manuell installasjon).
Plugin Installation (anbefalt)
- Klikk på Get the plugin on WordPress.org, og installer og aktiver deretter ChatLab-utvidelsen.
- Åpne ChatLab i WordPress. For en WooCommerce-butikk må du la WooCommerce integration forbli valgt for å koble til butikkdata også.
- Klikk på Continue, logg på ChatLab og velg chatboten din.
- Fullfør tilkoblingen, åpne det publiserte nettstedet ditt og send en testmelding.
Manual Installation
Bytt til Manual Installation og kopier Widget-koden inn i nettstedets topptekst ved hjelp av en utvidelse for kodeinnsetting. For Iframe bruker du en HTML-blokk i sideinnholdet som tillater iframe-HTML. Publiser siden og test chatten. Installer widgeten bare én gang, enten ved å bruke utvidelsen eller en manuell kodesnutt.
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 panelet Select Platform. Hver plattform viser:
- Innbyggingskoden med alternativene Widget og Iframe
- Plattformspesifikke, trinnvise instruksjoner for innliming
- En lenke med View full instructions til den fullstendige veiledningen for plattformen
GDPR-samsvar
Hvis du trenger at chatboten først skal lastes inn etter at det er gitt samtykke til informasjonskapsler, kan du se Konfigurere ChatLab for GDPR-samsvar 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. De påkrevde direktivene avhenger av om du bruker Widget- eller Iframe-modus.
Widget-modus
Widgeten laster inn et skript på siden din som oppretter chat-grensesnittet. Flett inn følgende ChatLab-opprinnelser i dine eksisterende CSP-direktiver; ikke erstatt reglene for resten av nettstedet ditt:
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. Reglene dine må også autorisere det innebygde konfigurasjonsskriptet, for eksempel med en CSP-nonce eller -hash. Tillat bildeopprinnelsene som brukes av boten din og produktkortene i img-src; lyd og andre aktiverte funksjoner kan kreve ytterligere opprinnelser. For et byrådomene bruker du domenene fra den genererte kodesnutten din.
CSP Safe Mode - unngå unsafe-inline
Hvis nettstedets sikkerhetsregler ikke tillater 'unsafe-inline' i style-src, kan du aktivere CSP Safe Mode. Dette laster widgetens beholderstilark fra en ekstern CSS-fil. Det autoriserer ikke det innebygde konfigurasjonsskriptet ditt eller garanterer at alle tilpassede stiler og aktiverte funksjoner oppfyller reglene dine.
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, kan du teste regler for stilark uten 'unsafe-inline'. Et utgangspunkt er:
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
Overordnet side må tillate opprinnelsen i den kopierte iframe-URL-en. For standard ChatLab-hosting legger du dette til i de eksisterende reglene:
frame-src https://api.chatlab.com;