Die visuelle Darstellung des Widgets kann im Avatar und in den Farben an das Corporate Design angeglichen werden. Eine konsistente visuelle Aufbereitung des KI-Chatbots stärkt das Vertrauen der Nutzer:innen, die Identität des digitalen Assistenten und sorgt für einen professionellen Markenauftritt auf der Webseite.
Der Zugriff auf den Widget-Editor erfolgt über den Menüpunkt Widget & Teaser → Widget Darstellung.
Die in diesem Artikel gewählten zwei Farben (Blau-Töne) sind lediglich Beispiele. Im Widget-Editor können die Farben frei ausgewählt werden.
1. Avatar
Der Avatar fungiert als das „Gesicht“ des KI-Chatbots. Er erscheint als fiktive Gesprächsperson prominent in der Kopfleiste des Widgets sowie im Chatverlauf neben jeder Nachricht des Systems.
Ein Beispiel für eine virtuelle Gesprächsperson ist Moini, der Avatar von moinAI.
Im Menüpunkt Widget & Teaser → Widget Darstellung im Abschnitt Darstellung stehen zwei Optionen zur Verfügung:
- Moini-Design: Ein optimierter Standard-Avatar, der farblich angepasst und optional mit dem eigenen Firmenlogo versehen werden kann.
- Eigener Avatar: Upload einer individuellen Grafik (z. B. ein Maskottchen oder ein spezifisches Symbol). Die Grafik sollte quadratisch und web-optimiert hochgeladen werden. Falls seitens des Corporate Designs nichts dagegen spricht, wird empfohlen, den Avatar im Moini-Design zu nutzen, da dieser bereits optimal auf die Verwendung mit dem Widget eingestellt ist.
Details zur Einrichtung sind im Artikel zur individuellen Gestaltung des Chatbot-Avatars beschrieben.
2. Farben
Die Widget-Farben dienen dazu, das Widget visuell z. B. an die Farben des Corporate Designs anzupassen. Die visuelle Gestaltung erfolgt über die Definition von Grund- und Sekundärfarben. Diese Farbcodes bilden die Basis für alle interaktiven und statischen Elemente der Nutzer:innen-Oberfläche. Im Widget-Editor ist in der Live-Vorschau direkt sichtbar, wie die gewählten Farben zusammenwirken.
Bei Bedarf kann für jedes Element zwischen einer hellen oder dunklen Kontrast-Option nach WCAG 2.1 gewählt werden.
Kontrast-Optionen
Für eine bessere Lesbarkeit eignet sich für Dunkelblau die Kontrast-Farbe weiß wohingegen für das Hellblau die Kontrastfarbe Schwarz optimal ist. Der Farbkontrast nach WCAG 2.1 Button gibt Auskunft darüber, ob der Kontrast im ausgewählten Element hoch genug ist.
Welche Elemente lassen sich einfärben?
Der Header (Kopfleiste), die Sprechblasen auf Nutzerseite sowie der Widget-Button, wenn das Widget geschlossen ist, lassen sich einfärben. Für eine differenzierte Gestaltung lassen sich die Komponenten separat einfärben. Für jedes Element kann zudem zwischen einer hellen oder dunklen Kontrast-Option für die Schrift und Symbole gewählt werden.
Mehr über den Einsatz von Farben ist in diesem Artikel zu Widget-Farben beschrieben.