Auf Deiner Website

Chatbot einbinden

So einfach holst Du Dir den Chat auf Deine Website. Die passende Einstellung findest Du im Dashboard-Menü unter „Installation".

Auf dieser Seite

Code kopieren
Code einfügen
Domain eintragen
Cookie-Tool wählen
Speicherdauer
Inline-Modus
Seiten-Sichtbarkeit

WordPress-Nutzer?

Nutzt Du WordPress? Dann geht es noch leichter mit unserem Plugin.

Code kopieren

Im Dashboard wartet Dein ganz persönlicher Einbau-Code auf Dich.

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

Kurz erklärt: data-tk ist Dein ganz persönlicher Schlüssel (Du findest ihn im Dashboard), und async sorgt dafür, dass der Chat geladen wird, ohne Deine Seite langsamer zu machen. Wenn Du noch mehr Kontrolle möchtest, kannst Du optional data-consent (click, auto oder off) ergänzen.

Code einfügen

Platziere den Code einfach direkt vor dem schließenden </body> Deiner Website und speichere. Bei Website-Baukästen (Wix, Squarespace, Webflow, Jimdo u. a.) fügst Du ihn ganz bequem in das Feld für eigenen Code / Footer ein.

Domain eintragen

Im Dashboard gibst Du dann noch Deine Website-Adresse ein (bitte ohne „https://").

Speicherdauer

Chatverläufe werden nach spätestens 90 Tagen automatisch gelöscht, ganz ohne Dein Zutun. Wünschst Du eine kürzere Speicherdauer, zum Beispiel 30 Tage, stellen wir sie Dir auf Anfrage über den Support ein.

Lade Deine Seite nach dem Einfügen einmal neu, schon erscheint der Chat unten rechts. Das Beste daran: Änderungen an Design oder Wissen im Dashboard wirken sofort, ohne dass Du den Code noch einmal anfassen musst.

Chat zusätzlich fest auf einer Seite platzieren

Möchtest Du den Chat nicht nur als Blase, sondern zusätzlich fest an einer bestimmten Stelle Deiner Seite einbetten, zum Beispiel mitten im Text oder in einer Spalte? Dann fügst Du dort, wo der Chat erscheinen soll, einfach dieses leere Container-Element ein - der Code aus Schritt 1 bleibt unverändert.

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

Sobald dieses Div vorhanden ist, zeigt Chatlotse automatisch beides - die Sprechblase und den festen Chat. Ein zusätzliches Attribut ist nicht nötig. Der Chat füllt dabei immer die volle Breite und Höhe seines Containers. Bei der Höhe hast Du zwei Möglichkeiten: Gibst Du dem Container keine eigene Höhe, wählt der Chat sie automatisch (je nach Bildschirm etwa 430 bis 520 Pixel, auf dem Smartphone etwas mehr) - er kollabiert also nie. Gibst Du dem Container über Dein CSS eine eigene Höhe (zum Beispiel eine feste Höhe von 600 Pixel, auch mit Media Queries), füllt der Chat diese Höhe komplett aus und passt sich auch später an Größenänderungen an.

Wichtig beim Einbau

Das Container-Div muss beim Laden der Seite bereits im HTML stehen. Erzeugst Du es erst später per JavaScript, findet der Loader es nicht. Nutzt Du aus einer älteren Einbindung noch die ID ki-chat, funktioniert die weiterhin.

Willst Du ausschließlich den festen Chat, ganz ohne Sprechblase? Dann ersetzt dieser Code den aus Schritt 1 (das Div bleibt in diesem Fall Pflicht):

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

Seiten-Sichtbarkeit

Möchtest Du, dass Dein Chatbot nicht auf jeder Seite Deiner Website erscheint? Zum Beispiel nicht im Bewerbungsbereich oder nur auf ausgewählten Landingpages? Das stellst Du im Dashboard unter Installation im Abschnitt „Auf welchen Seiten soll der Chatbot erscheinen?" ein. Es gibt drei Modi zur Auswahl:

Überall anzeigen - der Standard, der Chat erscheint auf jeder Seite.
Überall außer diesen Seiten - eine Blockliste, der Chat erscheint überall, nur nicht auf den eingetragenen Seiten.
Nur auf diesen Seiten - eine Allowliste, der Chat erscheint ausschließlich auf den eingetragenen Seiten.

Für die Blockliste und die Allowliste trägst Du im Textfeld eine Regel pro Zeile ein. Ohne Sternchen wird geprüft, ob die Seiten-Adresse die Regel enthält, zum Beispiel blendet /jobs/ den Chat sowohl auf /jobs/ als auch auf /jobs/webdesigner aus. Möchtest Du mit einem Platzhalter arbeiten, setze ein Sternchen, zum Beispiel /karriere/* oder example.de/jobs/*. Groß- und Kleinschreibung spielt dabei keine Rolle.

/jobs/
/karriere/*
example.de/jobs/*

Gut zu wissen

Geprüft wird der Pfad der aufgerufenen Seite, bei Bedarf auch mit Domain. Änderungen wirken nach kurzer Zeit, wegen unseres Server-Caches kann das bis zu 2 Minuten dauern. Blendest Du den Chat auf einer Seite aus, lässt er sich dort auch nicht über einen Link oder Button (#chatlotse) öffnen. Die Einstellung gilt für alle Tarife.