Estilos y personalización del widget
Controla la apariencia del widget mediante las opciones de init o la interfaz del panel.
Presets de tamaño#
Elige entre tres presets de tamaño integrados mediante chatSize y launcherSize:
| chatSize | Ventana de chat |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize controla el botón flotante de forma independiente de chatSize:
| launcherSize | Launcher | Icono |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // ventana de chat más ancha y alta
launcherSize: 'small' // botón flotante más pequeño
});Posicionamiento#
Ajusta con precisión la posición del widget con offsetBottom y offsetSide (en píxeles). Combinado con position (bottom-right o bottom-left), esto da control total sobre la colocación.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px desde abajo (por defecto: 20)
offsetSide: 30 // 30px desde el borde izquierdo (por defecto: 20)
});Radio de borde y z-index#
borderRadius controla el redondeo de las esquinas de la ventana de chat (por defecto: 20px).zIndex establece el orden de apilamiento (por defecto: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // esquinas más rectas
zIndex: 100000 // z-index más bajo para evitar conflictos
});CSS personalizado#
Para estilos avanzados más allá de las opciones integradas, pasa una cadena customCSS. Se inyecta en el Shadow DOM del widget — puede sobrescribir cualquier estilo del widget pero no puede afectar a tu página.
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;
}
/* Estiliza el botón CTA dentro de las tarjetas de anuncio */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Coloca los botones CTA del anuncio en una fila en vez del apilado por defecto */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Clases CSS disponibles:
| Clase | Elemento |
|---|---|
| .respondoai-widget | Contenedor raíz (posición, z-index) |
| .respondoai-launcher | Botón flotante |
| .respondoai-chat | Ventana de chat |
| .respondoai-header | Barra de cabecera del chat |
| .respondoai-messages | Contenedor de la lista de mensajes |
| .respondoai-message.user | Burbuja de mensaje del usuario |
| .respondoai-message.assistant | Burbuja de mensaje del bot |
| .respondoai-input-area | Contenedor de la barra de entrada |
| .respondoai-input | Campo de entrada de texto |
| .respondoai-send | Botón de enviar |
| .respondoai-suggestion-btn | Botones de preguntas rápidas |
| .respondoai-announcement-cta-button | Botón CTA dentro de una tarjeta de anuncio |
| .respondoai-announcement-ctas | Contenedor alrededor de los botones CTA en una tarjeta de anuncio (layout objetivo) |