> For the complete documentation index, see [llms.txt](https://zaiadocs.gitbook.io/recursos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zaiadocs.gitbook.io/recursos/agentes/como-criar-um-agente/visual/trocar-foto-do-agente-e-cor-da-mensagem-no-widget-iframe.md). # Trocar foto do Agente e cor da mensagem no widget/iFrame ### O que é a configuração Visual? A seção **Visual** permite personalizar a aparência do seu Agente no widget e iFrame — ou seja, como ele aparece para os usuários quando está incorporado em um site ou compartilhado como chat. Aqui você define a foto de perfil, as cores das mensagens, a cor da fonte e outros detalhes visuais que tornam o Agente mais alinhado à identidade da sua marca. *** ### Como acessar o Visual #### Passo 1 — Selecione o Agente No menu lateral, em **Funcionários AI**, clique no Agente que deseja configurar. #### Passo 2 — Acesse as configurações No painel do Agente, certifique-se de que a aba **"Básico"** está selecionada e clique em **"Visual"** no menu lateral. *** ### O que você pode configurar #### Imagem do Agente Clique na imagem de perfil exibida na seção **"Imagem do Agente"** e faça o upload da foto que deseja usar. Após inserir a imagem, a miniatura será atualizada imediatamente na tela. #### Chat inicia aberto por padrão Use o toggle **"Chat inicia aberto por padrão"** para definir se o widget já aparece aberto quando o usuário acessa a página onde o Agente está incorporado. #### Cores das mensagens e da fonte Na seção **"Defina as cores e detalhes de interação do seu Agente IA"**, você encontra quatro opções de personalização de cor: * **Cor da mensagem do usuário** — cor de fundo das mensagens enviadas pelo usuário * **Cor da fonte do usuário** — cor do texto nas mensagens do usuário * **Cor da mensagem do Agente** — cor de fundo das mensagens enviadas pelo Agente * **Cor da fonte do Agente** — cor do texto nas mensagens do Agente Para editar qualquer uma delas, clique no círculo colorido ao lado do nome da opção desejada. Um seletor de cores será exibido com uma paleta de opções predefinidas e um campo para inserir um código hexadecimal personalizado. Selecione a cor desejada ou digite o código hex e a cor será aplicada automaticamente. #### Mensagem guia para iniciar uma conversa No campo **"Escolha a mensagem guia para iniciar uma conversa"**, escreva uma sugestão de mensagem que ajudará o usuário a saber como iniciar a conversa com o Agente. Essa mensagem aparece como texto de apoio no campo de entrada do chat. #### Remover "Criado utilizando Zaia" Na seção **"Altere os Detalhes"**, você pode ativar o toggle **"Remove 'Criado utilizando Zaia'"** para remover a assinatura da Zaia do widget, mantendo a experiência com a identidade visual da sua marca. *** ### Salvando as alterações Após realizar todas as personalizações desejadas, clique em **"Treinar Agente IA"** para salvar as configurações. As alterações visuais serão aplicadas imediatamente ao widget e iFrame do Agente. *** ### Dicas importantes **Use cores com bom contraste.** Certifique-se de que a cor da fonte seja legível sobre a cor de fundo da mensagem. Combinações de baixo contraste dificultam a leitura e prejudicam a experiência do usuário. **Alinhe as cores à identidade visual da marca.** Use os mesmos tons presentes no site ou materiais da empresa para criar uma experiência coesa. O campo de código hexadecimal permite usar qualquer cor com precisão. **A imagem de perfil representa o Agente.** Escolha uma foto ou ícone que faça sentido para o contexto de uso — pode ser a foto de um atendente fictício, o logo da empresa ou qualquer imagem que transmita confiança ao usuário. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://zaiadocs.gitbook.io/recursos/agentes/como-criar-um-agente/visual/trocar-foto-do-agente-e-cor-da-mensagem-no-widget-iframe.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.