Einen Chatbot in eine Website zu bringen, ist heute eine Sache von Minuten. Ein kleines Skript im Quelltext, und der Bot erscheint als Sprechblase in der Ecke. Diese Einfachheit verdeckt die Fragen, die über Erfolg und Ärger entscheiden: In welcher Form erscheint der Bot, was macht das Skript mit der Ladezeit, und wo liegen die Daten. Wer diese Punkte vor der Einbindung klärt, spart sich das spätere Nachbessern.

Die Einbindung den Chatbots in wenigen Zeilen

Technisch bindet ein moderner Chatbot über ein JavaScript-Snippet ein. Sie kopieren einen kurzen Code in den Quelltext Ihrer Seite und laden ihn über Ihr Content-Management-System oder einen Tag-Manager. Der Bot legt sich als Overlay über die Seite, sodass Besucher den Dialog führen, ohne die Seite zu verlassen. Bei der Volkswagen Bank beschreibt das Team die Umsetzung so: die Einbindung auf den Websites gestalte sich unkompliziert und erfordere kein umfangreiches technisches Fachwissen.

Das Snippet ist der schnellste Weg. Für Anwendungsfälle, die tiefer in eine Anwendung greifen, steht eine Anbindung über die API bereit, mit der sich der Bot in eine Web-App oder ein Kundenportal integrieren lässt.

Widget, Overlay oder Inline: welche Form passt

Die Einbindung kennt drei typische Grundformen, die sich im Auftritt unterscheiden.

Das Bubble-Widget sitzt als runde Schaltfläche in einer Ecke und öffnet auf Klick ein Chatfenster. Es ist die verbreitetste Form, weil es auf jeder Seite funktioniert und den Inhalt nicht verdrängt.

Das Overlay-Panel schiebt sich über einen Teil der Seite, sobald der Dialog startet. Es gibt dem Gespräch mehr Raum und eignet sich, wenn der Bot komplexe Beratung führt.

Der Inline-Chat sitzt fest im Seiteninhalt, etwa auf einer Kontakt- oder Produktseite. Er lädt zum Gespräch ein, ohne dass der Besucher eine Schaltfläche sucht, und passt dort, wo der Dialog der eigentliche Zweck der Seite ist.

Welche Form passt, hängt vom Anliegen ab. Für den breiten Kundenservice ist das Bubble-Widget der Standard, für geführte Beratung lohnt das Overlay, für eine dedizierte Dialogseite der Inline-Chat.

Warum die Ladeperformance über den Erfolg entscheidet

Hier liegt der Punkt, den viele Einbindungen übersehen. Chat-Widgets gehören zu den eher schwereren Skripten, die eine Website lädt. Ein synchron geladenes Widget kann ein blockierendes Skript sein, für eine Funktion, die die meisten Besucher nie öffnen. Das Ergebnis sind langsamere Seiten und schlechtere Core Web Vitals, die Google in die Bewertung einbezieht.

Die Lösung heißt verzögertes Laden. Der Bot lädt erst, wenn der Besucher mit der Seite interagiert, etwa beim ersten Scrollen, bei einer Mausbewegung oder einer Berührung. Für alle, die nur kurz vorbeischauen, lädt das Skript gar nicht.

Ein Chatbot, der die Seite langsam macht, kostet mehr Kunden, als er im Chat gewinnt.

Fragen Sie einen Anbieter darum aktiv, wie sein Widget lädt. Ein Bot, der verzögert und asynchron lädt, hält die Seite schnell und die Bewertung stabil.

Datenschutz bei der Einbindung

Für die DSGVO zählt, wo Daten liegen und wann sie erhoben werden. Drei Punkte gehören vor die Einbindung.

Der Datenstandort muss geklärt sein. Eine Verarbeitung in Deutschland ohne Übermittlung in Drittländer ist der belastbare Weg, gestützt durch einen Auftragsverarbeitungsvertrag. Die Einwilligung muss stehen, bevor der Bot personenbezogene Daten erhebt, was sich mit dem verzögerten Laden gut verbindet. Und die Datensparsamkeit gehört bedacht: Der Bot sollte nur erheben, was er für die Antwort braucht. Bei Mercury.ai werden die Daten in Deutschland verarbeitet.

Platzierung und die erste Nachricht

Wo das Widget sitzt und wie es öffnet, entscheidet über die Nutzung. Die untere rechte Ecke ist die gelernte Position, auf dem Smartphone darf die Schaltfläche keine wichtigen Bedienelemente verdecken. Wichtiger als die Position ist die erste Nachricht. Eine kurze, klare Eröffnung wird gelesen, ein langer Begrüßungstext wird übersprungen. Warum das so ist und wie man es besser macht, steht im Standpunkt Die erste Nachricht im Chatbot liest niemand.

Wie Mercury.ai die Einbindung löst

Mercury.ai bindet den Chatbot über ein JavaScript-Snippet als Overlay ein, sodass Besucher die Seite nicht verlassen. Für tiefere Integrationen steht die API und eine vollumfängliche Dokumentation bereit. Der Bot hält die Seite schnell und arbeitet über eine gemeinsame Wissensbasis, an die weitere Kanäle wie andere Webseiten, WhatsApp oder das Telefon andocken. Die Pflege läuft No-Code, sodass der Fachbereich Inhalte selbst aktualisiert, und die Daten werden in Deutschland verarbeitet. Einen Überblick über die Kanäle bietet die Seite zum Chat-Widget, das zugrunde liegende Wissen verwaltet der Knowledge Hub.

Häufige Fragen

Wie bindet man einen Chatbot in eine Website ein?
Über ein JavaScript-Snippet, das in den Quelltext der Seite kopiert wird. Der Bot erscheint dann als Widget. Für tiefere Integrationen steht eine API und Dokumentation bereit.

Verlangsamt ein Chatbot die Website?
Ein synchron geladenes Widget kann die Seite deutlich verlangsamen, da es ein blockierendes Skript von mehr als 200 Kilobyte sein kann. Verzögertes Laden bei der ersten Interaktion senkt diesen Einfluss auf nahezu null.

Welche Einbindungsform ist die richtige?
Das Bubble-Widget ist der Standard für den Kundenservice, ein Overlay eignet sich für geführte Beratung, ein Inline-Chat für dedizierte Dialogseiten.

Ist ein Website-Chatbot DSGVO-konform?
Bei einer Verarbeitung in Deutschland, einem Auftragsverarbeitungsvertrag und einer Einwilligung vor der Erhebung personenbezogener Daten ist der Betrieb DSGVO-konform. Bei Mercury.ai liegen die Daten in Deutschland.

Braucht die Einbindung Entwicklerwissen?
Für das Snippet genügt der Zugang zum Content-Management-System oder einem Tag-Manager. Umfangreiches technisches Fachwissen ist nicht nötig.

Der schnelle Weg zum Start

Ein Chatbot ist in Minuten eingebunden, doch die Wirkung entscheidet sich an drei Fragen: der passenden Form, dem verzögerten Laden und dem Datenstandort. Wer diese vor dem Start klärt, bekommt einen Bot, der erreichbar ist, ohne die Seite auszubremsen, und der die Daten dort hält, wo sie hingehören.

Sie möchten einen Chatbot auf Ihrer Website einbinden? Sprechen Sie mit uns oder sehen Sie sich die Lösung für den Kundenservice an.

Über den Autor: Dr. Maximilian Panzner ist CTO und Mitbegründer von Mercury.ai. Er hat am CITEC-Institut der Universität Bielefeld in Informatik promoviert und dort zu multimodalem maschinellem Lernen und intelligenten Interaktionssystemen geforscht. Seit über 20 Jahren arbeitet er an Künstlicher Intelligenz, Mensch-Maschine-Interaktion und dialogorientierten KI-Plattformen für den Unternehmenseinsatz.

Quellen

• web.dev (Google): Best Practices für die Verwendung von Einbettungen von Drittanbietern