Style et personnalisation du widget
Contrôlez l’apparence du widget via les options d’initialisation ou l’interface du tableau de bord.
Préréglages de taille#
Choisissez parmi trois préréglages de taille intégrés via chatSize et launcherSize :
| chatSize | Fenêtre de chat |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize contrôle le bouton flottant indépendamment de chatSize :
| launcherSize | Lanceur | Icône |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // fenêtre de chat plus large et plus haute
launcherSize: 'small' // bouton flottant plus petit
});Positionnement#
Ajustez précisément la position du widget avec offsetBottom et offsetSide (en pixels). Combiné à position (bottom-right ou bottom-left), cela offre un contrôle total sur le placement.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px depuis le bas (par défaut : 20)
offsetSide: 30 // 30px depuis le bord gauche (par défaut : 20)
});Rayon de bordure et z-index#
borderRadius contrôle l’arrondi des coins de la fenêtre de chat (par défaut : 20px).zIndex définit l’ordre d’empilement (par défaut : 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // coins plus nets
zIndex: 100000 // z-index plus faible pour éviter les conflits
});CSS personnalisé#
Pour un style avancé au-delà des options intégrées, transmettez une chaîne customCSS. Elle est injectée dans le Shadow DOM du widget — elle peut remplacer n’importe quel style du widget mais ne peut pas affecter votre page.
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;
}
/* Styliser le bouton CTA dans les cartes d’annonce */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Disposer les boutons CTA d’annonce en ligne plutôt qu’empilés par défaut */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Classes CSS disponibles :
| Classe | Élément |
|---|---|
| .respondoai-widget | Conteneur racine (position, z-index) |
| .respondoai-launcher | Bouton flottant |
| .respondoai-chat | Fenêtre de chat |
| .respondoai-header | Barre d’en-tête du chat |
| .respondoai-messages | Conteneur de la liste des messages |
| .respondoai-message.user | Bulle de message utilisateur |
| .respondoai-message.assistant | Bulle de message du bot |
| .respondoai-input-area | Conteneur de la barre de saisie |
| .respondoai-input | Champ de saisie de texte |
| .respondoai-send | Bouton d’envoi |
| .respondoai-suggestion-btn | Boutons de questions rapides |
| .respondoai-announcement-cta-button | Bouton CTA dans une carte d’annonce |
| .respondoai-announcement-ctas | Conteneur autour des boutons CTA dans une carte d’annonce (mise en page cible) |