Trustlocal-Chatbot ohne Cookie-Banner einbinden: So geht es

Ja, den Chatbot von Trustlocal kannst du ohne Cookie-Banner einbinden, aber nicht mit dem Code, den du im Dashboard bekommst. Der lädt beim Seitenaufruf Schriften von Google und speichert eine Kennung im Browser, bevor ein Besucher irgendetwas geklickt hat. Die Lösung hat drei Teile: ein eigener Chat-Knopf, das Widget lädt erst nach dem Klick, und das Stylesheet kommt ohne Google Fonts von deinem Server. Auf dieser Website läuft es genau so, der Knopf ist unten rechts.

Transparenz vorab: Ich bin zahlender Kunde von Trustlocal, wie im Erfahrungsbericht beschrieben. Für diesen Text bekomme ich nichts.

Was macht der Standard-Code von Trustlocal beim Seitenaufruf?

Er arbeitet sofort, auf jeder Seite, ohne dass der Besucher den Chat angefasst hat. Das steht im Code des Widgets:

Cookies setzt das Widget nicht, Google Analytics oder ein Facebook-Pixel stecken auch nicht drin. Ein Banner brauchst du trotzdem, solange es so eingebunden ist.

Warum reicht ein Absatz in der Datenschutzerklärung nicht?

Weil zwei Regeln greifen, die sich mit Text allein nicht erfüllen lassen.

Google Fonts vom Google-Server. Das Landgericht München I hat am 20. Januar 2022 entschieden, dass ein Website-Betreiber die IP-Adresse eines Besuchers nicht ohne Einwilligung an Google geben darf, nur um Schriften zu laden (Az. 3 O 17493/20). Der Besucher bekam 100 € Schadensersatz, danach kamen massenhaft Abmahnungen. Das @import im Trustlocal-Stylesheet ist genau so eine Einbindung.

Speichern im Browser. Nach § 25 TDDDG (früher TTDSG) darf eine Website nur mit Einwilligung etwas auf dem Gerät des Besuchers speichern. Das gilt für Cookies, aber genauso für localStorage und sessionStorage. Ohne Einwilligung geht es nur, wenn das Speichern unbedingt nötig ist, um einen Dienst zu liefern, den der Besucher ausdrücklich will. Wer eine Seite aufruft, will aber noch keinen Chat. Wer auf „Chat öffnen“ klickt, will ihn. An diesem Klick hängt die ganze Lösung.

Wie sieht der Einbau ohne Banner aus?

Bis zum Klick ist der Chat ein Teil deiner eigenen Website, erst danach kommt Trustlocal ins Spiel:

1. Eigener Chat-Knopf, auf Wunsch mit eigenem Hinweis wie „Fragen? Schreib mir kurz“. Beides ist dein Code, nichts geht an Trustoo, nichts wird gespeichert.
2. Klick lädt das Widget mit denselben Einstellungen wie der Originalcode und öffnet den Chat sofort.
3. Stylesheet ohne Google Fonts von deinem Server, die Schrift kommt aus deiner Seite.

Schritt 1: Der eigene Chat-Knopf

Ein Knopf unten rechts, dazu optional ein Hinweis, der nach 15 Sekunden erscheint:

<div class="chatstart" id="chatstart">
  <p class="chatstart__teaser" hidden>
    <button type="button" data-chat-start>Fragen? Schreib mir kurz eine Nachricht.</button>
  </p>
  <button type="button" class="chatstart__knopf" data-chat-start
          aria-label="Chat öffnen (lädt den Dienst Trustlocal)">
    <!-- Sprechblasen-Icon -->
  </button>
</div>

Gestalte den Knopf so, wie der Trustlocal-Knopf später aussehen soll: gleiche Größe, gleiche Position (right: 24px; bottom: 24px, auf dem Handy 16 px). Dann springt nichts, wenn das Widget ihn ersetzt. Im Hinweis darf ruhig stehen, dass der Chat über Trustlocal läuft und erst beim Öffnen lädt, das ist ehrlich und kostet nichts.

Schritt 2: Das Widget erst beim Klick laden

Die Einstellungen aus dem Trustlocal-Code bleiben gleich, sie wandern nur in ein Skript, das erst beim Klick läuft. Drei Werte stellst du um: auto-open und teaser-enabled auf false, weil du beides selbst machst, und das Stylesheet zeigt auf deine Kopie.

<script>
(function () {
  var box = document.getElementById('chatstart');
  var attrs = {
    'id': 'DEINE-TRUSTLOCAL-ID',
    'country-code': 'DE', 'language-code': 'de', 'main-language': 'de',
    'bot-name': 'Dein Name',
    'primary-color': '#a52317',
    'enable-ai': 'true', 'enable-quote': 'true',
    'enable-callback': 'true', 'enable-whatsapp': 'true',
    'whatsapp-number': '+49 ...',
    'welcome-message': 'Hi! Wie kann ich helfen?',
    'teaser-enabled': 'false',
    'auto-open': 'false',
    'auto-init': 'true'
  };
  var gestartet = false;

  // eigener Hinweis nach 15 Sekunden, rein lokal
  setTimeout(function () {
    if (!gestartet) box.querySelector('.chatstart__teaser').hidden = false;
  }, 15000);

  box.addEventListener('click', function (e) {
    if (!e.target.closest('[data-chat-start]') || gestartet) return;
    gestartet = true;

    var css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = '/css/trustoo-chatbot.css';   // deine Kopie, siehe Schritt 3
    document.head.appendChild(css);

    var s = document.createElement('script');
    s.src = 'https://chatbot-widget.trustoo.nl/trustoo-chatbot.iife.js';
    Object.keys(attrs).forEach(function (k) { s.setAttribute('data-' + k, attrs[k]); });
    s.onerror = function () { location.href = '/kontakt'; };
    document.body.appendChild(s);

    // sobald der Trustlocal-Knopf da ist: anklicken, eigenen Knopf entfernen
    var beob = new MutationObserver(function () {
      var launcher = document.querySelector('.trustoo-chatbot__launcher');
      if (!launcher) return;
      beob.disconnect();
      launcher.click();
      box.remove();
    });
    beob.observe(document.body, { childList: true, subtree: true });
  });
})();
</script>

Zwei Dinge, die mich beim Einbau Zeit gekostet hätten:

• Das Widget liest seine Einstellungen über document.currentScript. Das funktioniert auch bei einem Skript, das du per JavaScript einfügst. Du musst nur die data-Attribute setzen, bevor du es anhängst.
• Das eingebaute Auto-Open greift erst ab 1024 Pixel Breite. Auf Handy und Tablet bleibt der Chat zu, auch mit auto-open und Verzögerung 0. Deshalb klickt das Skript den Knopf des Widgets selbst an, das klappt auf jeder Breite.

Wenn das Skript nicht lädt, etwa wegen eines Werbeblockers, schickt der Fehler-Fall den Besucher auf deine Kontaktseite. Ein Knopf, der nichts tut, kostet mehr als einer, der umleitet.

Schritt 3: Das Stylesheet ohne Google Fonts

Lade das Stylesheet herunter, nimm die erste Regel heraus und setz deine eigene Schrift ein:

curl -s https://chatbot-widget.trustoo.nl/trustoo-chatbot.css \
  | sed -e 's#@import"https://fonts.googleapis.com/[^"]*";##' \
        -e 's#"Manrope", "Segoe UI", sans-serif#"Deine Schrift", system-ui, sans-serif#' \
  > css/trustoo-chatbot.css

Danach darf in der Datei kein fonts.googleapis.com mehr stehen. Prüf das mit grep googleapis css/trustoo-chatbot.css.

Der Haken: Trustoo entwickelt das Widget laufend weiter. Ändern sich Klassennamen im Skript, passt deine Kopie nicht mehr dazu und der Chat sieht schief aus. Wiederhole den Befehl alle paar Wochen und schau dir den Chat danach einmal an.

Die Alternative ohne Kopie: Statt das Stylesheet zu kopieren, kannst du das Original von Trustoo laden und dem Browser per Content-Security-Policy verbieten, Stylesheets von Google nachzuladen. Der Browser schickt die Anfrage dann gar nicht erst ab:

<meta http-equiv="Content-Security-Policy"
      content="style-src 'self' 'unsafe-inline' https://chatbot-widget.trustoo.nl; font-src 'self' data:">

Die Schrift setzt du dann in deinem eigenen CSS mit .trustoo-chatbot { --trustoo-font-family: "Deine Schrift", sans-serif; }. Vorteil: Das Stylesheet bleibt immer aktuell und unverändert. Nachteil: Die Richtlinie gilt für die ganze Seite. Lädt deine Website noch andere Stylesheets oder Schriften von fremden Servern, musst du die eintragen, sonst fehlen sie.

Ist das mit den Nutzungsbedingungen von Trustlocal vereinbar?

Die Bedingungen regeln den Einbau des Chatbots nicht ausdrücklich (Stand 29.10.2026). Wann das Skript lädt und ob der Chat von allein aufgeht, legst du ohnehin über die Einstellungen im Code fest, die Trustlocal selbst anbietet. Der einzige Graubereich ist die Kopie des Stylesheets: Art. 6.1 der Nutzungsbedingungen untersagt allgemein, Kopien anzufertigen. Wer da sicher sein will, nimmt die Variante mit der Content-Security-Policy oder fragt beim Kundendienst nach.

Was gehört in die Datenschutzerklärung?

Ein eigener Abschnitt zum Chat, der ehrlich beschreibt, wann was passiert. Mindestens:

• Anbieter: Trustlocal DACH GmbH, Saarbrücker Str. 36, 10405 Berlin, ein Unternehmen der Advanza B.V. in Amsterdam, technisch über Server von trustoo.nl.
• Laden erst nach Klick: Vorher geht nichts an Trustlocal und es wird nichts gespeichert.
• Daten beim Öffnen: IP-Adresse, Zeitpunkt, Seitenadresse, Browser, Sitzungskennung im sessionStorage, die beim Schließen des Tabs verschwindet.
• Daten im Chat: Nachrichten, Auswahl im Chat, Bewertungen und alles, was der Besucher selbst einträgt, etwa Name, Telefon, E-Mail und Projektbeschreibung.
• KI-Antworten: Erste Antworten kommen von einem KI-Assistenten.
• Rechtsgrundlage: Art. 6 Abs. 1 lit. b DSGVO für Anfragen, sonst lit. f; für die Sitzungskennung § 25 Abs. 2 Nr. 2 TDDDG.
• Verweis auf die Datenschutzerklärung von Trustlocal für weitere Dienstleister und Speicherdauer. Trustlocal nennt dort keine KI-Anbieter, das solltest du nicht selbst ergänzen.

Wie das ausformuliert aussieht, steht in meiner Datenschutzerklärung im Abschnitt zum Chat.

Was verlierst du dabei?

Das automatische Öffnen nach ein paar Sekunden fällt weg, ebenso der Hinweis-Text, den Trustlocal selbst einblendet. Den Hinweis ersetzt du durch deinen eigenen, der kommt ja von deiner Seite. Wer den Knopf nie anklickt, wird aber auch nicht mehr angesprochen. Wie stark das die Zahl der Chats drückt, kann ich noch nicht sagen. Ich zähle auf meiner Seite die Klicks auf den Knopf und trage die Zahlen hier nach, sobald ein paar Wochen zusammen sind.

Brauchst du danach wirklich kein Banner mehr?

Nur, wenn sonst nichts auf deiner Seite eine Einwilligung braucht. Der Chat ist oft nicht das einzige Problem. Typische weitere Fälle sind Google Analytics, eingebettete Google Maps oder YouTube-Videos, ein Facebook-Pixel und Schriften, die woanders noch vom Google-Server kommen. Ob deine Seite beim Aufruf schon Daten an Dritte schickt, siehst du mit dem DSGVO-Check in wenigen Sekunden.

Du willst das nicht selbst einbauen?

Ich baue dir den Trustlocal-Chatbot so ein, wie er hier läuft: eigener Knopf im Design deiner Website, Laden erst nach Klick, Stylesheet ohne Google Fonts und der passende Abschnitt für deine Datenschutzerklärung. Zum Festpreis, egal ob deine Seite mit WordPress, Grav oder eigenem Code läuft. Schreib mir kurz, was du hast.