> ## 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.

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

***

## 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?`

### 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

***

> [!NOTE]
>
> 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.