Widget-Styling & Anpassung
Steuern Sie das Erscheinungsbild des Widgets über Init-Optionen oder die Dashboard-Oberfläche.
Größen-Voreinstellungen#
Wählen Sie aus drei integrierten Größen-Voreinstellungen über chatSize und launcherSize:
| chatSize | Chat-Fenster |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize steuert die schwebende Schaltfläche unabhängig von chatSize:
| launcherSize | Launcher | Symbol |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // breiteres & höheres Chat-Fenster
launcherSize: 'small' // kleinere schwebende Schaltfläche
});Positionierung#
Feinjustieren Sie die Position des Widgets mit offsetBottom und offsetSide (in Pixeln). In Kombination mit position (bottom-right oder bottom-left) haben Sie die volle Kontrolle über die Platzierung.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px vom unteren Rand (Standard: 20)
offsetSide: 30 // 30px vom linken Rand (Standard: 20)
});Eckenradius & Z-Index#
borderRadius steuert die Eckenrundung des Chat-Fensters (Standard: 20px).zIndex legt die Stapelreihenfolge fest (Standard: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // kantigere Ecken
zIndex: 100000 // niedrigerer z-index, um Konflikte zu vermeiden
});Benutzerdefiniertes CSS#
Für fortgeschrittenes Styling über die integrierten Optionen hinaus übergeben Sie eine customCSS-Zeichenkette. Sie wird in das Shadow DOM des Widgets injiziert — sie kann jeden Widget-Stil überschreiben, aber Ihre Seite nicht beeinflussen.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
customCSS: `
.respondoai-chat {
border-radius: 24px;
box-shadow: 0 12px 48px rgba(0,0,0,0.2);
}
.respondoai-launcher {
box-shadow: none;
border: 2px solid #e5e7eb;
}
.respondoai-header {
backdrop-filter: blur(10px);
}
.respondoai-message.assistant {
background: #f0f9ff;
}
/* Die CTA-Schaltfläche in Ankündigungskarten gestalten */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* CTA-Schaltflächen der Ankündigung in einer Reihe statt im Standard-Stapel anordnen */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Verfügbare CSS-Klassen:
| Klasse | Element |
|---|---|
| .respondoai-widget | Wurzelcontainer (Position, z-index) |
| .respondoai-launcher | Schwebende Schaltfläche |
| .respondoai-chat | Chat-Fenster |
| .respondoai-header | Chat-Kopfzeile |
| .respondoai-messages | Container der Nachrichtenliste |
| .respondoai-message.user | Nachrichtenblase des Nutzers |
| .respondoai-message.assistant | Nachrichtenblase des Bots |
| .respondoai-input-area | Container der Eingabeleiste |
| .respondoai-input | Texteingabefeld |
| .respondoai-send | Senden-Schaltfläche |
| .respondoai-suggestion-btn | Schaltflächen für Schnellfragen |
| .respondoai-announcement-cta-button | CTA-Schaltfläche innerhalb einer Ankündigungskarte |
| .respondoai-announcement-ctas | Wrapper um die CTA-Schaltflächen in einer Ankündigungskarte (Ziel-Layout) |