KI-Chatbot-Widget gestalten und richtig einbinden

Öffne Widget Integration → Appearance. Beginne mit Widget Width und optionaler Height, danach Theme, Font Family und Chat Title. Tutorial Lab nutzt Modern und den Titel „Tutorial Lab“; ohne feste Höhe bleibt das responsive Standardverhalten aktiv.

Ordne Farben nach Rollen zu: Header und Text, Bot-Blase und Text, Besucherblase und Text, Launcher und Icon. Das Beispiel nutzt einen dunkelblauen Header mit weißem Text sowie eine kräftig blaue Besucherblase. Prüfe jedes Paar in der echten Vorschau mit mindestens 4,5:1 Kontrast.

Öffne Images. Avatar Image steht neben Bot-Nachrichten, Chat Button Image ersetzt die Launcher-Grafik und Welcome Image unterstützt den leeren Startbildschirm. Verwende nicht dasselbe breite Logo für alle Rollen.

Nutze optimierte PNG- oder WebP-Dateien mit klarer Silhouette. Avatar und Launcher sollten quadratisch sein; prüfe Transparenz auf hellen und dunklen Seiten. Der gezeigte Zustand lässt optionale Bilder bewusst leer, weil das eingebaute Icon hier klarer ist.

Öffne Content & Behavior. Entscheide über Website-Aktivierung, Initially Open, Mobile-Sichtbarkeit, Quellen, Mikrofon, automatische Übersetzung, Speech Bubble und Pfadausschlüsse. Ändere jeweils nur einen Zustand und prüfe die sichtbare Wirkung.

Formuliere eine kurze Begrüßung mit klarem Zweck. Die Prompt Buttons liegen nicht in diesem Tab, sondern unter Buttons & Formulare im Abschnitt Schnellaktionen. Lege dort zwei oder drei mit echter Absicht an. „Which plan is right for me?“ liefert mehr Kontext als „Learn more“. Öffne das große Panel nicht ungeprüft automatisch auf jeder Seite.

Öffne Positioning. Desktop Offsets und Mobile Offsets sind unabhängige Abstände von der gewählten Ecke. Tutorial Lab nutzt rechts und unten jeweils 20 Pixel als neutralen Ausgangswert.

Teste nicht nur den Launcher. Öffne das gesamte Widget bei kleinster unterstützter Breite gemeinsam mit Consent-Banner, mobiler Browserleiste und Sticky-Navigation oder Checkout-Element. Erhöhe den passenden Abstand, bis nichts Wichtiges verdeckt wird.

Wähle Test Your Chatbot und prüfe Titel, blaue Besucherblase, lesbare Bot-Blase, Prompt-Verhalten, Eingabe, Schließen und Branding. Bediene das Widget einmal mit Maus und einmal per Tastatur; Fokus muss sichtbar bleiben und nach dem Schließen sinnvoll zurückkehren.

Im geprüften Beispiel lautet die Frage „What are the support hours?“ Das echte Widget antwortet mit Montag bis Freitag, 8:00 bis 18:00 Uhr Central European Time. Damit sind gespeichertes Design und quellenbasierte Antwort gemeinsam belegt. Teste zusätzlich eine absichtlich unbekannte Frage mit längerer Fallback-Antwort.

Scrolle zum Codeblock in Widget Integration und kopiere den vollständigen HTML-Code statt nur der Chatbot-ID. Der Block lädt das WebChatAgent-Skript asynchron und erzeugt das Element `web-chat-agent` mit der ID dieses Assistenten. Füge ihn einmal vor `</body>` oder im globalen Custom-Code-Bereich des CMS ein.

Ergänze zuvor die exakten Staging- und Produktions-Hostnamen unter Allowed Websites. Falls deine Consent-Regel nicht notwendige Drittanbieter-Widgets blockiert, lade das Skript erst nach passender Einwilligung; bei Einstufung als notwendiger Support dokumentiere Entscheidung und Datenfluss. Prüfe doppelte Skripte, Konsolenfehler und CSP-Blockaden.

Gespeicherte Farben, Prompts und Abstände lädt das vorhandene Element automatisch. Ersetze den Embed nur beim bewussten Wechsel zu einer anderen Chatbot-ID oder Integrationsart.