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