Når du tilføjer ChatLab til din hjemmeside, kan besøgende interagere med din AI-chatbot direkte på dit website. Denne guide forklarer, hvordan du finder indlejringskoden og indsætter den på din hjemmeside.
Før du går i gang
Opret og træn din chatbot, før du deler den med dine kunder. Til installationen skal du også have rettigheder til at redigere og udgive hjemmesiden. Se Sådan opretter du din første chatbot.
Å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 de understøttede destinationer opdelt i to grupper: Website (Hjemmeside) til placering af chatbotten på sider, du selv administrerer, og Messaging channels (Beskedkanaler) til at forbinde den med en eksisterende samtalekonto. Klik på den mulighed, der passer til det sted, hvor chatbotten skal vises, for at se trinvise instruktioner.
Understøttede platforme:
- HTML Code - fungerer med enhver hjemmeside, hvor du kan redigere HTML-koden
- WordPress - via det officielle ChatLab-plugin eller manuel kodeindsættelse
- Wix - via Settings > Custom Code
- Webflow - via Site settings > Custom code, med adgang til brugerdefineret kode aktiveret for dit websted eller workspace
- PrestaShop - via ChatLab PrestaShop-modulet eller manuel kodeindsættelse
- Shopify - via filen theme.liquid
- WooCommerce - via WordPress-pluginnet eller manuel kodeindsættelse
- Abicart - via Store design > Themes > Site header
- CS-Cart - via Design > Layouts > Custom HTML code
Beskedkanaler:
- WhatsApp Business - svarer på en WhatsApp Business-konto, se WhatsApp for Business
- Facebook Messenger - svarer på beskeder på din Facebook-side, se Integration med Facebook Messenger
- Instagram - svarer på direkte beskeder på Instagram, se Integration med Instagram
Beskedkanaler bruger ikke nedenstående indlejringskode. De forbindes til en konto, du allerede ejer, så der skal ikke indsættes kode på en hjemmeside.
Hver platform viser trinvise instruktioner, der er specifikke for den pågældende integration. For platforme med dedikerede hjælpeartikler vises et link med teksten View full instructions (Se fulde instruktioner) i bunden.
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, som tilføjer et chatikon på din hjemmeside. Når besøgende klikker på ikonet, åbner et chatvindue.
- Klik på fanen Widget
- Klik på Copy to clipboard (Kopiér til udklipsholder) for at kopiere koden
- Find sektionen
<head>i din hjemmesides kode - Indsæt koden som det sidste element i sektionen
<head> - Genindlæs siden i browseren for at kontrollere, at chatbot-ikonet vises
Iframe-tilstand
Fanen Iframe viser koden, der integrerer chatbotten direkte i indholdet på din side. Chatbotten er altid synlig og kan omgives af andre elementer på siden.
- Klik på fanen Iframe
- Klik på Copy to clipboard for at kopiere koden
- Indsæt koden et vilkårligt sted i din hjemmesides HTML, hvor du ønsker, at chatbotten skal vises
- Juster parametrene
widthogheight, så de passer til dit layout
Er du i tvivl om, hvad du skal vælge? Læs Hvad er forskellen mellem widget og Iframe? for en detaljeret 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 the plugin on WordPress.org, installer derefter ChatLab-pluginnet, og aktivér det.
- Åbn ChatLab i WordPress. Hvis du har en WooCommerce-butik, skal du beholde WooCommerce integration markeret for også at forbinde butikkens data.
- Klik på Continue, log ind på ChatLab, og vælg din chatbot.
- Gennemfør tilslutningen, åbn din offentliggjorte hjemmeside, og send en testbesked.
Manual Installation
Skift til Manual Installation, og kopiér Widget-koden ind i dit websteds header ved hjælp af et plugin til kodeindsættelse. Ved Iframe skal du bruge en HTML-blok i sideindholdet, der understøtter iframe-HTML. Udgiv siden, og test chatten. Installer kun widgetten én gang, enten via pluginnet eller et manuelt kodestykke.
Se alle detaljer i Sådan tilføjer du din chatbot til en WordPress-hjemmeside.
Tilføjelse via andre platforme
For Shopify, Wix, Webflow, PrestaShop, Abicart og CS-Cart vælger du den pågældende platform i panelet Select Platform. Hver platform viser:
- Indlejringskoden med valgmulighederne Widget og Iframe
- Platformspecifikke instruktioner til indsættelse trin for trin
- Et link med teksten View full instructions til den fulde vejledning for platformen
GDPR-overholdelse
Hvis din chatbot først må indlæses, efter der er givet samtykke til cookies, kan du læse Opsætning af ChatLab til GDPR-overholdelse, som indeholder integrationsvejledninger til CookieBot, Usercentrics og Google Tag Manager.
Content Security Policy (CSP)
Hvis din hjemmeside benytter 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 benytter Widget- eller Iframe-tilstand.
Widget-tilstand
Widgetten indlæser et script på din side, som opbygger brugerfladen til chatten. Føj følgende ChatLab-oprindelser (origins) til dine eksisterende CSP-direktiver; overskriv ikke reglerne for resten af din hjemmeside:
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;
Widgetten indsætter som standard visse elementer inline i typografien. Din sikkerhedspolitik skal også godkende det integrerede konfigurationsscript, for eksempel ved hjælp af en CSP-nonce eller en hash. Tillad de billedoprindelser, der anvendes af din bot og dine produktkort, i img-src; lyd og andre aktiverede funktioner kan kræve yderligere oprindelser. Hvis du bruger et bureau-domæne, skal du bruge domænerne fra det kodestykke, der genereres til dig.
CSP Safe Mode - undgå unsafe-inline
Hvis dit websteds sikkerhedspolitik ikke tillader 'unsafe-inline' i style-src, kan du aktivere CSP Safe Mode. Dette indlæser chiffonen/typografiarket til widget-beholderen fra en ekstern CSS-fil. Dette godkender dog ikke dit inline-konfigurationsscript og garanterer heller ikke, at alle tilpassede typografier og aktiverede funktioner overholder din politik.
For at aktivere det tilføjer du window.aichatbotCspSafe = true; før ChatLab-script-tagget:
<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, kan du afprøve en stylesheet-politik uden 'unsafe-inline'. Et udgangspunkt 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-tilstand
Forældresiden skal tillade den oprindelse, der optræder i den kopierede iframe-URL. Ved standard ChatLab-hosting skal du tilføje følgende til din eksisterende politik:
frame-src https://api.chatlab.com;