Personalização Visual

Personalize a aparência do widget para combinar com a identidade visual da sua marca. Configure cores, tipografia, posição e bordas — tudo pelo painel ou via JavaScript.

Configuração pelo painel

Acesse o painel de configuração

Configurações → Widget → Editar

Abra o widget desejado e role até a seção Aparência do widget.

Escolha a posição

Inferior-direito ou inferior-esquerdo

A posição define onde o botão e a janela de chat aparecerão no site do visitante.

Configure as cores

6 opções de cores personalizáveis

Cor primária — botão flutuante e mensagens enviadas
Cor secundária — links, hover e gradiente do header
Cor do cabeçalho — fundo do header (gradiente com secundária)
Cor de fundo — área de mensagens
Cor do texto — texto geral e labels
Cor das bolhas — bolhas de mensagem recebida

Defina tipografia e bordas

Fonte e arredondamento

Escolha entre 6 famílias tipográficas (System, Inter, Roboto, Open Sans, Poppins, Nunito) e 5 níveis de arredondamento (0px a 24px).

Use o preview de cores na parte inferior da seção de aparência para visualizar a paleta antes de salvar.

Personalização via JavaScript

Você pode sobrescrever as cores do painel diretamente no snippet de inicialização. Isso é útil para testes A/B ou sites com múltiplas marcas.

Exemplo: tema roxo

1window.WhatsAppWidgetSettings = {
2    position: "bottom-right",
3    theme: {
4        primaryColor: "#7C3AED",
5        secondaryColor: "#6D28D9",
6        headerColor: "#5B21B6",
7        backgroundColor: "#F5F3FF",
8        textColor: "#1E1B4B",
9        bubbleColor: "#EDE9FE",
10        borderRadius: "20px",
11        fontFamily: "Poppins, sans-serif"
12    }
13};

Prioridade de configuração

Configurações do painel são carregadas primeiro. Valores no WhatsAppWidgetSettings.theme sobrescrevem o painel. Apenas as propriedades informadas são alteradas — as demais mantêm o valor do painel.

Referência de propriedades

Propriedade	Tipo	Padrão	Descrição
`primaryColor`	hex	#25D366	Cor do botão flutuante, mensagens enviadas e botões de ação
`secondaryColor`	hex	#128C7E	Cor de links, hover do botão de envio e gradiente do header
`headerColor`	hex	#075E54	Cor de fundo do cabeçalho (aplica gradiente com secondaryColor)
`backgroundColor`	hex	#E5DDD5	Cor de fundo da área de mensagens
`textColor`	hex	#111827	Cor do texto geral, labels e títulos
`bubbleColor`	hex	#DCF8C6	Cor de fundo das bolhas de mensagem recebida
`borderRadius`	CSS	16px	Arredondamento da janela do chat (0px, 8px, 12px, 16px ou 24px)
`fontFamily`	CSS	system-ui	Família tipográfica usada em todo o widget

Animações e comportamento visual

O widget v3.0.0 inclui animações automáticas que não precisam de configuração:

Abertura/fechamento — a janela de chat desliza suavemente para cima ao abrir e para baixo ao fechar, com efeito de escala e opacidade
Pulse do botão — o botão flutuante pulsa 3 vezes após 3 segundos para atrair a atenção do visitante
Entrada de mensagens — novas mensagens aparecem com uma animação de fade-in suave
Scroll-to-bottom — um botão de rolagem aparece automaticamente quando o visitante rola para cima na conversa
Mobile full-screen — em telas menores que 480px, o chat ocupa a tela inteira com animação de slide vertical

Performance

Todas as animações usam transform e opacity para garantir performance em 60fps, mesmo em dispositivos mais antigos.

Boas práticas

Use cores com bom contraste — texto escuro sobre fundo claro ou vice-versa
Mantenha a cor primária alinhada com o CTA principal do site
Teste o widget em mobile e desktop após cada alteração
Use borderRadius menor (8px-12px) para sites corporativos e maior (20px-24px) para sites mais descontraídos
Prefira fontes sans-serif para melhor legibilidade em telas pequenas

Contraste insuficiente

Evite combinações como texto branco sobre fundo branco. Sempre verifique se as cores escolhidas são legíveis em diferentes condições de iluminação.