Eigenes CSS

Das Feld Eigenes CSS wird nach Minayas eigenen Stilen angehängt, sodass Ihre Regeln ohne !important gewinnen. Das Widget wird in einem Shadow Root gerendert, sodass nichts von hier auf Ihre Seite übergreift — und das CSS Ihrer Seite kann das Widget nicht versehentlich umgestalten.

Abstand zum Rand

Die Position wird über zwei Custom Properties gesteuert. Setzen Sie sie auf .aicb-root, und sowohl Launcher als auch Panel folgen:

.aicb-root {
  --aicb-offset-side: 40px;
  --aicb-offset-bottom: 32px;
}

Die Standardwerte sind jeweils 20px. Diese gelten nur für Desktop — die mobilen Breakpoints setzen ihre eigenen, engeren Werte, sodass ein großer Desktop-Abstand das Widget nicht von einem Smartphone-Bildschirm drängen kann.

Farbvariablen

Jede Farbe, die das Widget darstellt, ist eine CSS-Custom-Property, sodass Sie eine einzelne überschreiben können, ohne die gesamte Regel erneut zu formulieren. Es sind dieselben Variablen, die die Dashboard-Farbwähler schreiben.

/* Override just the two you care about. */
.aicb-root {
  --aicb-bot-bubble: #EEF2FF;
  --aicb-bot-text: #1E1B4B;
}

Eine hier gesetzte Farbe überschreibt den Dashboard-Wert für die jeweils angezeigte Palette. In den meisten Fällen sollte das nicht nötig sein — legen Sie die Farben unter Widget-Erscheinungsbild fest, und Minaya wählt die passende Palette für Sie. Greifen Sie zu CSS, wenn Sie etwas möchten, das die Farbwähler nicht abdecken, etwa einen Farbverlauf:

.aicb-header {
  background: linear-gradient(135deg, #14B8A6, #0EA5E9);
}

Minaya ermittelt Hell oder Dunkel in JavaScript, statt dies einer Media Query zu überlassen, damit es dem eigenen Design-Umschalter Ihrer Website folgen kann und nicht nur dem Betriebssystem. Das bedeutet, dass ein Block @media (prefers-color-scheme: dark) in Ihrem eigenen CSS dem Umschalter Ihrer Website nicht folgt — beschränken Sie Dunkelmodus-Überschreibungen stattdessen auf Ihren eigenen Selektor, oder legen Sie die Farben pro Palette im Dashboard fest. Siehe An das Design der Seite anpassen.

Klassenreferenz

Beispiele

Eckiges, flaches Panel

.aicb-panel {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #d4d4d8;
}

Größeres Panel auf Desktop

@media (min-width: 900px) {
  .aicb-panel { width: 400px; height: 560px; }
}

Eckiger Launcher

.aicb-launcher {
  border-radius: 12px;
  width: 52px;
  height: 52px;
}

Links in Antworten neu gestalten

.aicb-link {
  color: #7c3aed;
  text-decoration-thickness: 2px;
}

Feedback-Schaltflächen ausblenden

.aicb-feedback { display: none; }

Genauigkeit der Vorschau

Die Dashboard-Vorschau spiegelt die wichtigsten Elemente wider — Panel, Header, Nachrichten, Blasen, Fußzeile, Eingabefeld, Senden-Schaltfläche sowie Launcher, Begrüßungsblase und Vorab-Formular — unter denselben Klassennamen, sodass die meisten Regeln dort sichtbar werden.

Sie ist eine Annäherung und nicht das eigentliche Widget: Es handelt sich um reines DOM, keinen Shadow Root, und Tippanzeige sowie Feedback-Schaltflächen fehlen. Positionsabstände bewegen sie ebenfalls nicht sichtbar, da die Vorschau in einem festen Kasten statt in einem Viewport sitzt — aus demselben Grund wird der Launcher dem Panel gegenüber statt darunter dargestellt.

Testen Sie Platzierungsänderungen auf einer echten Seite. Siehe Widget installieren.

Ein Hinweis zur Vorsicht

Eigenes CSS wird unverändert angewendet und nicht validiert. Eine fehlerhafte Regel kann das Layout des Widgets für jeden Besucher beschädigen — nehmen Sie daher jeweils nur eine Änderung vor und überprüfen Sie das Ergebnis auf einer echten Seite.