Die Farben sowie die Grösse des Micromate-Widgets können sehr einfach über CSS Custom Properties (CSS Variables) angepasst werden. Die Variablen können an beliebiger Stelle gesetzt werden:
Styling
Die CSS Custom Properties können an einer beliebigen Stelle im Frontend der Webapplikation in welchem das Widget integriert werden gesetzt werden.
| Code Block |
|---|
:root {
--micromate-font: monospace;
--micromate-color-primary: red;
--micromate-color-widget: green;
--micromate-avatar-icon: url('data:image/png;base64,iVBORw0KGgoAAAA....')
} |
Das aufgeführte Beispiel führt zur folgenden Veränderung des Widgets:
Möglichkeiten
Die folgenden Variablen stehen zur Verfügung:
Name | Beschreibung | Standard-Wert |
|---|---|---|
--micromate-font | Schriftart | "Open Sans", sans-serif |
--micromate-color-primary | Hauptfarbe innerhalb des Chats | #facb72 |
--micromate-color-widget | Farbe des Widget-Headers | #334455 |
--micromate-avatar-icon | Setzt das Icon welches im Avatar (dem Button zum öffnen/schliessen des Widgets) angezeigt wird. Beinhaltet ein Base64 encodiertes Bild. | url('data:image/png;base64,iVBORw0KGgoAAAA....') |