Chatlotse einbinden
So einfach holst Du Dir den Chat auf Deine Website. Die passende Einstellung findest Du im Dashboard-Menü unter „Installation“.
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.
Kommst Du gerade nicht direkt an Deine Website? Im Dashboard unter Installation kannst Du Dir den Code über den Button „Per E-Mail an mich schicken" auch bequem zuschicken lassen.
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.
Im Dashboard unter Installation > Chatbot einbauen findest Du außerdem eine kurze Schritt-für-Schritt-Anleitung passend zu Deiner Website: WordPress, Wix/Jimdo/Shopify und Co., oder falls jemand anderes Deine Website betreut oder Du es selbst nicht genau weißt.
Domain eintragen
Im Dashboard gibst Du dann noch Deine Website-Adresse ein (mit oder ohne „https://“, wir kürzen sie automatisch) und klickst auf „Adresse speichern“. Subdomains Deiner Adresse sind automatisch mit abgedeckt: Trägst Du zum Beispiel deine-firma.de ein, funktioniert Dein Chat auch auf www.deine-firma.de, shop.deine-firma.de oder jobs.deine-firma.de. Eine Hauptdomain gehört dabei immer genau einem Chatlotse-Konto, ihre Subdomains eingeschlossen.
Nach dem Speichern siehst Du zunächst „Adresse gespeichert“. Sobald der Code auf Deiner Website eingebunden ist, bestätigen wir die Adresse automatisch: Chatlotse sucht selbstständig danach, das kann ein paar Minuten dauern. Findest Du Deine Domain in einer Sonderform wieder, etwa weil sie über einen Google Tag Manager eingebunden ist und deshalb nicht automatisch gefunden wird, kann unser Support die Adresse auf Anfrage auch manuell bestätigen.
Wechselst Du später zu einer anderen Website-Adresse, trägst Du im selben Feld einfach die neue Adresse ein und speicherst erneut. Die alte Adresse wird dabei automatisch durch die neue ersetzt, eine erneute Bestätigung läuft dann wie beim ersten Mal ab.
Datenschutztext eintragen
Sobald Dein Chatbot läuft, ist das Pflicht: Ergänze Deine Datenschutzerklärung um einen kurzen Text zu Chatlotse. Im Dashboard unter Installation findest Du dafür einen fertigen Text zum Kopieren, wahlweise als normalen Text oder als HTML-Quelltext für Deine Datenschutzseite. Füg ihn dort ein und setz danach im Dashboard den Haken „Ich habe den Text eingetragen". Es handelt sich um eine Vorlage, keine Rechtsberatung, im Zweifel lass sie fachkundig prüfen.
Cookie-Einwilligung
Nutzt Du auf Deiner Website ein Cookie-Banner, erkennt Chatlotse es automatisch, zum Beispiel Cookiebot, Usercentrics, OneTrust, consentmanager.net, Klaro, Osano, iubenda, Borlabs, Complianz, CookieYes, Cookie Script und weitere gängige Cookie-Tools. Dafür musst Du im Dashboard nichts einstellen. Stimmt Dein Besucher dort Marketing, Funktional/Präferenzen oder einem Dienst „Chatlotse“ zu, startet der Chat direkt wie gewohnt. Lehnt er ab, wählt nur „Statistik“ oder ist gar kein Cookie-Tool vorhanden, erscheint die Chat-Blase trotzdem: Ein Klick zeigt dann kurz die Frage „Chat starten?“ mit einem Hinweis auf die Datenübertragung, danach öffnet sich der Chat sofort. Diese Zustimmung merkt sich der Browser 180 Tage.
Speicherdauer
Chatverläufe werden nach spätestens 90 Tagen automatisch gelöscht. Wünschst Du eine kürzere Speicherdauer, zum Beispiel 30 Tage, stellen wir sie Dir auf Anfrage über den Support ein.
Chat zusätzlich fest auf einer Seite platzieren PREMIUM
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 auf dieser Seite den festen Chat anstelle der Sprechblase. Willst Du auf derselben Seite ausnahmsweise beides gleichzeitig, ergänze im Skript-Tag aus Schritt 1 das Attribut data-mode="both". 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.
ki-chat, funktioniert die weiterhin. Statt der ID geht auch das Attribut data-chatlotse-inline an einem beliebigen Element.Willst Du ausschließlich den festen Chat, 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/*#chatlotse) öffnen. Die Einstellung gilt für alle Tarife.Eine allgemeinverständliche Anleitung zum Einbau findest Du im Ratgeber Chatbot in Website einbinden.