Stile e personalizzazione del widget
Controlla l’aspetto del widget tramite le opzioni di init o l’interfaccia della Dashboard.
Preset di dimensione#
Scegli tra tre preset di dimensione integrati tramite chatSize e launcherSize:
| chatSize | Finestra di chat |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize controlla il pulsante flottante in modo indipendente da chatSize:
| launcherSize | Launcher | Icona |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // finestra di chat più larga e più alta
launcherSize: 'small' // pulsante flottante più piccolo
});Posizionamento#
Regola con precisione la posizione del widget con offsetBottom e offsetSide (in pixel). Combinato con position (bottom-right o bottom-left), questo offre il pieno controllo sul posizionamento.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px dal basso (default: 20)
offsetSide: 30 // 30px dal bordo sinistro (default: 20)
});Border Radius e Z-Index#
borderRadius controlla l’arrotondamento degli angoli della finestra di chat (default: 20px).zIndex imposta l’ordine di sovrapposizione (default: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // angoli più netti
zIndex: 100000 // z-index più basso per evitare conflitti
});CSS personalizzato#
Per uno stile avanzato oltre alle opzioni integrate, passa una stringa customCSS. Viene iniettata nello Shadow DOM del widget — può sovrascrivere qualsiasi stile del widget ma non può influire sulla tua 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;
}
/* Stile del pulsante CTA all'interno delle card di annuncio */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Disponi i pulsanti CTA degli annunci in riga invece dell'impilamento predefinito */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Classi CSS disponibili:
| Classe | Elemento |
|---|---|
| .respondoai-widget | Contenitore radice (position, z-index) |
| .respondoai-launcher | Pulsante flottante |
| .respondoai-chat | Finestra di chat |
| .respondoai-header | Barra dell’intestazione della chat |
| .respondoai-messages | Contenitore della lista dei messaggi |
| .respondoai-message.user | Fumetto del messaggio utente |
| .respondoai-message.assistant | Fumetto del messaggio del bot |
| .respondoai-input-area | Contenitore della barra di input |
| .respondoai-input | Campo di input testo |
| .respondoai-send | Pulsante di invio |
| .respondoai-suggestion-btn | Pulsanti delle domande rapide |
| .respondoai-announcement-cta-button | Pulsante CTA all’interno di una card di annuncio |
| .respondoai-announcement-ctas | Contenitore attorno ai pulsanti CTA in una card di annuncio (layout di destinazione) |