Chat-Widget mit eigenem CSS anpassen

Eigenes CSS

Wenn die integrierten Farb- und Design-Einstellungen nicht ausreichen, können Sie beide Widgets mit eigenem CSS anpassen. Das CSS wird direkt in das Widget eingefügt, sodass es auch dann funktioniert, wenn das Widget in einem Shadow DOM läuft, das die Stylesheets Ihrer Seite nicht erreichen können.

Verfügbar ab dem Standard-Tarif, sowohl für das schwebende Widget als auch für das Inline-Widget, jeweils mit einem eigenen CSS-Feld.

Wo Sie es finden

• Schwebendes Widget: Dashboard → Ihr Assistent → Kanäle → Chat-Widget → Erweitert
• Inline-Widget: Dashboard → Ihr Assistent → Kanäle → Inline-Chat → Erweitert

Die Live-Vorschau neben dem Editor wendet Ihr CSS direkt bei der Eingabe an. Das Feld fasst bis zu 20.000 Zeichen.

Stabile Selektoren

Ihr CSS spricht die Elemente des Widgets über diese dokumentierten Klassen an. Sie sind ein stabiler Standard: Sie funktionieren auch über Widget-Aktualisierungen hinweg zuverlässig.

Warnung: Nur diese Selektoren sind stabil. Alle anderen internen Klassennamen können sich bei einer Aktualisierung des Widgets ohne Vorankündigung ändern und Ihr Styling beschädigen. Prüfen Sie Ihr Styling nach Widget-Aktualisierungen erneut.

Kein !important erforderlich

Ihr CSS überschreibt die integrierten Stile des Widgets automatisch, einfache Selektoren reichen aus:

.wca-header {
  background: #0f172a;
}
.wca-message--bot {
  border-radius: 4px;
}

Technisch gesehen verschiebt das Widget seine integrierten Stile in einen CSS-Cascade-Layer, sobald eigenes CSS vorhanden ist. Daher greifen Ihre Regeln ohne Layer immer zuerst, unabhängig von der Spezifität des Selektors.

Beispiele

Chat-Button mit einer Animation anpassen:

@keyframes wca-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.wca-bubble {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: wca-pulse 2s ease-in-out infinite;
}

Eckige Nachrichtenblasen mit individueller Schriftgröße:

.wca-message--bot,
.wca-message--user {
  border-radius: 4px;
  font-size: 15px;
}

Individuelles Eingabe-Styling:

.wca-input {
  border: 2px solid #0f172a;
  border-radius: 8px;
}
.wca-input::placeholder {
  color: #94a3b8;
}

Einschränkungen

• Position und Größe des schwebenden Widgets (Abstände, Breite, Höhe) werden über die Dashboard-Einstellungen gesteuert, nicht per CSS, da sie als Inline-Styles angewendet werden
• Andere interne Klassen außerhalb der dokumentierten .wca-*-Selektoren sind nicht stabil
• @import und externe url()-Verweise sind erlaubt, zählen jedoch zum Zeichenlimit und verlängern die Ladezeit

Best Practices

• Nutzen Sie bevorzugt die integrierten Einstellungen für Farben, Schriften und Bilder, verwenden Sie eigenes CSS nur für Anpassungen, die über die Einstellungen nicht möglich sind
• Bleiben Sie bei den dokumentierten Selektoren, damit Widget-Aktualisierungen Ihr Styling nicht beschädigen
• Prüfen Sie Ihre Live-Website nach Widget-Aktualisierungen, insbesondere wenn Sie Stile außerhalb der stabilen Selektoren verwendet haben
• Halten Sie den Code schlank, wenige gezielte Regeln lassen sich leichter pflegen als ein vollständiges Re-Theme