Widget-Anpassung
Passe Farben, Texte, Design-Stile und Branding des Chat-Widgets individuell an dein Corporate Design an.
Übersicht
Das Lymbe AI Widget lässt sich umfassend an dein Corporate Design anpassen. Alle Einstellungen findest du im Dashboard unter Bots → Design. Änderungen werden in Echtzeit in der Vorschau angezeigt und sind sofort nach dem Speichern auf deiner Website sichtbar.
Farben
Du kannst über 20 Farbwerte individuell anpassen. Alle Werte akzeptieren CSS-Farbformate (Hex, RGB, HSL).
| Feld | Standard | Beschreibung |
|---|---|---|
| primaryColor | #09CC78 | Hauptfarbe – Button, Header, Links |
| primaryHoverColor | #08b56a | Hover-Zustand der Hauptfarbe |
| headerBackground | #09CC78 | Hintergrundfarbe des Widget-Headers |
| headerTextColor | #FFFFFF | Textfarbe im Header |
| botBubbleBackground | #F3F4F6 | Hintergrund der Bot-Nachrichten |
| botBubbleTextColor | #1F2937 | Textfarbe der Bot-Nachrichten |
| userBubbleBackground | #09CC78 | Hintergrund der User-Nachrichten |
| userBubbleTextColor | #FFFFFF | Textfarbe der User-Nachrichten |
| inputBackground | #FFFFFF | Hintergrund des Eingabefelds |
| inputTextColor | #1F2937 | Textfarbe im Eingabefeld |
| inputPlaceholderColor | #9CA3AF | Farbe des Placeholder-Texts |
| inputBorderColor | #E5E7EB | Rahmenfarbe des Eingabefelds |
| widgetBackground | #FFFFFF | Hintergrund des gesamten Widgets |
| dividerColor | #E5E7EB | Farbe der Trennlinien |
| timestampColor | #9CA3AF | Farbe der Zeitstempel |
| buttonBackground | #09CC78 | Hintergrund des Floating-Buttons |
| buttonIconColor | #FFFFFF | Icon-Farbe des Floating-Buttons |
| scrollbarColor | #D1D5DB | Farbe der Scrollbar |
| typingIndicatorColor | #09CC78 | Farbe der Tipp-Animation |
| linkColor | #09CC78 | Farbe von Links in Nachrichten |
| errorColor | #EF4444 | Farbe von Fehlermeldungen |
| successColor | #10B981 | Farbe von Erfolgsmeldungen |
Texte & Nachrichten
| Feld | Standard | Beschreibung |
|---|---|---|
| welcomeMessage | Hallo! Wie kann ich dir helfen? | Erste Nachricht des Bots beim Öffnen |
| inputPlaceholder | Nachricht eingeben… | Placeholder im Eingabefeld |
| headerTitle | Bot-Name | Titel im Widget-Header |
| headerSubtitle | Meistens antwortet sofort | Untertitel im Widget-Header |
| offlineMessage | Wir sind gerade nicht erreichbar. | Anzeige außerhalb der Arbeitszeiten |
| poweredByText | Powered by Lymbe AI | Branding-Text im Footer (ab Pro-Plan ausblendbar) |
| typingText | schreibt… | Text der Tipp-Anzeige |
| sendButtonLabel | Senden | Screenreader-Label des Senden-Buttons |
| closeButtonLabel | Schließen | Screenreader-Label des Schließen-Buttons |
| newConversationText | Neues Gespräch | Button-Text für neues Gespräch |
Design-Stile
Wähle zwischen zwei vordefinierten Design-Stilen oder passe einzelne Werte manuell an:
Modern (Standard)
- Abgerundete Ecken (border-radius: 16px)
- Dezente Schatten für Tiefe
- Fließende Animationen
- Minimalistisches Layout
Classic
- Kantige Ecken (border-radius: 4px)
- Klare Linien und Rahmen statt Schatten
- Reduzierte Animationen
- Kompakteres Layout
Avatar & Logo
Der Avatar wird im Header und neben den Bot-Nachrichten angezeigt. Lade ein Bild im PNG-, JPG- oder SVG-Format hoch (empfohlen: 128x128 px, max. 1 MB). Ohne eigenen Avatar wird ein generiertes Icon mit der Primärfarbe angezeigt.
Branding
Im Free-Plan wird „Powered by Lymbe AI" im Widget-Footer angezeigt. Ab dem Pro-Plan kannst du:
- Den „Powered by"-Text komplett ausblenden
- Ein eigenes Logo im Header verwenden
- Einen Custom-Footer-Text definieren
- Benutzerdefinierte CSS-Klassen injizieren
Erweitert: CSS Override
Für maximale Kontrolle kannst du eigene CSS-Regeln definieren. Das Widget wird in einem Shadow DOM gerendert, daher musst du den speziellen Selektor ::part() verwenden:
/* Eigene CSS-Regeln für das Lymbe AI Widget */
lymbe-widget::part(header) {
background: linear-gradient(135deg, #09CC78, #06a060);
}
lymbe-widget::part(message-bot) {
font-family: 'Inter', sans-serif;
font-size: 14px;
}
lymbe-widget::part(input) {
border-radius: 24px;
}
lymbe-widget::part(button) {
width: 64px;
height: 64px;
}Responsive Verhalten
Das Widget passt sich automatisch an die Bildschirmgröße an. Auf mobilen Geräten (< 640px Breite) wird das Chat-Fenster im Vollbild geöffnet. Auf Desktop-Geräten erscheint es als schwebendes Fenster mit den Maßen 400x600 px.
| Breakpoint | Verhalten |
|---|---|
| < 640px | Vollbild-Modus, Chat-Button 56x56 px |
| 640px - 1024px | Schwebendes Fenster 380x560 px |
| > 1024px | Schwebendes Fenster 400x600 px |