Visual

O que é

A aba Visual define a aparência do chat do agente no site e no link público: a foto, o nome, as cores, a fonte, os idiomas e as mensagens que o cliente vê ao abrir o chat.

O visual vale só para o chat web

Foto, cores, fonte e balão de fala aparecem só no chat do seu site e no link público. No WhatsApp e no Telegram, o chat segue o visual do próprio aplicativo. A exceção é a primeira mensagem: no WhatsApp Business ela também é enviada quando um cliente novo começa a conversa.

Os exemplos deste guia usam a Duda, agente da loja fictícia Passo Certo Calçados, apresentada no guia Personalidade.

1. Quando usar

• Para deixar o chat com as cores e a cara da sua marca;
• Para trocar a foto do agente;
• Para atender clientes em inglês ou espanhol;
• Para escrever a mensagem do balão que convida o visitante a abrir o chat.

2. Onde encontrar

1. Entre no projeto e clique em Robôs Agentes de IA no menu lateral.
2. Na Listagem de Chatbots, clique no agente.
3. Clique na aba Visual.

A tela tem três partes: a prévia do chat em Visual para sites, o formulário com os blocos Avatar, Aparência e Mensagens, e uma coluna com modelos prontos.

💡 Dica: a prévia muda enquanto você edita. Use-a para conferir cada ajuste antes de salvar.

3. Avatar

O bloco Avatar reúne a foto, o nome e o estilo da imagem do agente.

Foto

A imagem do agente, mostrada no chat. Clique em Mudar foto para escolher ou enviar uma imagem.

Como escolher: prefira uma imagem quadrada, com o rosto ou o símbolo no centro. Imagens com muito detalhe ficam difíceis de ver no tamanho pequeno do chat.

Exemplo da Duda: uma ilustração da Duda segurando um tênis, sobre fundo liso.

Nome do robô?

O nome do agente. É o mesmo campo Nome do robô da aba Personalidade: mudar aqui muda lá também.

Limite: 45 caracteres.

Estilo do avatar

Logo abaixo da foto, você escolhe como ela é recortada e enfeitada:

• Formato do avatar: Arredondado, Círculo ou Squircle, um meio-termo entre quadrado e círculo;
• Moldura do avatar: Nenhuma, Anel, Gradiente, Brilho, Adesivo ou Cartão;
• Cor da moldura: a cor da moldura escolhida. Marque Usar cor principal (color 1) para ela acompanhar a primeira cor do chat;
• Fundo do avatar: Nenhum, Sólido ou Gradiente. Faz diferença quando a imagem tem fundo transparente;
• Cor do fundo: a cor do fundo escolhido. Marque Usar cor secundária (color 2) para ela acompanhar a segunda cor do chat.

Exemplo da Duda: formato Círculo, moldura Anel com a cor principal e fundo Nenhum.

4. Aparência

Cores do Robô

As cores do chat. Clique em cada um dos quatro quadrados para escolher uma cor. A primeira é a cor principal e a segunda, a secundária. A moldura e o fundo do avatar podem usar essas duas.

Se não quiser escolher uma a uma, clique em Paleta e use uma combinação pronta.

Como escolher:

• Use as cores da sua marca, começando pela mais forte como cor principal;
• Confira na prévia se o texto continua fácil de ler sobre as cores escolhidas.

Exemplo da Duda: o laranja da logo da Passo Certo como cor principal e um bege claro como secundária.

Fonte do texto

A fonte das mensagens do chat. Escolha uma fonte fácil de ler, de preferência parecida com a do seu site.

5. Mensagens

Idiomas

Em Idiomas Configurados, você cadastra as mensagens do chat em mais de um idioma. Clique em Adicionar Idioma e escolha Português (BR), Inglês ou Espanhol. Cada idioma ganha uma aba com as suas próprias mensagens.

O idioma padrão é o marcado com uma estrela. Para trocar, abra a aba do idioma e clique em Definir como Padrão.

Exemplo da Duda: a Passo Certo vende para turistas na loja física, então a Duda tem as mensagens em português, como padrão, e em espanhol.

Primeira mensagem no chat

A mensagem que o agente manda quando um novo cliente começa a conversa. É o mesmo campo Primeira Mensagem no Chat da aba Personalidade: mudar aqui muda lá também. Veja dicas e exemplo no guia Personalidade.

Limite: 600 caracteres por idioma.

Mensagem do balão de fala

Uma frase curta que aparece num balão ao lado do botão do chat, antes de o visitante abrir a conversa. Ela serve para convidar a pessoa a começar a conversa. Só aparece no chat do site.

Limite: 45 caracteres por idioma.

Como escrever:

• Seja curto e direto: o visitante lê de relance;
• Convide para uma ação, de preferência a dúvida mais comum dos seus clientes.

6. Modelos prontos

A coluna ao lado do formulário mostra modelos de assistente com visual pronto. Clique em Ver todos para abrir a Lista Completa de Assistentes.

Para usar um modelo:

1. Clique no modelo que você quer.
2. Na janela Importação de Preset, marque o que quer trazer: Cores, Fontes e Avatar.
3. Clique em Usar Preset.
4. Confira o resultado na prévia e clique em Salvar.

💡 Dica: dá para importar só uma parte. Por exemplo, traga só as Fontes de um modelo e mantenha as suas cores e a sua foto.

7. Próximo passo

Clique em Salvar antes de sair da aba. A próxima é a aba Utilidades, com os ajustes do dia a dia: avaliações, áudio, anexos e o tempo de espera antes de responder.

8. Perguntas frequentes