Ir para o conteúdo

Branding & Media

Caminho: /dashboard/settings (aba Branding) · Permissão: Módulo Configurações

Personalize a identidade visual do seu assistente de IA para combinar com a sua marca. O branding aplica-se tanto ao dashboard quanto ao widget que seus usuários veem.

Branding Settings Branding Settings

Seu logo aparece no cabeçalho do dashboard e, opcionalmente, no widget.

Requisito Detalhes
Largura mínima 200px
Tamanho máximo de exibição Redimensionado automaticamente para 350px de largura
Formato recomendado PNG com fundo transparente
Método de upload Arrastar e soltar ou seletor de arquivos

Dicas:

  • Use um PNG transparente para um alinhamento limpo em fundos claros e escuros.
  • Faça o upload com o dobro do tamanho de exibição desejado para uma renderização nítida em telas retina.
  • Evite logos muito altos — formatos largos/horizontais funcionam melhor no cabeçalho.

Favicon

O favicon aparece nas abas do navegador e nos favoritos.

Requisito Detalhes
Tamanho mínimo 16x16 pixels
Processamento Recortado para quadrado, redimensionado para no máximo 48x48
Formato recomendado PNG ou SVG

Dicas:

  • Use um ícone, letra ou símbolo simples — imagens complexas tornam-se ilegíveis em tamanhos pequenos.
  • Se o seu logo for detalhado, crie uma versão simplificada do favicon (ex: apenas a primeira letra ou o símbolo).

Cores

Configuração O que controla Exemplo
Cor primária Cor principal do tema — cabeçalho do widget, botões, estados ativos, destaques da barra lateral #3b82f6 (azul), #10b981 (verde)
Cor secundária Cor de destaque — estados de hover (passar o mouse), links, botões secundários #6366f1 (índigo), #f59e0b (âmbar)

Insira os códigos hexadecimais de cor diretamente ou use o seletor de cores integrado. As alterações aparecem instantaneamente na pré-visualização do dashboard.

Dicas de cores

  • Combine com sua marca — Use a cor primária da sua empresa para manter a consistência entre seu site e o widget.
  • Garanta o contraste — Cores escuras funcionam melhor para cabeçalhos e botões. Evite cores muito claras que não serão legíveis em fundos brancos.
  • Teste no widget — Após alterar as cores, abra o widget em seu site para verificar a legibilidade e a consistência visual.

Tipografia

Escolha entre famílias de fontes premium. O seletor de fontes é sensível ao idioma (language-aware) — ele mostra automaticamente as fontes que suportam os conjuntos de caracteres dos idiomas habilitados.

Idioma Exemplos de fontes
Inglês / Latim Inter, Poppins, Open Sans, Roboto, Montserrat
Hebraico Heebo, Assistant, Rubik, Open Sans Hebrew
Árabe Cairo, Tajawal, IBM Plex Arabic
CJK Noto Sans CJK (selecionado automaticamente)

A fonte selecionada aplica-se tanto ao dashboard quanto ao widget, garantindo uma experiência de marca consistente para sua equipe e seus usuários.

Avatares do Widget

O avatar é a imagem de perfil que os usuários veem dentro do widget de chat. Ele define o tom da conversa — amigável, profissional ou institucional.

Opção Detalhes Ideal para
Galeria Escolha entre um conjunto selecionado de avatares pré-projetados com cards de pré-visualização grandes Configuração rápida, aparência profissional
Upload Envie sua própria imagem — recortada e otimizada automaticamente para PNG 100x100 Mascote da marca, foto da equipe, ícone personalizado
URL Cole a URL de uma imagem externa Avatares dinâmicos de um CDN (nota: depende da disponibilidade do host externo)

Dicas para o avatar

  • Use um rosto amigável ou ícone — Avatares com um rosto (humano ou ilustrado) aumentam o engajamento em 15–25%.
  • Combine com sua marca — Se você tem um mascote ou ícone da logo, use-o para reconhecimento imediato da marca.
  • Evite imagens com muito texto — Em 100x100 pixels, o texto torna-se ilegível.

CSS Personalizado

Para personalização avançada, adicione CSS personalizado que sobrescreve os estilos padrão do dashboard. Isso é útil para:

  • Combinar guias de estilo corporativos específicos além das cores primária/secundária.
  • Ajustar espaçamentos, bordas ou nuances de cores.
  • Ocultar ou reposicionar elementos da interface para implementações especializadas.

Exemplo: Estilo de botão personalizado

.btn-primary {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

Use com cuidado

Sobrescritas de CSS personalizado podem quebrar o layout do dashboard se os seletores mudarem durante atualizações. Mantenha as alterações mínimas, documente o que foi alterado e teste após cada atualização do sistema.

FAQ

P: Por que meu logo parece embaçado?

  • Faça o upload de uma imagem original maior (pelo menos o dobro do tamanho de exibição desejado) e deixe o sistema redimensioná-la. Uma imagem de 700px de largura ficará nítida em um tamanho de exibição de 350px.

P: Posso usar uma URL em vez de fazer o upload?

  • Sim, para logos e avatares. Mas URLs externas podem quebrar se o host mudar os caminhos ou ficar offline. Fazer o upload diretamente é mais confiável.

P: As mudanças de branding afetam o widget imediatamente?

  • Sim. As mudanças de branding (cores, logo, avatar) entram em vigor imediatamente para novas sessões do widget. Sessões abertas existentes podem precisar de uma atualização de página para ver as novidades.

P: O branding é por bot ou global?