Kontakt

Chat-Widget: Installation & Betrieb

Schritt-für-Schritt-Anleitung zur Einbindung des Nahlo Chat-Widgets auf Websites von Händlern, Gastronomen und Städten.

Was ist das Nahlo Chat-Widget?

Mit dem Nahlo Chat-Widget bindest du deinen KI-Assistenten mit wenigen Zeilen HTML direkt in deine bestehende Website ein. Besucher können über einen schwebenden Button (Floating Action Button / FAB) Fragen zu deinen Produkten, Speisekarten, Dienstleistungen oder Öffnungszeiten stellen und erhalten in Sekundenschnelle präzise Antworten.

  • Kein Endnutzer-Login erforderlich: Besucher deiner Website können sofort ohne Registrierung chatten.
  • Leichtgewichtig: Wird asynchron vom Nahlo CDN geladen und verlangsamt deine Seitenladezeit nicht.
  • Sicher: Der Zugriff wird serverseitig über einen kryptografischen Embed-Token auf deinen Betrieb oder deine Stadt begrenzt.

1. Embed-Token im Dashboard erzeugen

Je nach Anwendungsfall erzeugst du den Token an unterschiedlichen Stellen:

Wichtiger Sicherheitshinweis: Aus Sicherheitsgründen wird das Token nach der Erstellung nur ein einziges Mal im Klartext angezeigt. Kopiere das Token oder das vollständige Snippet sofort in die Zwischenablage. Solltest du das Token verlieren, widerrufe es einfach und erstelle ein neues.

2. Der Standard-Einbettungscode (Snippet)

Füge folgenden HTML-Block unmittelbar vor dem schließenden </body>-Tag deiner Website ein:

<!-- Nahlo Chat Widget Start -->
<div id="stadtgeist-widget" data-token="DEIN_EMBED_TOKEN_HIER" data-color="#0f766e" data-api-url="https://api.nahlo.de" data-position="bottom-right" data-teaser-mode="always" data-launcher-text="Fragen zu unseren Angeboten? Schreiben Sie uns!"></div>
<script src="https://widget.nahlo.de/widget.js" async></script>
<!-- Nahlo Chat Widget Ende -->

Ersetze DEIN_EMBED_TOKEN_HIER durch deinen persönlichen Token.

3. Konfigurations-Attribute im Detail

Du kannst das Verhalten und Aussehen des Widgets flexibel über data-*-Attribute anpassen:

AttributPflicht?StandardwertBeschreibung & Mögliche Werte
data-tokenJa(keiner)Dein kryptografischer Einbettungs-Token.
data-api-urlNeinhttps://api.nahlo.deDie Basis-URL des Nahlo-Backends. Muss immer https://api.nahlo.de lauten.
data-colorNein#0f766ePrimäre Akzentfarbe für den Button und die Chat-Header als Hex-Code (z. B. #0066cc).
data-localeNeindeOberflächensprache des Chat-Fensters (de für Deutsch, en für Englisch).
data-positionNeinbottom-rightPosition des Buttons auf dem Bildschirm: bottom-right, bottom-left, top-right, top-left.
data-teaser-modeNeinalwaysVerhalten des Sprechblasen-Hinweises:
• always: Text wird dauerhaft neben dem Button eingeblendet
• hover: Text erscheint nur beim Überfahren mit der Maus
• timeout: Sprechblase schließt sich nach einigen Sekunden
• hidden: Sprechblase bleibt ausgeblendet (nur runder Button)
data-launcher-textNein(Standardtext)Eigener Text für die Begrüßungs-Sprechblase (z. B. „Haben Sie Fragen zu unseren Öffnungszeiten?“).

Hinweis zur Priorität: Falls du im Dashboard unter Einstellungen einen individuellen Launcher-Text oder Farben konfiguriert hast, überschreiben diese Einstellungen serverseitig die im HTML hinterlegten Attribute.

4. Zweigstellen-Auswahl (Branches)

Wenn dein Unternehmen über mehrere Filialen verfügt, kannst du beim Erstellen des Tokens wählen:

  • Shop-weiter Token: Das Widget durchsucht die Informationen aller Filialen und nennt standortübergreifende Angebote.
  • Zweigstellen-spezifischer Token: Das Widget antwortet gezielt nur mit den Öffnungszeiten, Beständen und Dienstleistungen der ausgewählten Filiale (ideal, wenn jede Filiale eine eigene Unterseite auf deiner Website hat).

5. Einbindung in gängige CMS-Systeme

WordPress

  1. Öffne im WordPress-Adminbereich Design → Customizer oder bearbeite deine Vorlage im Block-Theme-Editor.
  2. Füge einen Block vom Typ Individuelles HTML (Custom HTML) in den Footer-Bereich deiner Website ein.
  3. Füge das Snippet ein und klicke auf Veröffentlichen.
  4. Alternativ: Nutze ein Plugin wie Header and Footer Scripts oder WPCode, um das Snippet global vor </body> einzufügen.

Wix & Jimdo

  1. Öffne die Seiteneinstellungen und navigiere zu Benutzerdefinierter Code / Einbetten (Custom Code).
  2. Wähle als Platzierung Ende des Body (</body>) und aktiviere den Code für alle Seiten.
  3. Füge den Codeblock ein und speichere die Änderungen.

Shopify

  1. Öffne Vertriebskanäle → Onlineshop → Themes.
  2. Klicke bei deinem aktuellen Theme auf die drei Punkte … → Code bearbeiten.
  3. Öffne die Datei layout/theme.liquid.
  4. Scrolle ganz nach unten und füge den Widget-Code direkt über der Zeile </body> ein.
  5. Klicke auf Speichern.

6. Fehlerbehebung (Troubleshooting)

ProblemMögliche UrsacheLösung
Button wird nicht angezeigtScript-Tag fehlt oder Element-ID falsch.Prüfe, ob <div id="stadtgeist-widget"> und <script src="https://widget.nahlo.de/widget.js"> exakt so im Quelltext vorhanden sind.
Fehler 401 / Ungültiger TokenToken wurde im Dashboard widerrufen oder beim Kopieren abgeschnitten.Generiere im Dashboard einen neuen Token und aktualisiere das Snippet auf deiner Website.
Widget öffnet sich, aber meldet NetzwerkfehlerVeraltete oder fehlerhafte data-api-url.Stelle sicher, dass data-api-url="https://api.nahlo.de" verwendet wird (kein localhost oder alte Hostnamen).
Widget überdeckt Cookie-Banner oder MenüCSS z-Index Konflikt.Das Widget nutzt standardmäßig z-index: 99999. Falls dein Cookie-Banner verdeckt wird, kannst du data-position="bottom-left" wählen oder den z-Index des Cookie-Banners erhöhen.
Änderungen im Dashboard sind noch nicht sichtbarCDN-Caching (~5 Minuten).Vektorisierte Antworten und Dashboard-Updates sind nach spätestens 5 Minuten im Widget aktiv. Lade deine Testseite mit Strg + F5 neu.
Token verlegt oder vergessenToken werden nach Erstellung aus Sicherheitsgründen nie wieder im Klartext gespeichert.Klicke im Dashboard auf Neuen Token generieren und ersetze das Snippet.

7. Sicherheit & Token-Rotation

  • Niemals in öffentliche GitHub-Repositories committen: Auch wenn Embed-Tokens nur Lesezugriff auf dein freigegebenes Sortiment erlauben, sollten sie nicht in öffentlichen Quelltext-Repositories gespeichert werden.
  • Token kompromittiert? Ein Klick auf Widerrufen im Dashboard sperrt das Widget augenblicklich. Niemand kann diesen Token mehr für Abfragen nutzen.

Fragen oder Feedback zu dieser Anleitung?

Wir erweitern das Hilfe-Center kontinuierlich. Sag uns gerne, wenn dir ein Thema fehlt.

Nachricht senden