O visual do widget é controlado em camadas: tema (claro/escuro) → preset (paleta pronta) → tokens (personalização fina via config ou CSS).
A opção theme define o esquema de cores base:
"auto" (padrão) — segue o tema do sistema operacional do visitante (prefers-color-scheme) e troca automaticamente."light" — sempre claro."dark" — sempre escuro.RagionWidget.init({ apiKey: "rg_xxx", theme: "dark" });Presets são paletas completas e prontas. Quando definido, o preset tem prioridade sobre o tema:
| Preset | Estilo |
|---|---|
| minimal-dark | Escuro e minimalista, com acento verde suave — ideal para sites dark |
| minimal-light | Claro e neutro, com acento verde escuro — ideal para sites claros |
| warm-neutral | Tons quentes de bege e marrom — para marcas com identidade acolhedora |
RagionWidget.init({ apiKey: "rg_xxx", preset: "warm-neutral" });appearancePara ajustar cores e estilos individualmente, use o objeto appearance na configuração. Qualquer token pode ser combinado com um preset — o token vence:
RagionWidget.init({
apiKey: "rg_xxx",
preset: "minimal-light",
appearance: {
accentColor: "#7c3aed",
accentTextColor: "#ffffff",
radius: 18,
fontFamily: "Inter, sans-serif",
userBubbleBackground: "#7c3aed",
userBubbleTextColor: "#ffffff",
},
});Todos os tokens também são CSS variables no elemento ragion-widget. Personalize direto no CSS do seu site, sem tocar na configuração JavaScript:
ragion-widget {
--ragion-accent: #7c3aed;
--ragion-accent-text: #ffffff;
--ragion-radius: 18px;
--ragion-panel-width: 420px;
--ragion-font-family: "Inter", sans-serif;
}config.appearance(inline) > CSS da página > preset > padrão.| CSS variable | appearance.* | Descrição |
|---|---|---|
| --ragion-accent | accentColor | Cor de destaque (botão, foco) |
| --ragion-accent-text | accentTextColor | Texto sobre a cor de destaque |
| --ragion-panel-bg | panelBackground | Fundo do painel |
| --ragion-surface-bg | surfaceBackground | Fundo da área de mensagens |
| --ragion-header-bg | headerBackground | Fundo do header |
| --ragion-border | borderColor | Bordas |
| --ragion-text | textColor | Texto principal |
| --ragion-muted-text | mutedTextColor | Texto secundário |
| --ragion-user-bubble-bg | userBubbleBackground | Fundo da bolha do usuário |
| --ragion-user-bubble-text | userBubbleTextColor | Texto da bolha do usuário |
| --ragion-assistant-bubble-bg | assistantBubbleBackground | Fundo da bolha do assistente |
| --ragion-assistant-bubble-text | assistantBubbleTextColor | Texto da bolha do assistente |
| --ragion-input-bg | inputBackground | Fundo do campo de texto |
| --ragion-code-bg | codeBackground | Fundo de blocos de código |
| --ragion-error-bg / --ragion-error-text | errorBackground / errorTextColor | Banner de erro |
| --ragion-radius | radius | Raio de borda do painel e bolhas |
| --ragion-button-radius | buttonRadius | Raio do botão flutuante |
| --ragion-font-family | fontFamily | Fonte do widget |
| --ragion-shadow | shadow | Sombra do painel |
| --ragion-button-size | layout.buttonSize | Tamanho do botão |
| --ragion-panel-width / --ragion-panel-height | layout.panelWidth / panelHeight | Dimensões do painel |
| --ragion-offset | — | Distância da borda da tela (padrão 20px) |
| --ragion-z | zIndex | z-index do widget |
RagionWidget.init({
apiKey: "rg_xxx",
position: "bottom-left", // bottom-right | bottom-left | top-right | top-left
zIndex: 999999,
layout: {
buttonSize: 60, // botão flutuante (px)
panelWidth: 420, // largura do painel (px)
panelHeight: 640, // altura do painel (px)
fullscreenOnMobile: true // tela cheia em telas pequenas
},
});