Das Chatbot-Widget vollständig gestalten
Erstelle ein markengerechtes, zugängliches Widget und prüfe es auf Desktop und Mobilgerät.
Widget Integration trennt Appearance, Images, Behavior, Positioning, Triggers, Action Bar und Advanced. Die eingebauten Einstellungen sollten den Großteil des Designs abdecken, bevor Custom CSS nötig wird.
Die Vorschau ist hilfreich; Produktions-QA muss aber reale Website, responsive Breakpoints, Tastaturfokus und Überlagerungen mit Consent- oder Checkout-Elementen einschließen.
Das hast du am Ende eingerichtet
- Ein markengerechtes Theme mit Bildern
- Ein fokussierter Begrüßungsablauf mit Prompt Buttons
- Ein kopierter Floating-Widget-Embed mit geprüfter Live-Antwort
Das brauchst du
- Markenfarben und Kontrastziele
- Optimierte Logo-/Avatar-Dateien
- Eine Staging- oder Testseite mit Widget
Gestalten, führen, prüfen
Appearance definiert das visuelle System, Images die Identität, Behavior die erste Interaktion und Positioning verhindert Überlagerungen. Advanced umfasst Spracherkennung, Branding und CSS.
Das schwebende Widget lädt die gespeicherte Konfiguration live; Änderungen benötigen keinen neuen Embed-Code.
01–06
Schritt für Schritt einrichten
Appearance, Farben und Schrift setzen
Schaffe eine gut lesbare visuelle Basis.
Wähle Theme, Titel und Schrift und setze Header-, Bot-, Nutzer- und Buttonfarben. Prüfe den Textkontrast in jedem Bubble-Zustand statt nur Farbfelder zu beurteilen.
Avatar-, Button- und Willkommensbilder hinzufügen
Nutze kleine, zweckbezogene Assets.
Lade Avatar, optionalen Chat-Button und Willkommensbild hoch. Nutze optimierte quadratische Assets mit klarer Silhouette und prüfe transparente Ränder auf hellen und dunklen Seiten.
Verhalten und Prompt Buttons konfigurieren
Mache die erste sinnvolle Frage sichtbar.
Schreibe eine kurze Begrüßung und zwei bis drei Prompt Buttons zu häufigen Zielen. Entscheide bewusst über Quellenanzeige, Mikrofon, automatische Übersetzung, Speech Bubble und ausgeschlossene Pfade.
Desktop- und Mobile-Position einstellen
Vermeide Consent-Banner und wichtige Aktionen.
Passe X-/Y-Abstände für Desktop und Mobilgerät getrennt an. Teste den kleinsten unterstützten Viewport, mobile Browserleisten und geöffnetes Consent-Banner, damit der Button keine Navigation oder Kaufaktion verdeckt.
Vorschau und reale Seite testen
Prüfe Öffnen, Schließen, Prompts und Tastaturbedienung.
Nutze die Dashboard-Vorschau und teste anschließend das eingebettete Widget auf der Staging-Seite mit Maus, Tastatur und Touch. Prüfe Begrüßung, Prompt-Aktionen, Scrollverhalten, Fokusreihenfolge und Datenschutzhinweis.
Embed-Code des Floating Widgets kopieren
Installiere ein Skript und das Chatbot-spezifische Custom Element.
Kopiere am Ende von Widget Integration den vollständigen HTML-Block. Er lädt das WebChatAgent-Skript asynchron und rendert das Element `web-chat-agent` mit der aktuellen Chatbot-ID. Füge ihn einmal vor dem schließenden `body`-Tag oder im globalen Custom-Code-Bereich deines CMS ein.
Veröffentliche zuerst auf Staging und prüfe Browserkonsole, Consent-Verhalten sowie Allowed Domains. Gespeicherte Designänderungen lädt das Widget automatisch; das Snippet muss nicht nach jeder Anpassung ersetzt werden.
Beispiel & Ergebnis
So sieht der echte Praxistest aus
Jedes Tutorial nennt eine feste Eingabe, das erwartete Ergebnis und transparent, was im lokalen Test tatsächlich verifiziert wurde.
Praxisbeispiel: Das Chatbot-Widget vollständig gestalten
Dieses konkrete Szenario wurde mit dem temporären Tutorial-Konto vollständig ausgeführt.
Konkrete Testeingabe
Ändere den Titel auf „Tutorial Lab“, nutze eine blaue Nutzerblase, kopiere den Floating-Embed und öffne die Live-Vorschau.
Erwartetes Ergebnis
Das Live-Widget übernimmt das Design, der Embed enthält die richtige Chatbot-ID und eine echte Frage erhält eine lesbare Antwort.
Tatsächlich geprüft
Die gespeicherte Vorschau zeigte Tutorial Lab, die blaue Nutzerfarbe und eine belegte Antwort; asynchrones Skript und web-chat-agent-Element wurden vollständig in Widget Integration geprüft.
Tipps & Tricks
So wird die Einrichtung zuverlässig
Teste mit realistischen Beispielen, dokumentiere deine Ausgangswerte und ändere jeweils nur eine Einstellung. So erkennst du, was die Qualität tatsächlich verbessert.
Beginne mit eingebauten Einstellungen
Nutze Custom CSS nur für verbleibende Details; eingebaute Farben und Abstände sind bei Updates robuster.
Prompt Buttons sollten Absichten zeigen
„Tarife vergleichen“ ist klarer als „Mehr erfahren“ und gibt dem Chatbot sofort nützlichen Kontext.
Teste Inhalte vor dem Feinschliff
Ein schönes Widget ersetzt keine fehlende Wissensbasis. Prüfe zuerst die wichtigsten Antworten und finalisiere danach Begrüßung, Prompts und Design.
Wähle das Modell für das Gespräch, nicht für die Farben
Nutze für Routine-Support ein schnelles, wirtschaftliches Modell und vergleiche ein stärkeres Modell nur, wenn feste Testfragen einen messbaren Qualitätsgewinn zeigen.
Wenn etwas nicht klappt
Fehlerbehebung
Prüfe Status, Berechtigungen und Testdaten systematisch, bevor du Modell oder Prompt wechselst.
Die erwartete Option fehlt
Prüfe Tarif, Funktionsrechte und ausgewählten Chatbot. Kostenpflichtige oder Beta-Funktionen können ohne erfüllte Voraussetzungen ausgeblendet sein.
Das Testergebnis ist uneinheitlich
Starte die Testkonversation neu, verwende identische Eingaben und ändere jeweils nur eine Einstellung, damit die Ursache messbar bleibt.
Bereit für den Praxistest
Veröffentliche das Design auf einer Staging-Seite, sammle Desktop-/Mobile-Screenshots und dokumentiere vor dem Rollout eine kurze Zugänglichkeits- und Überlagerungsprüfung.