Widget-styling & aanpassing
Bepaal het uiterlijk van de widget via init-opties of de dashboard-UI.
Vooraf ingestelde formaten#
Kies uit drie ingebouwde formaatpresets via chatSize en launcherSize:
| chatSize | Chatvenster |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize bepaalt de zwevende knop onafhankelijk van chatSize:
| launcherSize | Launcher | Icoon |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // breder & hoger chatvenster
launcherSize: 'small' // kleinere zwevende knop
});Positionering#
Verfijn de positie van de widget met offsetBottom en offsetSide (in pixels). In combinatie met position (bottom-right of bottom-left) geeft dit volledige controle over de plaatsing.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px vanaf onderkant (standaard: 20)
offsetSide: 30 // 30px vanaf linkerrand (standaard: 20)
});Randstraal & Z-index#
borderRadius bepaalt de afronding van de hoeken van het chatvenster (standaard: 20px).zIndex bepaalt de stapelvolgorde (standaard: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // scherpere hoeken
zIndex: 100000 // lagere z-index om conflicten te voorkomen
});Aangepaste CSS#
Voor geavanceerde styling die verder gaat dan de ingebouwde opties, geef je een customCSS-string door. Deze wordt in de Shadow DOM van de widget geïnjecteerd — het kan elke widget-stijl overschrijven, maar heeft geen invloed op je pagina.
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;
}
/* Stijl de CTA-knop in aankondigingskaarten */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Plaats de CTA-knoppen van aankondigingen in een rij in plaats van de standaard stapel */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Beschikbare CSS-klassen:
| Klasse | Element |
|---|---|
| .respondoai-widget | Hoofdcontainer (positie, z-index) |
| .respondoai-launcher | Zwevende knop |
| .respondoai-chat | Chatvenster |
| .respondoai-header | Chat-koptekstbalk |
| .respondoai-messages | Container voor berichtenlijst |
| .respondoai-message.user | Berichtbubbel van gebruiker |
| .respondoai-message.assistant | Berichtbubbel van bot |
| .respondoai-input-area | Container voor invoerbalk |
| .respondoai-input | Tekstinvoerveld |
| .respondoai-send | Verzendknop |
| .respondoai-suggestion-btn | Knoppen voor snelle vragen |
| .respondoai-announcement-cta-button | CTA-knop in een aankondigingskaart |
| .respondoai-announcement-ctas | Wrapper rond de CTA-knoppen in een aankondigingskaart (doelindeling) |