Cores, fonte e tema

O widget adota a cor da sua marca, sua fonte e, se você quiser, um conjunto completo de cores próprias. Ao fazer isso, ele recalcula até que todos os textos continuem legíveis em todas as superfícies. Você escolhe a cor; o widget cuida do contraste.

Você encontra todas as configurações desta página em /app/projects/{id}, na aba Aparência, seção Marca. A exceção é o esquema de cores (claro, escuro, automático): fica na aba Instalação, em Dados básicos.

O assistente de design

No topo da seção Marca, um assistente conduz você pelo design em quatro etapas:

1. Visual — 18 modelos prontos, com filtros Claro, Escuro, Profissional, Divertido, Aconchegante, Frio e Minimalista. Entre eles estão, por exemplo, Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit e Espresso.
2. Cores — cor primária e destaque, seleção rápida entre oito pares de cores e escolha das superfícies: padrão, claras, escuras ou personalizadas.
3. Formato — estilo da janela, raio dos cantos, formato e tamanho do botão do chat.
4. Pronto — um resumo.

O assistente não salva nada por conta própria. Apenas preenche os campos abaixo; nada é salvo até você pressionar Salvar. A miniatura no assistente é um esboço. Você vê o widget real com seus valores na prévia da seção Tela inicial do widget.

Para ajustes finos, expanda Todas as configurações, uma a uma. Fonte e CSS personalizado só estão disponíveis ali.

Os campos

• Cor primária — a cor da sua marca como #rrggbb. Colore o botão do chat, o botão de envio, links, o foco e, em uma mistura, as bolhas dos visitantes. Sem um valor próprio: violeta #6D28D9 no tema claro, #9B7BFF no escuro.
• Destaque — uma segunda cor como #rrggbb, por exemplo para contadores e realces. Sem um valor próprio: #BE185D no claro, #FF6B8A no escuro.
• Raio dos cantos (px) — de 0 a 28. 0 significa cantos retos. Padrão: 12.
• Família de fontes (CSS) — um valor CSS como Inter, system-ui, sans-serif, com no máximo 120 caracteres. O widget não carrega arquivos de fonte. Use uma fonte que sua página já carrega ou uma fonte do sistema. Vazio significa as fontes do sistema do dispositivo.
• Modelos — um clique preenche cores, superfícies, raio, botão do chat e estilo de uma vez. Nada é salvo até você pressionar Salvar.

Só são válidas cores no formato #rrggbb com seis dígitos. Formas abreviadas como #f00 ou rgb(…) são descartadas, e o padrão se aplica no lugar delas.

Superfícies e texto

Em Superfícies e texto, você pode definir mais cinco cores, se necessário. Cada uma tem uma caixa de seleção cor personalizada:

• Fundo — a superfície da janela.
• Superfície das bolhas — as bolhas da equipe e do assistente.
• Texto — a cor do texto.
• Texto secundário — horários, avisos, segundas linhas.
• Linhas — divisórias e bordas.

Sem a seleção, o widget usa o conjunto de cores que combina com o site, claro ou escuro. O valor no campo é apenas um ponto de partida, não uma indicação do valor em uso. Com a seleção, vale a sua cor.

Se você definir apenas um fundo próprio, o widget deriva dele o restante: superfície das bolhas, texto, texto secundário e linhas.

Legibilidade: o que o widget recalcula

Os clientes escolhem a cor da marca, não uma cor legível. Por isso, o widget verifica cada combinação de texto e superfície para uma relação de contraste de pelo menos 4,5:1. Esse é o limite das WCAG 2.x para texto normal.

• O texto sobre a cor da marca (por exemplo no botão de envio) é definido automaticamente como branco ou quase preto, conforme o que for mais legível.
• Sua cor da marca como cor de texto (links, realces) é clareada ou escurecida em pequenos passos até atingir 4,5:1. As superfícies mantêm sua cor inalterada, ou seja, o botão do chat e o botão de envio.
• A bolha dos visitantes é uma mistura da cor da marca com o fundo. Se o contraste não for suficiente, o widget usa menos cor da marca nela.
• Suas cores próprias de texto e texto secundário passam pela mesma verificação, contra cada superfície em que aparecem.

O que foi recalculado aparece na conta logo abaixo do formulário, na linha Recalculado para que o texto continue legível. Por isso, um amarelo-claro como cor de texto aparece mais escuro no widget do que o valor que você inseriu, e ali você vê o motivo.

Na sua página, você também pode consultar os valores medidos:

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Claro, escuro ou como o site

Em Instalação → Dados básicos → Esquema de cores do widget, escolha:

• igual ao site (senão, o sistema do visitante) — padrão. O widget verifica se a página é clara ou escura e se adapta.
• claro — sempre claro.
• escuro — sempre escuro.

Na escolha automática, o widget considera, nesta ordem:

1. a cor de fundo da página no meio da tela,
2. o valor CSS color-scheme em <html>, se for exatamente dark ou light,
3. seletores comuns em <html> ou <body>, como a classe dark ou data-theme="dark",
4. por fim, a configuração do sistema do visitante.

Se sua página alterna entre claro e escuro, o widget acompanha. Ele também verifica novamente quando a janela é aberta.

No código, você define o tema no código de incorporação ou durante a execução. Isso tem prioridade sobre a configuração da conta:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

Com setTheme, o widget lembra a escolha no navegador do visitante. setTheme('auto') a remove novamente. Isso se encaixa em um seletor claro/escuro próprio na página.

Definir cores no código

Para páginas individuais, como uma campanha, você pode definir a marca no código de incorporação ou durante a execução. Os nomes dos campos são:

• primary, accent — cor da marca e destaque,
• bg, surface, text, textDim, line — as cinco superfícies,
• onPrimary — cor do texto sobre a cor da marca (automática caso contrário),
• radius — de 0 a 28,
• font — valor CSS da fonte,
• launcher e stil — veja O botão do chat e Janela do chat.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand recalcula imediatamente o contraste e as cores derivadas, sem reconstruir o widget. null remove um valor, e o padrão volta a se aplicar.

No código de incorporação, o atributo se chama data-rc-brand e recebe JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Importante — o que prevalece, código de incorporação ou conta? O código gerado pela conta já contém a cor da marca, o raio e o formato e tamanho do botão do chat. Esse é apenas o estado inicial, para que o botão apareça logo na cor certa. Assim que o widget recebe as configurações do servidor, a conta se aplica por completo.

No entanto, se você escrever qualquer campo adicional em data-rc-brand, por exemplo accent, stil ou um rótulo, a marca no código passa a contar como a marca própria dessa página. Ela então prevalece sobre a conta. Da conta, apenas a exibição “Somente pelos seus próprios links” continua valendo nessa página. Além disso, a página não participa de testes A/B.

Se você mudar a cor da marca na conta, copie novamente o código de incorporação em Instalação. Caso contrário, a cor antiga aparece por um instante durante o carregamento da página.

Como funciona o código de incorporação e quais outras formas existem (window.ReactiveChatSettings, ReactiveChat('boot', …)) está descrito em Integração técnica.

CSS personalizado

Em Todas as configurações, uma a uma → CSS personalizado, escreva CSS que é aplicado por último, depois de todas as outras regras.

• No máximo 20.000 caracteres.
• @import é removido tanto ao salvar quanto no widget.
• O CSS só tem efeito dentro do widget. Ele funciona em uma área isolada (shadow DOM) e não pode alterar sua página. Da mesma forma, o CSS da página não alcança o widget. Esse é o lugar certo para ele.
• Depois disso, o widget volta a impor duas regras: o indicador de foco visível para quem usa teclado e o botão de fechar no cabeçalho. Remover visualmente a saída do chat cria uma armadilha para quem usa teclado.
• Os nomes internos das classes do widget não são uma interface garantida. Verifique seu CSS na prévia após alterações.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

No código, o mesmo funciona com customCss, por exemplo em ReactiveChat('boot', { customCss: '…' }) ou como atributo data-rc-custom-css.

Logo no cabeçalho da janela

O mais simples é inserir o logo na conta: Projeto → Aparência → Marca, campo Logo (endereço). Ele aparece no cabeçalho da janela do chat em até um minuto após salvar.

No código, logo também permite definir altura, texto alternativo e posição, por exemplo o logo no botão do chat. Um logo definido no código tem prioridade sobre o campo da conta:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

• src — um endereço com https:// ou uma imagem como data:image/…. Um SVG pequeno como endereço data: economiza uma requisição.
• alt — texto alternativo.
• height — altura em pixels, de 12 a 40, padrão 20.
• placement — header (cabeçalho, padrão), launcher (no botão do chat) ou both.

Já o logo da tela inicial pode ser definido facilmente na conta; veja A tela inicial do chat.

Se algo parecer diferente do esperado

• A cor está mais escura ou mais clara que a inserida: é a proteção de contraste. A linha Recalculado abaixo do formulário indica o que foi ajustado.
• As alterações na conta não chegam: seu código de incorporação contém um data-rc-brand com campos adicionais? Nesse caso, o código prevalece. Além disso, pode levar até um minuto após salvar.
• Uma cor diferente aparece por um instante ao carregar: copie novamente o código após mudar a cor.
• A fonte não tem efeito: sua página carrega a fonte? O widget não carrega arquivos de fonte.