Das Einbinden von ChatLab auf Ihrer Website ermöglicht es Besuchern, direkt auf Ihrer Seite mit Ihrem KI-Chatbot zu interagieren. Diese Anleitung erklärt, wie Sie den Einbettungscode abrufen und auf Ihrer Website einfügen.
Bevor Sie beginnen
Erstellen und trainieren Sie Ihren Chatbot, bevor Sie ihn für Kunden freigeben. Für die Installation benötigen Sie außerdem die Berechtigung, die Website zu bearbeiten und zu veröffentlichen. Weitere Informationen finden Sie unter So erstellen Sie Ihren ersten Chatbot.
Den Tab „Deploy“ öffnen
Wählen Sie Ihren Chatbot im Haupt-Dashboard aus und klicken Sie dann auf den Tab Deploy (Veröffentlichen).
Plattform auswählen
Der Bereich Select Platform (Plattform auswählen) auf der rechten Seite listet die unterstützten Ziele in zwei Gruppen auf: Website, um den Chatbot auf von Ihnen verwalteten Seiten zu platzieren, und Messaging channels (Messaging-Kanäle), um ihn mit einem bestehenden Konversationskonto zu verknüpfen. Klicken Sie auf den Eintrag, der Ihrem gewünschten Einsatzort entspricht, um passende Anweisungen anzuzeigen.
Unterstützte Plattformen:
- HTML Code - funktioniert mit jeder Website, bei der Sie den HTML-Code bearbeiten können
- WordPress - über das offizielle ChatLab-Plugin oder die manuelle Code-Einbindung
- Wix - über Settings > Custom Code
- Webflow - über Site settings > Custom code, sofern der Zugriff auf benutzerdefinierten Code für Ihre Website oder Ihren Workspace aktiviert ist
- PrestaShop - über das ChatLab-PrestaShop-Modul oder die manuelle Code-Einbindung
- Shopify - über die Datei theme.liquid
- WooCommerce - über das WordPress-Plugin oder die manuelle Code-Einbindung
- Abicart - über Store design > Themes > Site header
- CS-Cart - über Design > Layouts > Custom HTML code
Messaging-Kanäle:
- WhatsApp Business - antwortet in einem WhatsApp-Business-Konto, siehe WhatsApp für Unternehmen
- Facebook Messenger - antwortet auf Nachrichten Ihrer Facebook-Seite, siehe Integration mit Facebook Messenger
- Instagram - antwortet auf Direktnachrichten bei Instagram, siehe Integration mit Instagram
Messaging-Kanäle verwenden nicht den unten beschriebenen Einbettungscode. Sie werden mit einem bestehenden Konto verknüpft, sodass kein Code in eine Website eingefügt werden muss.
Zu jeder Plattform werden spezifische Schritt-für-Schritt-Anweisungen angezeigt. Für Plattformen mit separaten Hilfeartikeln erscheint unten der Link View full instructions (Vollständige Anleitung anzeigen).
Einbindung über HTML Code
Die Option HTML Code funktioniert mit jeder Website, bei der Sie Zugriff auf den Quellcode haben. Es stehen Ihnen zwei Einbettungsoptionen zur Verfügung: Widget und Iframe.
Widget-Modus
Der Tab Widget zeigt den Code, der Ihrer Website ein Chat-Symbol hinzufügt. Wenn Besucher auf das Symbol klicken, öffnet sich ein Chat-Popup.
- Klicken Sie auf den Tab Widget
- Klicken Sie auf Copy to clipboard (In die Zwischenablage kopieren), um den Code zu kopieren
- Suchen Sie den
<head>-Bereich Ihrer Website - Fügen Sie den Code als letztes Element in den
<head>-Bereich ein - Aktualisieren Sie Ihren Browser, um zu überprüfen, ob das Chatbot-Symbol angezeigt wird
Iframe-Modus
Der Tab Iframe zeigt den Code, der den Chatbot direkt in den Inhalt Ihrer Seite einbettet. Der Chatbot ist dauerhaft sichtbar und kann von anderen Seitenelementen umgeben sein.
- Klicken Sie auf den Tab Iframe
- Klicken Sie auf Copy to clipboard, um den Code zu kopieren
- Fügen Sie den Code an einer beliebigen Stelle im HTML-Code Ihrer Website ein, an der der Chatbot erscheinen soll
- Passen Sie die Attribute
widthundheightan Ihr Layout an
Sie sind unsicher, welche Option die richtige ist? Lesen Sie Was ist der Unterschied zwischen Widget und Iframe? für einen detaillierten Vergleich.
Einbindung über WordPress oder WooCommerce
Die Plattformen WordPress und WooCommerce bieten zwei Installationsmethoden: Plugin Installation (Plugin-Installation, empfohlen) und Manual Installation (Manuelle Installation).
Plugin-Installation (empfohlen)
- Klicken Sie auf Get the plugin on WordPress.org (Plugin auf WordPress.org herunterladen), installieren und aktivieren Sie anschließend das ChatLab-Plugin.
- Öffnen Sie ChatLab in WordPress. Bei einem WooCommerce-Shop lassen Sie die Option WooCommerce integration ausgewählt, um auch Shop-Daten zu verknüpfen.
- Klicken Sie auf Continue (Weiter), melden Sie sich bei ChatLab an und wählen Sie Ihren Chatbot aus.
- Schließen Sie die Verbindung ab, öffnen Sie Ihre veröffentlichte Website und senden Sie eine Testnachricht.
Manuelle Installation
Wechseln Sie zu Manual Installation und kopieren Sie den Widget-Code mithilfe eines Plugins zur Code-Einfügung in den Header Ihrer Website. Für Iframe verwenden Sie einen HTML-Block im Seiteninhalt, der Iframe-HTML erlaubt. Veröffentlichen Sie die Seite und testen Sie den Chat. Installieren Sie das Widget nur einmal - entweder über das Plugin oder über das manuelle Snippet.
Ausführliche Informationen finden Sie unter So fügen Sie Ihren Chatbot zu einer WordPress-Website hinzu.
Einbindung über andere Plattformen
Wählen Sie für Shopify, Wix, Webflow, PrestaShop, Abicart und CS-Cart die entsprechende Plattform im Bereich Select Platform aus. Jede Plattform zeigt:
- Den Einbettungscode mit den Optionen Widget und Iframe
- Plattformspezifische Schritt-für-Schritt-Anweisungen zum Einfügen
- Einen Link View full instructions zum vollständigen Plattform-Leitfaden
DSGVO-Konformität
Wenn Ihr Chatbot erst nach erteilter Cookie-Einwilligung geladen werden soll, finden Sie unter ChatLab für DSGVO-Konformität einrichten Anleitungen zur Integration für CookieBot, Usercentrics und Google Tag Manager.
Content Security Policy (CSP)
Wenn Ihre Website Content-Security-Policy-Header verwendet, müssen Sie die ChatLab-Domains freigeben, damit der Chatbot funktioniert. Die erforderlichen Direktiven hängen davon ab, ob Sie den Widget- oder Iframe-Modus nutzen.
Widget-Modus
Das Widget lädt ein Skript auf Ihrer Seite, das die Chat-Oberfläche erzeugt. Fügen Sie die folgenden ChatLab-Ursprünge zu Ihren bestehenden CSP-Direktiven hinzu; ersetzen Sie nicht die Richtlinie für den Rest Ihrer Website:
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;
Standardmäßig fügt das Widget einige Styles inline ein. Ihre Richtlinie muss außerdem das Inline-Konfigurationsskript autorisieren, beispielsweise über eine CSP-Nonce oder einen Hash. Erlauben Sie in img-src die Bild-Ursprünge, die von Ihrem Bot und Ihren Produktkarten verwendet werden; Audio und andere aktivierte Funktionen erfordern möglicherweise weitere Ursprünge. Bei einer Agency-Domain verwenden Sie die Domains aus Ihrem generierten Snippet.
CSP Safe Mode - Vermeidung von unsafe-inline
Wenn die Sicherheitsrichtlinie Ihrer Website kein 'unsafe-inline' in style-src zulässt, können Sie den CSP Safe Mode aktivieren. Dadurch wird das Container-Stylesheet des Widgets aus einer externen CSS-Datei geladen. Dies autorisiert jedoch nicht Ihr Inline-Konfigurationsskript und garantiert nicht, dass jeder benutzerdefinierte Stil sowie jede aktivierte Funktion Ihrer Richtlinie entspricht.
Um ihn zu aktivieren, fügen Sie window.aichatbotCspSafe = true; vor dem ChatLab-Script-Tag ein:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Testen Sie bei aktiviertem CSP Safe Mode eine Stylesheet-Richtlinie ohne 'unsafe-inline'. Ein Ausgangspunkt ist:
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
Die übergeordnete Seite muss den Ursprung in der kopierten Iframe-URL zulassen. Fügen Sie für das Standard-Hosting von ChatLab Folgendes zu Ihrer bestehenden Richtlinie hinzu:
frame-src https://api.chatlab.com;