Når du tilføjer ChatLab til din hjemmeside, kan de besøgende interagere med din AI-chatbot direkte på dit websted. Denne vejledning forklarer, hvordan du finder indlejringskoden og indsætter den på din hjemmeside.
Åbn fanen Deploy
Vælg din chatbot fra hovedoversigten, og klik derefter på fanen Deploy (Udrul).
Vælg din platform
Panelet Select Platform (Vælg platform) til højre viser alle understøttede platforme. Klik på den platform, der matcher din hjemmeside, for at se en skræddersyet installationsvejledning.
Understøttede platforme:
- HTML Code - fungerer med enhver hjemmeside, hvor du kan redigere HTML-koden
- WordPress - via det officielle ChatLab-plugin eller manuel indsættelse af kode
- Wix - via Settings > Advanced > Custom Code
- Webflow - via Site Settings > Custom Code (kræver et betalt Webflow-abonnement)
- PrestaShop - via ChatLab PrestaShop-modulet eller manuel indsættelse af kode
- Shopify - via filen theme.liquid
- WooCommerce - via WordPress-pluginnet eller manuel indsættelse af kode
- Abicart - via Store design > Themes > Site header
- CS-Cart - via Design > Layouts > Custom HTML code
Hver platform viser trinvise instruktioner, der passer specifikt til den pågældende integration. For platforme med dedikerede hjælpeartikler vises linket View full instructions (Se hele vejledningen) nederst.
Tilføjelse via HTML Code
Valgmuligheden HTML Code fungerer med enhver hjemmeside, hvor du har adgang til kildekoden. Du vil se to indlejringsmuligheder: Widget og Iframe.
Widget-tilstand
Fanen Widget viser koden, der tilføjer et chatikon til din hjemmeside. Når de besøgende klikker på ikonet, åbnes et chatvindue.
- Klik på fanen Widget
- Klik på Copy to clipboard (Kopiér til udklipsholder) for at kopiere koden
- Find sektionen
<head>i kildekoden på din hjemmeside - Indsæt koden som det sidste element i sektionen
<head> - Genindlæs siden i browseren for at bekræfte, at chatbot-ikonet vises
Iframe-tilstand
Fanen Iframe viser koden, der indlejrer chatbotted direkte i dit sideindhold. Chatbotten er altid synlig og kan placeres mellem andre elementer på siden.
- Klik på fanen Iframe
- Klik på Copy to clipboard (Kopiér til udklipsholder) for at kopiere koden
- Indsæt koden dér i din hjemmesides HTML-kode, hvor du ønsker, at chatbotten skal vises
- Tilpas attributterne
widthogheight, så de passer til dit layout
Er du i tvivl om, hvad du skal vælge? Læs Hvad er forskellen på widget og Iframe? for en grundig sammenligning.
Tilføjelse via WordPress eller WooCommerce
Platformene WordPress og WooCommerce tilbyder to installationsmetoder: Plugin Installation (Plugin-installation, anbefales) og Manual Installation (Manuel installation).
Plugin-installation (anbefales)
- Klik på Get WordPress Plugin (Hent WordPress-plugin) for at åbne WordPress' plugin-katalog
- Installer og aktivér pluginnet "ChatLab - AI Chatbot"
- Gå til siden med plugin-indstillinger i WordPress-administrationen
- Kopiér dit Bot ID fra ChatLab ved at bruge knappen Kopiér
- Indsæt dit Bot ID i plugin-indstillingerne, og gem ændringerne
- Tjek, at chatbotten vises på din hjemmeside
Manuel installation
Skift til fanen Manual Installation for kodebaseret installation:
- Installer pluginnet "Insert Headers and Footers" i WordPress
- Gå til Settings > Insert Headers and Footers
- Kopiér koden fra ChatLab, og indsæt den i Header-sektionen
- Gem, og genindlæs din hjemmeside
For yderligere oplysninger, se Sådan tilføjer du din chatbot til en WordPress-hjemmeside.
Tilføjelse via andre platforme
Vælg platformen i panelet Select Platform, hvis du bruger Shopify, Wix, Webflow, PrestaShop, Abicart eller CS-Cart. Hver platform viser:
- Indlejringskoden med valgmulighederne Widget og Iframe
- Platformsspecifikke, trinvise instruktioner til indsættelse
- Linket View full instructions (Se hele vejledningen) til den komplette platformsvejledning
Overholdelse af GDPR
Hvis din chatbot først må indlæses, efter at der er givet samtykke til cookies, kan du se Opsætning af ChatLab til overholdelse af GDPR for integrationsvejledninger til Cookiebot, Usercentrics og Google Tag Manager.
Content Security Policy (CSP)
Hvis din hjemmeside anvender Content Security Policy-headere, skal du tillade ChatLab-domæner, for at chatbotten kan fungere. De påkrævede direktiver afhænger af, om du bruger Widget- eller Iframe-tilstand.
Widget-tilstand
Widgetten indlæser et script på din side, som opretter chatgrænsefladen. Føj disse direktiver til 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 indsætter widgetten visse styles inline, og derfor er 'unsafe-inline' påkrævet i style-src.
CSP Safe Mode - undgå unsafe-inline
Hvis sikkerhedspolitikken på din hjemmeside ikke tillader 'unsafe-inline' i style-src, kan du aktivere CSP Safe Mode. Dette får widgetten til at indlæse alle styles fra eksterne CSS-filer i stedet for at indsætte dem inline.
For at aktivere det tilføjer du window.aichatbotCspSafe = true; før ChatLab-scripttagget:
<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 aktiveret, har du ikke længere brug for 'unsafe-inline', og din CSP-header kan bruge:
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-tilstand
En iframe indlæser hele chatbotten fra en enkelt URL-adresse, så her behøves kun et enkelt direktiv:
frame-src https://api.chatlab.com;