Personalização do Widget
Faça com que o widget de chat combine com sua marca e funcione exatamente como você deseja. Toda a personalização acontece no seu painel — as alterações são aplicadas ao seu site automaticamente, sem tocar no código de embed.
Você encontrará as configurações em Dashboard → Chatbots → selecione seu chatbot:
- A aba Widget controla a aparência (posição, cores, tamanho, textos)
- A aba Behavior controla como o widget interage com os visitantes
Clique em Save Changes no topo da página para aplicar suas edições.
Aba Widget: Aparência
Posição
Escolha onde o widget aparece no seu site:
| Position | Description |
|---|---|
| Bottom Right | Bolha de chat flutuante no canto inferior direito (padrão) |
| Bottom Left | Bolha de chat flutuante no canto inferior esquerdo |
| Inline (Embedded) | O widget é incorporado diretamente na página em vez de flutuar |
Com a posição Inline, o chat é incorporado no local onde o script de embed é colocado e fica sempre aberto — sem bolha, sem botão de fechar. Ideal para páginas dedicadas de chat ou suporte. Veja Widget Embedding para mais detalhes.
Tema de Cores
Escolha um dos três predefinidos de cor:
| Preset | Description |
|---|---|
| Default | O esquema de cores padrão do ChatReact |
| Brand | As cores da sua empresa nas Company Settings |
| Custom | Escolha suas próprias cores |
O predefinido Brand fica disponível somente depois que as cores da marca forem definidas. Vá para suas Company Settings para extrair as cores do seu site.
Com Custom selecionado, você pode definir quatro cores base:
- Primary — bolha, gradiente do cabeçalho, botões e mensagens do visitante
- Secondary — segunda cor do gradiente do cabeçalho
- Background — fundo da janela de chat
- Text — cor do texto das mensagens
Configurações Avançadas de Cor
Precisa de mais controle? Com o predefinido Custom selecionado, expanda Advanced Color Settings para substituir as cores calculadas automaticamente:
- Visitor Messages — cor de fundo e do texto das bolhas de mensagem do visitante
- Bot Messages — cor de fundo e do texto das bolhas de mensagem do bot
- Header Text Color — cor do título e subtítulo no cabeçalho do widget
Tudo o que você deixar sem alteração é calculado automaticamente para garantir bom contraste. Cada substituição tem um botão Reset to automatic para retornar à cor calculada.
Tamanho & Estilo
| Setting | Range | Default |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
Em telas móveis pequenas o widget alterna automaticamente para um layout de largura total, independentemente dessas dimensões.
Logo
Ative Use company logo in widget header para mostrar o logo da sua empresa no cabeçalho do chat. O logo em si é enviado nas Company Settings — recomendado: quadrado, pelo menos 200×200 px (JPG, PNG, GIF, WebP ou SVG, máx. 5 MB).
Esta opção está disponível no plano Professional e superiores, e em todos os planos Agency.
Título do Cabeçalho, Subtítulo & Texto da Bolha
| Field | Description | Default |
|---|---|---|
| Header Title | Título exibido no cabeçalho da janela de chat | "Chat with us" |
| Header Subtitle | Linha menor abaixo do título | "We typically reply within minutes" |
| Bubble Text | Texto exibido ao lado da bolha de chat quando o widget está fechado | None |
Se você nunca definir um título ou subtítulo, o widget exibirá o texto padrão — automaticamente localizado para o idioma de cada visitante.
Como funciona o subtítulo do cabeçalho: Enquanto você não configurar um subtítulo, o widget mostra o padrão localizado, e o formulário de configurações pré-preenche esse padrão para que você possa ver e editar o que os visitantes recebem. Para ocultar completamente o subtítulo, limpe o campo e salve — um subtítulo intencionalmente esvaziado permanecerá oculto.
O texto da bolha aparece como um pequeno rótulo ao lado da bolha de chat fechada (por exemplo, "Got questions?"). Deixe em branco para mostrar apenas a bolha redonda.
Traduções do Widget
Se o seu chatbot suporta múltiplos idiomas, um cartão Widget Translations aparece abaixo das configurações de aparência. Lá você pode traduzir a mensagem de boas-vindas, mensagem de fallback, título do cabeçalho, subtítulo do cabeçalho e texto da bolha para cada idioma habilitado.
As mensagens de boas-vindas e de fallback em si são configuradas na aba Persona das configurações do seu chatbot.
Pré-visualização ao Vivo
A coluna direita da aba Widget mostra uma Live Preview do seu widget que é atualizada conforme você altera as configurações. Ela é interativa: feche a janela de chat com o X para ver a bolha fechada (incluindo seu texto da bolha), e clique na bolha para abri-la novamente.
Aba Behavior: Interação
Configurações de Comportamento
| Setting | Description | Default |
|---|---|---|
| Proactive Greeting | O bot cumprimenta automaticamente os visitantes após um atraso (1–10 segundos) | On, 3 s |
| Auto-Open | O widget abre automaticamente para os visitantes após um atraso (1–15 segundos) | Off, 5 s |
| Sound Enabled | Reproduzir sons para notificações | On |
| Typing Indicator | Mostrar uma animação enquanto o bot está digitando | On |
| Pre-Chat Form | Capturar informações do visitante antes do início do chat | Off |
| Show on Mobile | Exibir o widget em dispositivos móveis | On |
Comprimento Máximo da Mensagem
Limite quantos caracteres os visitantes podem digitar por mensagem (100–10.000 caracteres, padrão 2.000). Isso ajuda a evitar uso excessivo por entradas muito longas. Limpe o campo ou clique em Remove limit para permitir mensagens de qualquer tamanho.
Formulário Pré-Chat
Quando o formulário pré-chat estiver habilitado, os visitantes preenchem um pequeno formulário antes da conversa começar. Você configura os campos:
- Tipos de campo: Text, Email, Phone, Textarea
- Cada campo tem um label, um placeholder opcional e um alternador required
- Reordene os campos com os botões mover para cima/baixo, ou remova-os
Se seu chatbot suporta múltiplos idiomas, uma seção de traduções aparece abaixo do editor de campos. Insira traduções para cada idioma manualmente, ou clique em Translate with AI para traduzir todos os rótulos e placeholders automaticamente.
Live Chat
A aba Behavior também contém o cartão Live Chat Settings. Habilite o live chat para permitir que os visitantes conversem com seus agentes humanos, e escolha um modo:
| Mode | Description |
|---|---|
| Handoff Only | Live chat apenas quando o bot não consegue ajudar |
| Standalone | Visitantes podem conversar diretamente com agentes |
| Both | Handoff e chat direto estão disponíveis |
Live Chat está disponível no plano Professional e superiores, e em todos os planos Agency. Veja Live Chat sobre como gerenciar conversas recebidas.
Branding
Em planos que incluem white-label, um cartão Branding aparece no final da aba Behavior. O branding do ChatReact fica oculto por padrão nesses planos — ative Show "Powered by ChatReact" se desejar exibi-lo no rodapé do widget mesmo assim.
Fase de Aprendizado
Enquanto um novo chatbot estiver em sua fase de aprendizado, você pode controlar o quão cautelosamente ele responde — Cautious, Balanced (recomendado) ou Confident — na aba Confidence da mesma página de configurações. Esta aba aparece em planos que incluem o Improvement Agent. Veja o guia Improvement Agent para mais detalhes.