# Aparência da Interface
Você pode customizar a aparência de seu chatbot, pela cor, tamanho da fonte e exibição de mensagens de mensagens seguindo pela aba de **Configurações** na tela principal de seu bot.
Após abrir a aba de configurações de seu bot, vá para a opção **Configurações da Interface de Chatbot.**
A página principal das configurações de interface mostram alguns comandos cujo as alterações podem afetar o seu modelo de chatbot, mostrado à direita.
A forma que customizá-la, será a forma em que irá aparecer no website ou canal de onde deseja implantar o chatbot, portanto, tente deixá-lo de uma forma a qual possa representar a identidade de seu negócio.
A página pode ser divida por 5 tópicos de configurações:
### Tela de Chat
São configurações primárias que afetam a tela por onde a conversa com o chat será realizada. Essas configurações são divididas pelas seguintes abas:
* **Logo do Chat:** Logo na janela de chat, pode inserir o logo de seu negócio, contanto que seja a URL da imagem.
* **Titulo do Logo do Chat:** Descrição do logo a qual pertence o domínio do chat.
* **Mensagem de Chat Offline:** Mensagem inicial do chat, adequando a expectativa do usuário referente a resposta do chatbot.
* **Titulo do Chat:** Nome dado ao chatbot que conversará com o usuário.
* **Cabeçalho do Chat:** Escolha a cor do cabeçalho na janela de chat, padrão se encontra como gradiente.
* **Cor do Botão Menu:** Escolha um pop-up de cor ou dê um valor personalizado para o botão.
* **Largura da Janela de Chat;**
* **Altura da Janela de Chat.**
### Tela de Boas Vindas
Afeta a tela de boas vindas tratando-se da recepção do chatbot. Essas configurações são divididas pelas seguintes abas:
* **Banner "Bem Vindo":** Logo de boas vindas, pode inserir o logo de seu negócio, contanto que seja a URL da imagem.
* **Emoji de Boas Vindas:** Use uma URL de emoji. Você pode conseguir imagens pequenas no [Twitter Emoji](https://twemoji.maxcdn.com/2/test/preview.html).
* **Mensagem de Boas Vindas:** Mensagem que receberá o usuário assim que o chat for ativado.
* **Cabeçalho de Boas Vindas:** Escolha a cor do cabeçalho na janela de boas vindas, padrão se encontra como gradiente.
### Caixa de Chat
Configurações referentes a caixa de chat ou a caixa de mensagem. Essas configurações são divididas pelas seguintes abas:
* **Plano de Fundo:** Cor do plano de fundo da caixa de fundo. Escolha um valor gradiente e ou um valor personalizado.
* **Primeiro Ícone:** Ícone disponível junto ao plano de fundo na caixa de chat.
* **Segundo Ícone:** Ícone disponível junto ao plano de fundo na caixa de chat. É mostrado quando o cursor esta sob a caixa de chat.
* **Cor do Primeiro Ícone:** Cor do primeiro ícone.
* **Cor do Segundo Ícone:** Cor do segundo ícone.
### Conteúdo do Chat
Aqui você pode configurar os conteúdos dentro da janela de histórico do chat. São divididas pelas seguintes abas:
* **Imagem de Avatar do Bot/Usuário:** Use uma URL de imagem. Você pode conseguir imagens pequenas no [Twitter Emoji](https://twemoji.maxcdn.com/2/test/preview.html).
* **Preenchimento da Mensagem:** Modifique o tamanho da caixa de digitação da mensagem no chat.
* **Tamanho do Avatar:** Defina o tamanho do avatar que estará presente no chat.
* **Plano de Fundo da Mensagem do Bot:** Cor da caixa de mensagem do bot no histórico do chat.
* **Plano de Fundo da Mensagem do Usuário:** Cor da caixa de mensagem do usuário no histórico do chat.
* **Plano de Fundo do Chat:** Escolha a cor que será do plano de fundo do chat.
* **Plano de Fundo do Envio da Mensagem:** Escolha a cor do plano de fundo da caixa de digitação de mensagens.
### Controle do Chat
Você pode personalizar a aparência de alguns componentes, automaticamente alterando a forma a qual eles podem aparecer no chat, componentes como **Hero Cards** ou **Cartões de Mídia.**
É possível utilizar uma lista suspensa caso esteja utilizando o bloco de Pergunta, afim de gerar uma relação com as opções criadas nas propriedades do bloco, a fim de economizar espaço na tela de chat.
---
# Agent Instructions: 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://docs.sapios.com.br/customizando-seu-bot/aparencia.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.