Janela do chat: estilo, tamanho, painel lateral e visualização no celular

As cores definem a personalidade; o formato faz o restante. Em /app/projects/{id}, na aba Aparência, seção Marca, há dois grupos de controles: Estilo (formato, não cor) e Janela (como a janela aberta aparece). Se você não escolher nada, tudo fica no padrão. Salve com Salvar; a prévia em Tela inicial do widget mostra o widget real.

Os modelos do assistente de design definem esses controles ao mesmo tempo.

Estilo

• Cabeçalho — degradê (padrão), plano ou vidro. Vale para o cabeçalho da tela inicial e a barra de título.
• Densidade — normal (padrão), compacto ou arejado. Espaçamento na tela inicial e na conversa.
• Bolhas — suave (padrão, segue o raio dos cantos), redondo (18 px) ou quadrado (4 px).
• Sombra — suave (padrão), forte ou nenhuma. Vale para a janela, não para o botão do chat.
• Avatar — redondo (padrão) ou quadrado.
• Campo de entrada — plano (padrão) ou pílula (bem arredondado, com botões redondos).
• Cards — com contorno (padrão) ou plano. Vale para blocos da tela inicial, linhas da ajuda e cards na conversa.

Janela

• Tamanho da janela — normal (padrão, 380 px de largura), largo (440 px), estreito (340 px) ou alto (quase toda a altura da tela, no máximo 960 px). A altura normal é 620 px, menor em telas pequenas.
• Layout — janela flutuante (padrão) ou painel lateral. O painel lateral ocupa toda a altura na borda, do lado do botão do chat, e desliza a partir dali. O botão recua enquanto ele está aberto. O painel é fechado pelo botão no cabeçalho.
• Fundo — o fundo da área de mensagens: simples (padrão), pontos, grade ou degradê (um toque da cor da marca).
• Tamanho do texto — normal (padrão, 14 px), grande (15,5 px) ou pequeno (13 px). Vale para bolhas e entrada, não para o botão do chat.
• Animação de abertura — deslizar (padrão), ampliar, aparecer gradualmente ou nenhuma. Se o visitante tiver definido “reduzir movimento” no sistema, a animação é desativada de qualquer forma.
• Bolha do visitante — a cor das bolhas dos visitantes: cor primária (padrão, uma mistura clara da cor da marca), cor de destaque ou neutro (cinza). Aqui também o widget recalcula o texto até ficar legível.

Tamanho da janela e layout só têm efeito a partir de 481 px de largura da tela. Abaixo disso, o chat sempre abre em tela cheia (veja abaixo).

No código

Todos os controles ficam na marca, em stil. Os valores são os nomes internos:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Um valor desconhecido retorna ao padrão.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

No código de incorporação, como data-rc-brand='{"stil":{"ansicht":"seite"}}', a marca conta como própria desta página e prevalece sobre a conta; veja Cores, fonte e tema.

Movimento

Com data-rc-motion no código de incorporação, você controla as animações: auto (padrão, segue o sistema do visitante), reduced (sem movimento) ou full.

data-rc-motion="reduced"

Cabeçalho

O cabeçalho mostra quem está respondendo:

• Se alguém da equipe está escrevendo, mostra o nome de exibição dessa pessoa. Cada membro o mantém nas configurações pessoais; veja Equipe, console e notificações.
• Se o assistente de IA responde, mostra o nome definido em IA e conhecimento → Assistente (padrão “Ada”); veja Assistente de IA.
• Caso contrário, o título “Chat”. Você altera esse título e a segunda linha (“Estamos aqui”, “Assistente de IA”) em Textos e idiomas, com as chaves header.title, header.subtitle_online e header.subtitle_bot.

Os avatares mostram a primeira letra do nome e o símbolo ✦ para o assistente. No momento, não é possível armazenar fotos próprias dos membros da equipe.

O cabeçalho também tem um ícone de envelope que permite aos visitantes receber a conversa por e-mail. Você o desativa em Regras e atendimento → Transcrição da conversa por e-mail; veja Disponibilidade, formulários e atendimento.

O aviso “Powered by reactive.chat”

No plano gratuito, “Powered by reactive.chat” aparece na parte inferior da janela. A partir de um plano pago, você decide em Aparência → reactive.chat dentro do chat, com o controle Ocultar “Powered by reactive.chat”. O padrão passa a ser oculto. O texto do aviso não pode ser alterado.

No celular

Até 480 px de largura e em dispositivos na horizontal com até 480 px de altura, o chat abre em tela cheia: sem cantos, em toda a altura visível, mesmo com o teclado na tela aberto. O campo de entrada usa texto de 16 px para o telefone não ampliar, e os botões têm pelo menos 44 px. O botão do chat recua enquanto a janela está aberta.

Tamanho da janela e painel lateral não se aplicam no celular. Os outros controles de estilo, cores e tamanho do texto se aplicam. Você define o tamanho do botão no celular em O botão do chat.