> ## Documentation Index
> Fetch the complete documentation index at: https://docs.notifique.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizando o visual

> Cores, posição e textos do chat para combinar com o seu site.

Tudo isso você ajusta no painel, sem escrever código extra.

## Criar o widget

**Add-ons → Chat com IA → Novo widget**

1. **Nome:** só para você se organizar (ex.: "Chat site principal").
2. **Assistente:** quem responde as mensagens.
3. **Identificação:** pedir dados antes ou deixar livre.

Depois de salvar, copie o script e cole no site.

## Domínios permitidos

O chat só abre nos sites que você autorizar. Pense numa lista VIP na porta:

* `meusite.com.br` inclui também `www.meusite.com.br`
* `loja.meusite.com.br` vale só para esse subdomínio

<Warning>
  Se o domínio não estiver na lista, o chat **não aparece**. Coloque pelo menos o site principal.
</Warning>

## Cores e aparência

### Botão flutuante

| O que muda         | Para quê                           |
| ------------------ | ---------------------------------- |
| Cor do botão       | Fundo do ícone no canto            |
| Cor do ícone       | Desenho dentro do botão            |
| Imagem customizada | Logo ou ícone próprio              |
| Posição            | Canto inferior direito ou esquerdo |
| Distância da borda | Quão longe fica do canto           |

### Janela do chat

| O que muda          | Para quê                     |
| ------------------- | ---------------------------- |
| Cor de fundo        | Painel da conversa           |
| Cantos arredondados | Visual mais ou menos redondo |

### Cabeçalho

| O que muda    | Para quê                 |
| ------------- | ------------------------ |
| Título        | Nome que aparece no topo |
| Mostrar ícone | Sim ou não               |
| Cor do texto  | Cor do título            |

### Balões de mensagem

Visitante e assistente têm cores separadas: balão, texto, borda e arredondamento.

### Campo de digitação

Ajuste fundo, texto e estilo do campo e do botão enviar.

## Textos personalizados

| Configuração        | O que faz                        |
| ------------------- | -------------------------------- |
| Boas-vindas         | Primeira mensagem ao abrir       |
| Perguntas sugeridas | Até 12 botões com dúvidas comuns |
| Mostrar horário     | Hora em cada mensagem            |

<Tip>
  Boas perguntas sugeridas: "Qual o horário?", "Fazem entrega?", "Quais formas de pagamento?"
</Tip>

## Modo claro e escuro

* **Automático:** segue a preferência do visitante (recomendado)
* **Sempre claro** ou **sempre escuro**
* Cores separadas por modo no painel

## Comportamento

| Configuração          | Padrão | O que faz                      |
| --------------------- | ------ | ------------------------------ |
| Máximo de mensagens   | 50     | Limite por conversa            |
| Tempo entre mensagens | 1 s    | Evita spam                     |
| Inatividade           | 30 min | Nova conversa após pausa longa |

## Pré-visualização

Use o preview ao vivo no painel. Teste mensagens **antes** de publicar no site.

## Próximos passos

* [Segurança](/ai-web-widget/seguranca): identificação e OTP
* [Dicas](/ai-web-widget/boas-praticas): checklist antes de publicar
* [Chat com IA no site](/ai-web-widget/index)