KI-Chatbot auf deiner Website einbinden

Website Embed

Dies ist der universelle Weg, um Ihren Chatbot in jede Website einzubinden. Sie fügen zwei kurze Zeilen in das HTML Ihrer Website ein: ein <script>-Tag, das das Widget lädt, und ein <web-chat-agent>-Element, das festlegt, welcher Chatbot angezeigt wird. Das ist alles, die schwebende Chat-Sprechblase erscheint in der Ecke jeder Seite, auf der der Code ausgeführt wird.

Wenn Sie WordPress, Shopify, Wix, Squarespace oder Webflow nutzen, verwenden Sie stattdessen die spezifische Anleitung für Ihre Plattform, dort wird genau gezeigt, wo Sie denselben Code einfügen müssen.

Wo Sie Ihre Chatbot-ID finden

Sie müssen die ID niemals manuell eingeben. Im WebChatAgent-Dashboard:

Öffnen Sie Ihren Chatbot.
Gehen Sie zu Kanäle → Chat-Widget und klappen Sie Installationsdetails anzeigen auf.
Klicken Sie im Code-Feld auf die Schaltfläche zum Kopieren.

Das kopierte Snippet enthält bereits Ihre Chatbot-ID, Sie müssen es also nur noch einfügen. (Falls Sie die reine ID jemals separat benötigen, finden Sie die lange Zeichenfolge in Ihrer Dashboard-URL: /dashboard/<your-chatbot-id>.)

Der einzufügende Code

Fügen Sie diesen Code direkt vor dem schließenden </body>-Tag Ihrer Website ein:

<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>

Ersetzen Sie YOUR_ID durch Ihre Chatbot-ID (oder kopieren Sie einfacher das vorgefertigte Snippet aus dem Dashboard, damit die ID bereits ausgefüllt ist). Das Widget lädt asynchron, verlangsamt Ihre Seite also nicht, und erscheint als schwebender Chat-Button in der unteren Ecke.

Optionale Attribute

Das Widget übernimmt Farben, Titel, Begrüßungsnachricht und Verhalten aus Ihren Dashboard-Einstellungen, sodass Sie normalerweise nur chatbot-id benötigen. Um bestimmte Werte direkt im HTML zu überschreiben, fügen Sie dem <web-chat-agent>-Element diese Attribute hinzu:

chatbot-id, Ihre Chatbot-ID. Pflichtfeld.
theme, Visueller Stil: "default" oder "modern". Standardmäßig "default".
initially-open, Setzen Sie dies auf "true", um den Chat beim Laden der Seite automatisch zu öffnen. Standardmäßig "false" (geschlossen).
tracking-consent, Optionales Consent-Signal für persistente Personalisierung: "unknown", "denied" oder "granted". Wenn weggelassen, ist der Standardwert "unknown", und anonyme lokale Trigger funktionieren weiterhin.
context-data, Sitzungskontext von Ihrer Seite für die KI (z. B. "Customer=Acme GmbH;OrderID=A-1023"), nützlich, wenn das Widget in einem CRM oder einem Login-Bereich läuft. Formate, Limits und Sicherheitshinweise finden Sie im Entwickler-Leitfaden.

<web-chat-agent
  chatbot-id="YOUR_ID"
  theme="modern"
  initially-open="false"
></web-chat-agent>

Alles andere, Markenfarbe, Avatar, Schriftarten, Position und Verhalten, wird unter Kanäle → Chat-Widget konfiguriert, sodass Sie den Code für optische Anpassungen nicht mehr bearbeiten müssen. Die Assistent-Persona wird unter Einstellungen → Antwortstil und Rolle konfiguriert.

Das Widget blendet kein zweites Cookie-Banner ein. Ohne Consent-Signal läuft es im anonymen Privacy Mode: Trigger für Zeit, Scrollen, Exit-Intent, Inaktivität, URL, Sichtbarkeit und Rage-Clicks werden lokal im Speicher ausgewertet. Die Wiedererkennung wiederkehrender Besucher, persistente Zähler, proaktive Analysen und KI-generierte Begrüßungen warten auf ein granted-Signal.

Siehe Cookie-Consent und anonyme proaktive Trigger für die vollständige Verhaltensmatrix, CMP-Beispiele und Speicher-Referenzen.

Chat direkt in die Seite einbetten

Das obige Snippet erzeugt einen schwebenden Button. Wenn Sie den Chat lieber innerhalb Ihres Seitenlayouts platzieren möchten, zum Beispiel als vollständiges Chat-Panel auf einer separaten Support-Seite, verwenden Sie das Inline-Widget. Es lädt ein anderes Skript und ein anderes Element:

<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_ID"></web-chat-agent-inline>

Inline-Chat wird genau dort gerendert, wo Sie das Element platzieren. Fügen Sie es daher in den Container ein, in dem der Chat erscheinen soll. Layout-Details finden Sie in der Anleitung zum Inline-Chat.

Funktioniert überall

Beide Snippets basieren auf reinem HTML und einem Custom Element und laufen daher auf jeder Website-Plattform: WordPress, Shopify, Wix, Squarespace, Webflow sowie selbst programmierten HTML/JS-Seiten. Fügen Sie den Code in das HTML Ihrer Website ein und veröffentlichen Sie die Seite.

Fehlerbehebung

Widget erscheint nicht? Stellen Sie sicher, dass sich der Code im HTML der Seite befindet (vor </body>) und dass Sie die Änderungen veröffentlicht oder Caching-Plugins geleert haben. Prüfen Sie die Browser-Konsole auf blockierte Skripte.
Wird nur auf einer Seite angezeigt? Platzieren Sie das Snippet an einer seitenweiten Stelle (Footer / globaler Code) und nicht nur auf einer Einzelseite.