Wie füge ich einen Chatbot in meine Website ein?

Du kopierst die fertige Code-Zeile Deines Anbieters, bei Chatlotse aus dem Dashboard unter Installation, und fügst sie direkt vor dem schließenden body-Tag Deiner Website ein. In Baukästen wie Wix oder Jimdo nutzt Du dafür das Feld für eigenen Code, in WordPress geht es auch mit einem Plugin. Danach trägst Du Deine Domain im Dashboard ein.

Kann man einen Chatbot in jede Website einbinden?

Fast immer. Du brauchst nur eine Stelle, an der Du eigenen Code einfügen kannst, zum Beispiel vor dem schließenden body-Tag oder in einem Feld für eigenen Code. Das bieten eigenes HTML, WordPress und die meisten Baukästen. Bei manchen Baukästen gibt es dieses Feld nur in einem bezahlten Paket.

Brauche ich Programmierkenntnisse, um einen Chatbot einzubinden?

Nein. Du musst die Code-Zeile nicht verstehen, nur an der richtigen Stelle einfügen. In WordPress geht es mit dem kostenlosen Chatlotse-Plugin sogar ohne Code.

Wo muss der Chatbot-Code in der Website stehen?

Direkt vor dem schließenden body-Tag, also ganz am Ende des Seiten-Codes. Die Zeile muss auf jeder Seite geladen werden, auf der der Chat erscheinen soll. Baukästen bieten dafür meist ein Feld für eigenen Code im Footer oder Header.

Wie binde ich einen Chatbot in WordPress ein?

Am einfachsten mit dem kostenlosen Chatlotse-Plugin. Du lädst die ZIP-Datei auf unserer Seite zum WordPress-Plugin herunter, installierst sie unter Plugins und verbindest sie einmal mit Deinem Chatlotse-Konto. Code brauchst Du dafür nicht.

Macht ein Chatbot meine Website langsamer?

Nicht, wenn das Skript mit dem Zusatz async eingebunden ist. Dann lädt der Browser Deine Seite weiter und holt den Chat nebenbei nach. Die Code-Zeile von Chatlotse ist bereits so eingestellt.

Kann ich den Chatbot nur auf bestimmten Seiten anzeigen?

Ja. Bei Chatlotse legst Du im Dashboard unter Installation fest, ob der Chat überall erscheint, überall außer auf bestimmten Seiten oder nur auf ausgewählten Seiten. Das geht in jedem Tarif.

Warum erscheint mein Chatbot nicht auf der Website?

Die häufigsten Ursachen: Der Code steht nicht vor dem schließenden body-Tag, die Domain ist im Dashboard nicht hinterlegt, ein Cache oder Cookie-Banner blockiert das Laden, oder der Browser zeigt eine alte Version der Seite. Lade die Seite zuerst mit Strg+F5 komplett neu.

Chatbot einbinden: HTML, WordPress, Wix, Shopify

Was Du vor dem Einbinden brauchst

Einbinden klingt technischer, als es ist. Ob selbst gebaute HTML-Seite, WordPress oder Baukasten: Der Einbau dauert 5 Minuten. Vorher wird Dein Konto einmal freigeschaltet.

Ein eingerichteter Chatbot: Du brauchst ein Konto beim Anbieter. Bei Chatlotse registrierst Du Dich, bestätigst Deine E-Mail-Adresse und wartest auf die Freischaltung. Wir prüfen jedes Konto persönlich. Werktags bist Du meist nach wenigen Stunden freigeschaltet. Wie Du den Bot mit Deinen Inhalten füllst, zeigt der Ratgeber Chatbot erstellen.
Zugang zum Code-Bereich Deiner Website: den Admin-Login für WordPress, Wix, Jimdo und Co. oder bei eigenem HTML Zugriff auf die Dateien.
Den Einbau-Code: Bei Chatlotse findest Du ihn im Dashboard unter Installation. Dein persönlicher Schlüssel ist dort schon eingesetzt.
Deine Domain im Dashboard: Trage die Adresse Deiner Website ohne https:// ein. Subdomains wie www. oder shop. sind automatisch mit abgedeckt. Jede Hauptdomain gehört zu genau einem Konto bei Chatlotse.

Mehr brauchst Du nicht. Du musst keine Server-Einstellungen ändern und keine Software installieren. Der Chatbot läuft beim Anbieter, Deine Website lädt nur das Skript nach. Ein weiterer Vorteil: Änderungen an Design oder Wissen im Dashboard wirken sofort, ohne dass Du den Code noch einmal anfassen musst.

Der Einbau-Code erklärt: was die eine Zeile macht

Der komplette Einbau besteht aus einer einzigen Zeile. Bei Chatlotse sieht sie so aus:

Auf Deiner Website einfügen

<script src="https://app.chatlotse.de/loader.js" data-tk="DEIN_PUBLIC_KEY" async></script>

Jeder Teil hat eine klare Aufgabe. Den letzten Punkt ergänzt Du nur bei Bedarf:

src ist die Adresse des Skripts. Es lädt das Chatfenster vom Server des Anbieters.
data-tk ist Dein persönlicher Schlüssel. Daran erkennt Chatlotse, welcher Chatbot geladen wird, mit Deinen Texten, Deinem Wissen und Deinem Design. DEIN_PUBLIC_KEY ist hier nur ein Platzhalter. Die fertige Zeile mit Deinem echten Schlüssel kopierst Du im Dashboard.
async sorgt dafür, dass der Browser Deine Seite weiter aufbaut, während der Chat nebenbei geladen wird. Deine Seite wird dadurch nicht langsamer.
data-consent ist optional. Mit den Werten click, auto oder off legst Du fest, wie der Chat mit der Einwilligung Deiner Besucher umgeht. Mehr dazu im Abschnitt Cookie-Banner und Einwilligung.

Bei anderen Anbietern sieht die Zeile ähnlich aus: eine Skript-Adresse und eine Kennung für Dein Konto. Der Weg zum Einbinden ist deshalb fast immer derselbe. Worauf Du bei der Wahl des Anbieters achten solltest, zeigt unsere Seite Chatbot-Software im Vergleich.

Einbinden in eigenes HTML

Bei einer Website in reinem HTML geht der Einbau am schnellsten:

Öffne die Datei, in der Deine Seite endet, etwa index.html, oder Deine Vorlage.
Suche das schließende Tag </body> ganz unten.
Füge die Code-Zeile direkt davor ein.
Speichere die Datei, lade sie auf Deinen Server hoch und prüfe die Seite im Browser.

Am Ende sieht Dein Code etwa so aus:

    <footer>...</footer>
    <script
      src="https://app.chatlotse.de/loader.js"
      data-tk="DEIN_PUBLIC_KEY"
      async></script>
  </body>
</html>

Nutzen mehrere Seiten dieselbe Fußzeile, etwa über ein Template oder ein Include, reicht ein einziger Einbau an dieser zentralen Stelle. Der Chat erscheint dann auf jeder Seite, die diese Vorlage nutzt. Hast Du keine gemeinsame Vorlage, muss die Zeile in jede Seite, auf der der Chat erscheinen soll.

Einbinden in WordPress: Plugin oder Code-Zeile

In WordPress hast Du zwei Wege. Der einfachere ist das kostenlose Chatlotse-Plugin für WordPress. Es läuft ab WordPress 6.0 und PHP 7.4. So gehst Du vor:

Lade die Plugin-Datei (ZIP) von chatlotse.de/wordpress-plugin/ herunter. Im offiziellen WordPress-Verzeichnis findest Du das Plugin nicht.
Gehe in WordPress zu Plugins, Installieren, „Plugin hochladen“, wähle die Datei aus und klicke auf „Jetzt installieren“ und danach auf „Aktivieren“.
Gehe zu Einstellungen, Chatlotse und klicke auf „Mit Chatlotse verbinden“. Dann meldest Du Dich einmal bei Chatlotse an, und das war es schon.

Ab jetzt ist der Chat auf Deiner Website eingebunden, ohne eine Zeile Code. Neue Versionen bekommst Du wie bei jedem anderen WordPress-Plugin über die gewohnte Update-Funktion. Wird Dein Nachrichten-Kontingent knapp, zeigt Dir das Plugin einen Hinweis im WordPress-Backend.

Der zweite Weg ist die Code-Zeile von Hand. Das passt, wenn Dein Theme ein Feld für eigenen Code im Footer anbietet oder Du ohnehin ein kleines Plugin für eigene Code-Schnipsel nutzt. Füge die Zeile dort so ein, dass sie auf jeder Seite geladen wird. Trägst Du sie direkt in eine Theme-Datei ein, kann sie beim nächsten Theme-Update verloren gehen. Entscheide Dich für einen der beiden Wege, nicht für beide gleichzeitig.

Einbinden in Wix, Jimdo, Webflow, Squarespace und Shopify

Gängige Baukästen bieten ein Feld für eigenen Code an, oft als Header-Code, Footer-Code oder eigener Code bezeichnet. Dort fügst Du dieselbe Zeile ein wie in reinem HTML. Weil sich die Menüs der Anbieter immer wieder ändern, beschreiben wir hier bewusst den allgemeinen Ort statt genauer Klickwege:

System	Wo die Code-Zeile hingehört
Eigenes HTML	Direkt vor `</body>`, in jeder Seite oder in der gemeinsamen Vorlage
WordPress	Chatlotse-Plugin ohne Code, alternativ Feld für Footer-Code im Theme oder ein Code-Plugin
Wix	Feld für eigenen Code in den Website-Einstellungen, am Ende des Seiten-Codes, für alle Seiten
Jimdo	Feld für eigenen Code bzw. Header-Code in den Einstellungen der Website
Webflow	Feld für eigenen Code im Footer-Bereich der Website-Einstellungen
Squarespace	Feld für eigenen Code im Footer-Bereich der Website-Einstellungen
Shopify	Im Theme-Code, in der Layout-Vorlage, die von jeder Seite geladen wird

In jedem dieser Systeme gelten dieselben Grundregeln:

Die Zeile muss für die ganze Website gelten, nicht nur für eine einzelne Seite.
Bietet Dein Baukasten ein Footer-Feld, nimm dieses. Gibt es nur ein Header-Feld, teste danach besonders gründlich.
Nach dem Einfügen speichern und die Website neu veröffentlichen. Prüfe dann die Live-Seite, nicht nur die Vorschau im Editor.
Nach Umbauten oder einem Designwechsel prüfen, ob der Chat noch da ist.

Chatbot in Shopify einbinden

In Shopify gehört die Code-Zeile in die Layout-Vorlage Deines Themes, die jede Seite des Shops lädt. Setze sie dort direkt vor das schließende body-Tag. Lege vorher eine Kopie des Themes an, dann kannst Du bei einem Fehler einfach zurück. Was ein Chatbot im Shop für Deine Kunden beantwortet, zeigt die Seite Chatbot für Onlineshops.

Chatbot in Wix einbinden

In Wix fügst Du die Zeile in den Website-Einstellungen im Bereich für eigenen Code ein. Wähle dort alle Seiten aus und lass den Code am Ende des Seiten-Codes laden. Wix bietet diesen Bereich in der Regel nur mit bezahltem Paket und eigener Domain an.

Chatbot in Jimdo einbinden

In Jimdo findest Du das Feld für eigenen Code in den Einstellungen Deiner Website, meist als Header-Code oder Kopfbereich bezeichnet. Füge die Zeile dort ein und veröffentliche die Seite neu. Ob das Feld in Deinem Paket freigeschaltet ist, siehst Du in Deinem Jimdo-Konto.

Chat als Blase oder fest in der Seite, und nur auf bestimmten Seiten

Im Normalfall erscheint der Chatbot als Sprechblase, die sich beim Klick zum Chatfenster öffnet. Du kannst den Chat aber auch fest an eine Stelle Deiner Seite setzen, zum Beispiel mitten auf die Kontaktseite. Dafür fügst Du dort dieses leere Element ein:

<div id="chatlotse-inline"></div>

Die Code-Zeile aus dem Abschnitt oben bleibt dabei unverändert. Chatlotse zeigt dann beides: die Sprechblase und den festen Chat. Willst Du nur den festen Chat ohne Blase, ergänzt Du in der Code-Zeile zusätzlich data-mode="inline". Wichtig: Das Element muss beim Laden der Seite schon im HTML stehen. Dieser feste Einbau, der Inline-Modus, gehört zum Tarif PREMIUM.

In jedem Tarif kannst Du außerdem festlegen, auf welchen Seiten der Chatbot überhaupt erscheint. Die Seiten-Sichtbarkeit stellst Du im Dashboard unter Installation ein:

Überall anzeigen: Das ist der Standard, der Chat erscheint auf allen Seiten.
Überall außer diesen Seiten: zum Beispiel nicht im Bewerbungsbereich oder im Bestellprozess.
Nur auf diesen Seiten: zum Beispiel nur auf ausgewählten Landingpages.

Du trägst eine Regel pro Zeile ein, etwa /jobs/. Ein Sternchen dient als Platzhalter, zum Beispiel /karriere/*. Änderungen wirken nach kurzer Zeit, das kann bis zu zwei Minuten dauern.

Willst Du den Chat von einem Button oder Link aus öffnen, trägst Du als Link-Ziel #chatlotse ein. Alternativ geht es mit dem Attribut data-chatlotse-open oder der Klasse chatlotse-open. Das funktioniert, wenn der Chat als Blase eingebunden ist. Auf Seiten, die Du über die Seiten-Sichtbarkeit ausblendest, öffnet auch ein Link den Chat nicht. Alle Wege findest Du in der Doku unter Chat per Link öffnen.

Cookie-Banner und Einwilligung richtig einstellen

Im Chat schreiben Besucher Nachrichten, dabei werden Daten verarbeitet. Viele Betreiber lassen den Chat deshalb erst starten, wenn Besucher zugestimmt haben. Chatlotse bringt dafür einen Consent-Modus mit: Besucher sehen zuerst den Hinweis „Chat aktivieren“, und erst nach ihrer Zustimmung lädt der Chat. Die Einstellung findest Du im Dashboard unter Installation.

Nutzt Du schon ein Cookie-Banner, wählst Du es im Dashboard aus der Liste aus. Chatlotse arbeitet zum Beispiel mit Borlabs, Cookiebot, Complianz, Usercentrics und beluCookie zusammen, oder Du stellst „automatisch“ ein. Der Chat wird dann erst sichtbar, nachdem Besucher im Cookie-Banner zugestimmt haben. Gut zu wissen: Solange das Cookie-Banner offen ist, erscheint die Chat-Blase noch nicht. Das ist Absicht, damit sich beides nicht überlagert.

Genauso wichtig ist der Widerruf. Lehnt ein Besucher im Cookie-Banner ab, entfernt Chatlotse den Chat und löscht die gespeicherte Zustimmung. Ohne Cookie-Banner bietest Du den Widerruf am besten über einen Link in Deiner Datenschutzerklärung an, der den Befehl window.Chatlotse.revokeConsent() ausführt.

Zu einer sauberen Einbindung gehören außerdem ein Hinweis auf den KI-Chatbot in Deiner Datenschutzerklärung und ein Auftragsverarbeitungsvertrag. Den AVV füllst Du bei Chatlotse im Dashboard unter Einstellungen online aus. Chatlotse ist in Deutschland gehostet, die KI-Antworten entstehen über Anthropic auf Basis von EU-Standardvertragsklauseln. Alle Details stehen in der Doku unter DSGVO und Datenschutz. Das ist eine Hilfestellung, keine Rechtsberatung.

Testen und Fehler beheben: Chat erscheint nicht

Nach dem Einbau lohnt sich ein kurzer Test. Öffne Deine Live-Website und lade sie mit Strg+F5 komplett neu, damit der Browser keine alte Version aus dem Zwischenspeicher zeigt. Hast Du ein Cookie-Banner, triff zuerst Deine Auswahl. Danach sollte die Chat-Blase erscheinen.

Bleibt der Chatbot unsichtbar, prüfe nacheinander diese Punkte:

Code-Position: Steht die Zeile direkt vor </body>? Öffne den Quelltext der Live-Seite und suche nach loader.js. Manche Editoren entfernen eigenen Code beim Speichern wieder.
Neu geladen: Hast Du die Seite mit Strg+F5 komplett neu geladen? Ein Test in einem anderen Browser schließt alte Zwischenspeicher ebenfalls aus.
Domain: Ist Deine Domain im Dashboard korrekt hinterlegt, ohne https://?
Cache und Cookie-Banner: Blockiert ein Cache Deiner Website, etwa ein Caching-Plugin, oder ein Cookie-Banner das Laden? Leere den Cache und prüfe die Auswahl im Banner.
Seiten-Sichtbarkeit: Ist die Seite, auf der Du testest, in den Regeln ausgeschlossen?
Inline-Chat: Steht das Element chatlotse-inline schon beim Laden im HTML und wird nicht erst später per JavaScript erzeugt?

Hilft keiner dieser Schritte, findest Du weitere Lösungen in der Doku unter Hilfe und häufige Fragen, oder Du schreibst an moin@chatlotse.de. Einen Überblick, was ein fertiger Chatbot auf Deiner Website leistet, gibt die Seite KI-Chatbot für Website.

Chatbot in Deine Website einbinden