Tema e Aparência
A página de Tema é onde você dá ao seu assistente sua identidade visual — nome, avatar, cores da marca — e escolhe os canais onde ele atuará. Tudo é visualizado ao vivo na própria página, permitindo que você itere sem sair do painel.
Faça seu agente de IA PARECER alinhado à marca · Tema + widget GDPR
→ Caminho do Admin: Personalização → Tema (/admin/chatModel/{id}/settings/theme)
O que você configura
A página está organizada em três etapas. Você pode avançar e voltar a qualquer momento; as alterações na etapa 2 são salvas quando você clica em Salvar e Avançar.
Etapa 1 — Identidade
- Nome — o nome público do seu assistente (ex.: "Emma", "Bot de Suporte"). Visível em todos os lugares onde seu assistente interage com os usuários.
- Avatar — a imagem que os usuários veem no cabeçalho do chat e nas bolhas de mensagem. Faça o upload de uma imagem quadrada; nós redimensionamos e servimos a partir do nosso CDN.
O nome é como seus usuários se referem ao bot. Escolha algo que esteja alinhado à marca e seja fácil de digitar — ele se torna a identidade do assistente em todos os canais.
Etapa 2 — Cores
Duas cores definem toda a paleta do widget:
| Cor | Onde aparece |
|---|---|
Primária (brand.200) | Fundo do botão flutuante, acentos das bolhas de mensagem, estados de hover |
Secundária (brand.500) | Botão de enviar, links dentro da conversa, anéis de foco, estados ativos |
Ambos os campos aceitam qualquer valor HEX. A visualização ao vivo na parte inferior da página reflete suas alterações em tempo real, para que você possa escolher um par que funcione bem em seu site antes de salvar.
Por que apenas duas cores? Nosso sistema de design deriva uma paleta completa de 5 etapas (100/200/500/700/900) a partir desses dois pontos de ancoragem. Você define o tom; nós mantemos o restante consistente.
Etapa 3 — Integrar
Uma vez que seu assistente esteja com a aparência certa, vá diretamente para o canal de integração de sua escolha:
- Web Widget — código de incorporação para qualquer site, com controle total sobre o botão e layout
- WordPress — injeção automática via o plugin do WordPress
- PrestaShop — injeção automática via o módulo do PrestaShop
- Shopify — conecte sua loja e injetar o chatbot automaticamente
- Joomla — injeção automática via o plugin do Joomla
Cada cartão leva você à página de integração dedicada, onde você ajusta o estilo do botão, posição, modo de feedback, recursos de voz e comportamento específico do canal.
Visualização ao vivo
Um widget de chat ao vivo é renderizado na própria página de Tema. Ele se reinjeta automaticamente sempre que você muda uma cor, para que você veja a renderização exata que seus usuários finais receberão — sem necessidade de publicar ou abrir outra aba.
A visualização utiliza o mesmo pacote universal-chatbot.js que a produção, então o que você vê é o que seus visitantes verão.
Permissões
| Ação | Permissão necessária |
|---|---|
| Visualizar a página de Tema | THEME_READ |
| Mudar cores / salvar tema | THEME_UPDATE |
| Renomear o assistente | CHAT_MODEL_UPDATE |
Membros sem THEME_UPDATE veem a página em modo somente leitura (campos desativados, sem botão Salvar). Veja Controle de Acesso para saber como atribuir essas permissões.
Dicas
- Teste no seu fundo real. Abra seu site em uma segunda aba enquanto escolhe as cores — o que parece bom no painel pode conflitar com sua seção principal.
- Mantenha o contraste. A cor secundária também é usada para texto clicável na conversa. Se os usuários não conseguirem ler, não clicarão.
- Combine seu CTA, não seu logo. O widget é uma superfície interativa, então ancore-o à cor de ação do seu site (o tom de "Comprar agora" / "Inscrever-se") em vez da cor do seu logo.
- O avatar importa mais do que você pensa. Um rosto real ou um personagem estilizado converte melhor do que um ícone de robô genérico — os usuários abrem o chat mais quando parece humano.
Relacionados
- Biografia — defina a personalidade e as regras de decisão do seu assistente
- Integrando o Chatbot — incorpore-o em um site
- Canais — conecte plataformas de mensagens
- Controle de Acesso — gerencie quem pode editar o tema