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

# Personalizar o Widget

> Configure a home page, aparência visual e botão flutuante do seu widget de Live Chat.

# Personalizar o Widget

Cada widget tem uma **Home Page** (tela inicial) e um conjunto de configurações visuais na aba **Aparência**. Acesse em **Apps → Live Chat → editar widget**.

***

## Home Page

A Home Page é a primeira tela que o visitante vê ao abrir o widget, antes de iniciar uma conversa.

### Título e Subtítulo

Configure a mensagem de boas-vindas exibida no topo. O tamanho é ajustável: **pequeno**, **médio** ou **grande**.

<Tip>
  Use a variável `{nome}` no título para personalizar com o nome do visitante após a coleta de dados. Exemplo: `Olá, {nome}! Como posso ajudar?`
</Tip>

### Avatares da Equipe

Adicione até **4 fotos** da equipe que aparecem no topo da home page. Transmitem confiança e humanizam o atendimento.

### Botões de Ação

Adicione até **4 botões** na home page. Cada botão pode ser de um tipo diferente:

| Tipo       | Descrição                                                              |
| ---------- | ---------------------------------------------------------------------- |
| **Link**   | Redireciona para uma URL externa                                       |
| **Ação**   | Inicia o chat diretamente                                              |
| **Banner** | Exibe uma imagem de destaque                                           |
| **Embed**  | Incorpora conteúdo do YouTube ou Spotify                               |
| **Texto**  | Exibe um bloco de texto estático (tamanho e alinhamento configuráveis) |

### CTA Principal

O botão principal abaixo dos botões de ação (ex: "Enviar uma mensagem") inicia a conversa. Você pode personalizar o texto e a cor.

***

## Aparência

A aba **Aparência** controla todo o visual do widget. As cores são organizadas por camada:

### Cores por Camada

| Camada     | Configurações                                               |
| ---------- | ----------------------------------------------------------- |
| **Geral**  | Cor primária, cor secundária, cor da borda                  |
| **Header** | Cor de fundo, cor do texto                                  |
| **Body**   | Cor de fundo, cor do texto                                  |
| **Footer** | Cor de fundo, cor do texto                                  |
| **Balões** | Cor e texto do balão recebido, cor e texto do balão enviado |

### Imagem de Fundo do Header

Faça upload de uma imagem de fundo para o header. Ajuste a **opacidade do overlay** (0% a 100%) para garantir legibilidade do texto sobre a imagem.

### Logo

Configure a logo exibida no header do widget:

* **Upload** — envie uma imagem ou cole uma URL
* **Formato** — Redonda, Quadrada ou Livre
* **Tamanho** — Pequeno, Médio ou Grande

### Botão Flutuante

O botão que aparece no canto da página do visitante:

| Configuração | Opções                                                                         |
| ------------ | ------------------------------------------------------------------------------ |
| **Posição**  | Inferior direito ou Inferior esquerdo                                          |
| **Estilo**   | Círculo, Pílula ou Quadrado                                                    |
| **Texto**    | Texto opcional exibido ao lado do ícone (apenas nos estilos pílula e quadrado) |

### Estilo dos Campos

Defina o visual dos campos de input do chat:

* **Arredondado** — cantos levemente arredondados
* **Pílula** — cantos totalmente arredondados
* **Quadrado** — sem arredondamento

***

<Info>
  As alterações de aparência são aplicadas em tempo real na pré-visualização. Clique em **Salvar** para publicar as mudanças no widget ao vivo.
</Info>