Chat-Widget – Deutsche Demo

Die Chat-Schaltfläche befindet sich unten rechts. Nachfolgend finden Sie eine vollständige Erklärung aller Einstellungen, die Sie ändern können — bearbeiten Sie einfach den entsprechenden Wert im Script-Tag am Anfang dieser Datei.

So sieht das Widget aus

• Header: Fast schwarz (#1F1F1F) mit einer 2 px grünen Akzentlinie darunter. Das DDoptics-Kolibri-Logo sitzt in einem dunkelgrünen Kreisbadge auf der linken Seite. Titel 16 px / mittlere Stärke.
• Launcher-Schaltfläche: Fast schwarzer Kreis mit weißem Sprechblasen-Icon und einem pulsierenden grünen Online-Punkt oben rechts.
• Bot-Avatar: Dunkelgrüner Kreis mit dem DDoptics-Logo, erscheint neben der ersten Bot-Nachricht einer aufeinanderfolgenden Antwortfolge. Folgenachrichten sind eingerückt und am Avatar ausgerichtet.
• Nachrichtenblasen: Bot-Blasen sind weiß mit symmetrischen 14 px Ecken. Nutzerblasen sind tiefgrün mit demselben symmetrischen Radius — kein Schwanz auf beiden Seiten.
• Kategorie-Navigationskarte: Eine weiße Karte mit 5 Icon-Kacheln (Zielfernrohre, Ferngläser, Spektive, Zubehör, Service) erscheint unter der Willkommensnachricht. Jede Kachel zeigt ein grünes Icon und in der erweiterten Ansicht eine Beschriftung. In der kompakten Ansicht ist die Beschriftung ausgeblendet und erscheint beim Hover als Tooltip. Die Karte verschwindet nach dem ersten gesendeten Benutzernachricht.
• Eingabefeld: Zeigt immer einen 1,5 px grünen Rahmen (#2C8E4A). Im Fokus wird er auf 2 px verbreitert und erhält einen weichen grünen Schimmer.
• Senden-Schaltfläche: Salbeigrün (#6FA882), 44 × 44 px, Papierflieger-Icon in dunklem Grün für ausreichenden Kontrast. Wird bei leerem Eingabefeld auf 45 % Deckkraft gedimmt.
• Fenstergrößen: Kompakt (360 × 520 px) und Erweitert (440 × 640 px), umgeschaltet über die Erweiterungsschaltfläche im Header. Auf Mobilgeräten füllt das Widget den gesamten Bildschirm aus und die Erweiterungsschaltfläche wird ausgeblendet.
• Header-Steuerelemente: Schaltflächen zum Erweitern und Minimieren oben rechts. Beide zeigen beim Hover einen Tooltip. Auf Mobilgeräten ist die Erweiterungsschaltfläche ausgeblendet.
• Tipp-Indikator: Drei Punkte, die nacheinander aufleuchten, während der Agent eine Antwort vorbereitet.

Konfigurierbare Einstellungen (Datenattribute)

1. data-title — Titeltext im Header des Widgets.
   Aktueller Wert: DDoptics-Experten
   Ändern Sie diesen Text nach Belieben.
2. data-status — Statuszeile unterhalb des Titels.
   Aktueller Wert: Beratung & Hilfe in wenigen Minuten
   Passen Sie den Text an oder ersetzen Sie ihn durch eine Nachricht außerhalb der Geschäftszeiten.
3. data-placeholder — Platzhaltertext im Nachrichteneingabefeld.
   Aktueller Wert: Nachricht schreiben…
4. data-greeting — Die erste Bot-Nachricht, die sofort beim Öffnen des Chats angezeigt wird, noch bevor der Server antwortet.
   Aktueller Wert: Hi! 👋 DD Optics Assistent hier.
   Hinweis: Der KI-Agent sendet ebenfalls eine Begrüßung — stimmen Sie beide aufeinander ab, um Wiederholungen zu vermeiden.
5. data-chips — Beschriftungen der Kategorie-Kacheln, getrennt durch |. Muss die gleiche Anzahl an Einträgen wie data-chip-icons haben.
   Aktueller Wert: Zielfernrohre|Ferngläser|Spektive|Zubehör|Service
   Ein Klick auf eine Kachel sendet deren Beschriftung als Nutzernachricht. Entfernen Sie beide Chip-Attribute vollständig, um die Karte auszublenden.
6. data-chip-icons — Icon-Bildpfade für die Kategorie-Kacheln, getrennt durch |. Ein Pfad pro Kachel, in der gleichen Reihenfolge wie data-chips.
   Aktueller Wert: /icons/chat_icons/target.png|/icons/chat_icons/binoculars.png|/icons/chat_icons/spektive.png|/icons/chat_icons/settings.png|/icons/chat_icons/service.png
7. data-error-connect — Nachricht, die angezeigt wird, wenn der Server beim Start nicht erreichbar ist.
   Aktueller Wert: Entschuldigung, ich konnte momentan keine Verbindung herstellen. Bitte versuchen Sie es später noch einmal.
8. data-error-msg — Nachricht, die angezeigt wird, wenn eine Nachricht während des Gesprächs nicht gesendet werden kann.
   Aktueller Wert: Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut.

Feste Einstellungen (nicht konfigurierbar)

• Header-Farbe: Fast schwarz (#1F1F1F) gemäß der DDoptics-Marke.
• Logo-Badge: Verwendet /icons/chat_icons/ddoptics_icon.png — ersetzen Sie die Datei, um das Logo in Header und Nachrichten-Avataren zu aktualisieren.
• Senden-Schaltfläche: Nur Icon, keine Textbeschriftung.

Verhalten auf Mobilgeräten

Auf Bildschirmen mit einer Breite von weniger als 768 px füllt das Widget den gesamten Viewport aus (keine abgerundeten Ecken, keine Randabstände). Die Erweiterungsschaltfläche wird ausgeblendet. Die Beschriftungen der Kategorie-Kacheln sind auf Mobilgeräten immer sichtbar — 8 px, fett — sodass Nutzer die Kategorien ohne Hover-Geste lesen können. iOS Safe-Area-Abstände werden berücksichtigt, sodass Inhalte nie hinter der Home-Leiste verborgen sind.