Estilização e personalização do widget
Controle a aparência do widget pelas opções de init ou pela interface do dashboard.
Predefinições de tamanho#
Escolha entre três predefinições de tamanho integradas através de chatSize e launcherSize:
| chatSize | Janela de chat |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize controla o botão flutuante de forma independente de chatSize:
| launcherSize | Launcher | Ícone |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // janela de chat mais larga e mais alta
launcherSize: 'small' // botão flutuante mais pequeno
});Posicionamento#
Ajuste com precisão a posição do widget com offsetBottom e offsetSide (em pixels). Combinado com position (bottom-right ou bottom-left), isso dá controle total sobre o posicionamento.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px a partir do fundo (predefinição: 20)
offsetSide: 30 // 30px a partir da margem esquerda (predefinição: 20)
});Raio de borda e Z-Index#
borderRadius controla o arredondamento dos cantos da janela de chat (predefinição: 20px).zIndex define a ordem de empilhamento (predefinição: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // cantos mais retos
zIndex: 100000 // z-index mais baixo para evitar conflitos
});CSS personalizado#
Para estilização avançada além das opções integradas, passe uma string customCSS. É injetada no Shadow DOM do widget — pode substituir qualquer estilo do widget, mas não pode afetar a sua 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;
}
/* Estilizar o botão de CTA dentro dos cartões de anúncio */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Dispor os botões de CTA de anúncio em uma linha em vez da pilha padrão */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Classes CSS disponíveis:
| Classe | Elemento |
|---|---|
| .respondoai-widget | Contentor raiz (posição, z-index) |
| .respondoai-launcher | Botão flutuante |
| .respondoai-chat | Janela de chat |
| .respondoai-header | Barra de cabeçalho do chat |
| .respondoai-messages | Contentor da lista de mensagens |
| .respondoai-message.user | Balão de mensagem do usuário |
| .respondoai-message.assistant | Balão de mensagem do bot |
| .respondoai-input-area | Contentor da barra de entrada |
| .respondoai-input | Campo de entrada de texto |
| .respondoai-send | Botão de envio |
| .respondoai-suggestion-btn | Botões de perguntas rápidas |
| .respondoai-announcement-cta-button | Botão de CTA dentro de um cartão de anúncio |
| .respondoai-announcement-ctas | Wrapper em volta dos botões de CTA em um cartão de anúncio (layout a definir) |