As definições de aparência controlam o aspeto do widget de chat do seu chatbot para os visitantes no seu site - o cabeçalho, as cores e os tipos de letra das mensagens, o ícone de abertura, o ecrã de boas-vindas, o tamanho do widget e muito mais. É aqui que personaliza o widget para corresponder à sua marca.
Precisa de ter um chatbot antes de poder personalizar o seu estilo. Se ainda não criou um, comece por Como criar o seu primeiro chatbot.
Onde encontrar as definições de aparência
Selecione o seu chatbot e navegue para Settings > Appearance (Definições > Aparência). A partir da página principal do ChatLab, clique em Chatbots, abra o seu chatbot, abra o separador Settings (Definições) e, em seguida, escolha Appearance (Aparência) no menu à esquerda.
Uma pré-visualização em tempo real do seu widget é apresentada no lado direito da página e é atualizada à medida que altera as definições.
Chat Header
Configure o aspeto da secção superior do seu widget de chat:
- Chatbot name (Nome do chatbot) - o nome de exibição apresentado no cabeçalho do chat (máx. 60 carateres)
- Tagline (Slogan) - subtítulo opcional apresentado por baixo do nome do chatbot (máx. 60 carateres)
- Avatar - carregue uma imagem personalizada que os clientes veem enquanto interagem com o chatbot. Utilize o botão Remove (Remover - destacado abaixo) para apagar a imagem atual.
- Background (Fundo) - cor de fundo da área do cabeçalho
- Name color (Cor do nome) - cor do texto do nome do chatbot
- Tagline color (Cor do slogan) - cor do texto do slogan
- Reset conversation tooltip (Dica de reposição da conversa) - texto da dica de contexto apresentado quando os visitantes passam o cursor sobre o botão de reiniciar a conversa no cabeçalho do widget (máx. 40 carateres, predefinição "Reset conversation")
Message
Personalize o campo de introdução de mensagens e o aspeto das mensagens da conversa:
- Input placeholder (Texto de espaço reservado de introdução) - texto de espaço reservado apresentado no campo de introdução de nova mensagem na parte inferior do widget (máx. 50 carateres, predefinição "Type a message..."). Utilize-o para incentivar os visitantes a começar a escrever.
- User background (Fundo do utilizador) - cor de fundo das mensagens enviadas pelo visitante
- User text (Texto do utilizador) - cor do texto das mensagens do visitante
- Resp. background (Fundo da resposta) - cor de fundo das respostas do chatbot
- Response text (Texto da resposta) - cor do texto das respostas do chatbot
O tamanho do texto das mensagens é definido na secção Typography (Tipografia), juntamente com o tipo de letra do widget.
Suggested Questions
As perguntas sugeridas são as opções pré-definidas em que um visitante pode clicar para iniciar uma conversa. As perguntas propriamente ditas são escritas em Settings > Chat Conversation (Definições > Conversa do Chat); aqui personaliza o aspeto visual dos botões:
- Background (Fundo) - cor de fundo dos botões de perguntas sugeridas
- Text (Texto) - cor do texto dos botões de perguntas sugeridas
- Stack (Empilhar) - quando ativado, as perguntas sugeridas mais longas são empilhadas verticalmente em vez de apresentarem uma barra de deslocamento horizontal
O tamanho do texto das perguntas sugeridas é definido na secção Typography (Tipografia).
Definições do modo minimizado
Controle a forma como o widget de chat é apresentado quando minimizado (antes de o visitante abrir o chat):
- Minimized display mode (Modo de apresentação minimizado) - escolha entre:
- Icon (Ícone) - ícone circular padrão de abertura do chat (predefinição)
- Minified chat bar (Barra de chat compacta) - barra de introdução de texto compacta apresentada na parte inferior da página
- Icon with text (Ícone com texto) - um botão de abertura mais largo em formato de pílula: o ícone acompanhado de uma legenda curta de duas linhas
- Icon color / Mini bar color (Cor do ícone / Cor da minibarra) - cor do ícone de abertura ou do fundo da minibarra
- Custom chat icon (Ícone de chat personalizado - apenas no modo de ícone) - ative para carregar ícones personalizados de abrir/fechar o chat
- Position on screen (Posição no ecrã) - posicione o widget no lado esquerdo ou direito do ecrã
- Move up chat icon/bar by (Mover ícone/barra de chat para cima em) - desvio vertical em píxeis a partir do limite inferior
- Move icon/bar left/right by (Mover ícone/barra para a esquerda/direita em) - desvio horizontal em píxeis a partir do limite mais próximo do ecrã
Icon with Text
O modo Icon with text adiciona uma legenda curta ao elemento de abertura, permitindo que os visitantes compreendam a finalidade do chat antes de o abrirem. É útil quando um simples ícone não é suficientemente óbvio - por exemplo, "Fale connosco / Respondemos de imediato" ou "Precisa de ajuda? / Pergunte ao nosso assistente".
Ao selecionar este modo, são adicionadas quatro definições:
- Label line 1 (Linha 1 da etiqueta) - a primeira linha da legenda, com maior destaque (máx. 60 carateres)
- Label line 2 (Linha 2 da etiqueta) - a segunda linha, mais discreta (máx. 60 carateres). Deixe em branco para um botão de abertura com apenas uma linha
- Text color (Cor do texto) - cor da legenda. Deixe inalterada e o ChatLab escolhe preto ou branco automaticamente, consoante a cor do seu elemento de abertura seja clara ou escura
- Show close cross (Mostrar cruz de fecho) - adiciona uma pequena cruz ao elemento de abertura para que os visitantes o possam ocultar
Ambas as linhas são encurtadas com reticências se não couberem, garantindo que o elemento de abertura nunca ultrapassa a largura do ecrã. O elemento recolhe novamente para um círculo enquanto o chat está aberto.
Se o suporte multilingue estiver ativado, ambas as linhas da legenda são traduzidas como os restantes textos visíveis para o visitante.
A opção Show close cross está desativada por predefinição e só está disponível neste modo. Quando ativada, se o visitante clicar na cruz, o elemento de abertura fica oculto durante o resto da sessão de navegação - permanece oculto à medida que navega entre páginas e regressa na visita seguinte ou num novo separador. Um chatbot configurado para abrir automaticamente respeita essa escolha e não volta a abrir depois de o visitante o ter fechado.
Auto Open Chat Widget After Page Load
Configure o chat para expandir automaticamente quando os visitantes carregam a página:
- Auto open on mobile (Abertura automática em dispositivos móveis) - abre automaticamente o chat em dispositivos móveis
- Auto open on desktop (Abertura automática em computadores) - abre automaticamente o chat em ecrãs de computador
- Open chat with delay (Abrir chat com atraso) - ativa um atraso antes da abertura automática (disponível apenas quando a abertura automática está ativada)
- Delay by (Atrasar em) - número de segundos a aguardar antes de abrir (0-60 segundos)
Human-Like Messaging
Simula uma escrita semelhante à humana, dividindo as respostas em vários balões de mensagem, apresentados gradualmente frase a frase:
- Human-Like Messaging (Mensagens semelhantes a humanos) - botão para ativar/desativar a funcionalidade
- Delay Between Bubbles (Atraso entre balões) - tempo em segundos entre a apresentação de cada balão de mensagem (0-200 segundos)
Welcome Message Bubble
Apresente a mensagem de boas-vindas num balão por cima do ícone de abertura do chat para ajudar os visitantes a notar o chat. Esta funcionalidade só está disponível no modo de ícone e não funciona no modo iframe nem quando a abertura automática está ativada.
- Show on desktop (Mostrar no computador) - apresenta o balão da mensagem de boas-vindas no computador
- Show on mobile (Mostrar em dispositivos móveis) - apresenta o balão da mensagem de boas-vindas em dispositivos móveis
- Delay (Atraso) - número de segundos após o carregamento da página antes de mostrar o balão (0-60 segundos)
Se tiver várias mensagens de boas-vindas, estas serão apresentadas empilhadas acima do ícone de chat.
A introdução por voz (o botão do microfone na área de introdução de texto do chat) é configurada em Settings > Chat Conversation (Definições > Conversa do Chat), e não aqui em Appearance.
Welcome Screen
Mude o widget para um esquema visual de abertura especial que recebe os novos visitantes com uma mensagem de boas-vindas de grandes dimensões e as perguntas sugeridas empilhadas num cartão branco centralizado. O ecrã de boas-vindas só aparece no início de uma nova sessão e transita para a vista de chat normal assim que o visitante envia a sua primeira mensagem.
- Special Welcome Screen (Ecrã de boas-vindas especial) - ativa ou desativa o modo de ecrã de boas-vindas (desativado por predefinição)
- Suggested questions intro (Introdução às perguntas sugeridas) - etiqueta curta apresentada por cima do cartão de perguntas sugeridas no ecrã de boas-vindas (por exemplo, "Selecione uma opção ou escreva uma mensagem"). Deixe em branco para ocultar a etiqueta. Requer que as perguntas sugeridas estejam configuradas em Settings > Chat Conversation.
- Hide Human Contact Form (Ocultar formulário de contacto humano) - oculta a ação do formulário de contacto no cabeçalho enquanto o ecrã de boas-vindas estiver visível
- Hide Live Chat (Ocultar Live Chat) - oculta a ação de chat na hora no cabeçalho enquanto o ecrã de boas-vindas estiver visível
O ecrã de boas-vindas também se integra com a recolha de leads (Lead Collection) e com o consentimento da política de privacidade (Privacy Policy consent) - se algum deles for obrigatório no início da conversa, o formulário ou o pedido de consentimento é apresentado no cartão de boas-vindas em vez das perguntas sugeridas.
Para obter todos os detalhes, variantes de esquema e capturas de ecrã do ponto de vista do visitante, consulte Welcome Screen.
Header Actions
Controla a forma como o Live Chat e o Human Contact Form (Formulário de contacto humano) são disponibilizados no cabeçalho do widget de chat.
- Separate icons (Ícones separados) - cada ação tem o seu próprio ícone no cabeçalho, ao lado do botão de fechar
- Menu (dropdown) (Menu pendente) - ambas as ações passam para o menu do cabeçalho (o ícone de três pontos), juntamente com opções como "Reset conversation" (Reiniciar conversa) e o seletor de idioma, quando estes estão ativados
Os novos chatbots utilizam o menu, o que mantém o cabeçalho organizado à medida que são adicionadas mais ações. Os chatbots criados antes de 2 de setembro de 2026 mantêm ícones separados, pelo que nada muda para os seus visitantes. Alterne em qualquer altura - a definição afeta apenas a apresentação, não o funcionamento das ações.
Typography
Define o tipo de letra e os tamanhos de texto utilizados em todo o widget - mensagens, perguntas sugeridas, cabeçalho, formulários e a legenda do elemento de abertura.
- Widget font (Tipo de letra do widget) - um de oito tipos de letra: System default (Predefinição do sistema), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif e JetBrains Mono
- Message font size (Tamanho da letra das mensagens) - tamanho do texto das mensagens (12-24 px)
- Suggested questions font size (Tamanho da letra das perguntas sugeridas) - tamanho dos botões de perguntas sugeridas (12-24 px)
O tipo de letra Inter é a predefinição e corresponde à aparência de todos os chatbots antes da existência desta definição, pelo que nada se altera até escolher outro tipo de letra.
A opção System default não transfere qualquer ficheiro - o widget utiliza o tipo de letra já instalado no dispositivo do visitante. Isso torna-a na opção mais rápida e integra-se perfeitamente em sites que utilizam o tipo de letra do sistema, embora o chat tenha um aspeto ligeiramente diferente em Windows, macOS e Android. Os outros sete são Google Fonts, transferidos uma vez pelo navegador do visitante. Cada um dispõe de alternativas de recurso (fallback), garantindo que, se a rede de um visitante bloquear o Google Fonts, o texto permanece legível e a estrutura visual não se quebra.
O ficheiro de tipo de letra é carregado diretamente na janela do chat. Só é adicionado à sua própria página quando o widget apresenta texto fora da janela do chat - o elemento de abertura Icon with text, a barra de chat compacta ou os balões de mensagens de boas-vindas. Um chatbot que utilize o elemento de abertura simples de ícone não adiciona qualquer pedido extra à sua página.
Widget Size
Ajuste as dimensões do widget de chat aberto em computadores e dispositivos móveis. Cada barra de ajuste dispõe de um botão Default (Predefinição) que restaura o dimensionamento original.
- Desktop width (Largura no computador) - largura do widget em navegadores de computador, em píxeis (330-800, predefinição 448)
- Desktop height (Altura no computador) - altura do widget em navegadores de computador, em píxeis (300-770, predefinição 660)
- Mobile size (Tamanho em dispositivos móveis) - tamanho do widget em dispositivos móveis, como percentagem do ecrã (60-100%, predefinição 100%)
No valor predefinido, o widget utiliza o dimensionamento responsivo integrado do ChatLab. Qualquer outro valor aplica um tamanho fixo.
Em dispositivos móveis, o valor predefinido (100%) faz com que o chat aberto ocupe a totalidade do ecrã. Escolher uma percentagem mais baixa reduz o widget para essa proporção do ecrã e centra-o na área de visualização, permitindo que os visitantes continuem a ver a página em redor do chat.
Junto às barras de ajuste encontra dois botões Save & Preview (Guardar e pré-visualizar - destacados abaixo) - um para as opções de computador e outro para a opção móvel. Clicar num botão guarda as alterações pendentes e abre o chat numa janela de pré-visualização com as suas definições atuais:
- O botão de computador abre uma janela normal de navegador para que possa avaliar o tamanho exato num ecrã de computador.
- O botão móvel abre uma janela pop-up compacta (400 x 700) para que o widget seja renderizado no esquema móvel, o que é útil para ajustar a barra Mobile size a partir de um computador.
Maximise Button (Drawer Mode)
O Drawer mode (Modo de gaveta) permite ao visitante transformar o chat de uma janela flutuante para um painel de altura total fixado na lateral do ecrã, mantendo a sua página visível ao lado. É adequado para conversas que o visitante consulta enquanto lê a página - respostas longas, comparações de produtos, formulários ou qualquer conteúdo com muito texto.
Ative o botão Maximise button (Botão de maximização) em Widget Size e será apresentado um botão no cabeçalho do chat; o visitante decide se o pretende utilizar. A sua escolha é memorizada durante o resto da sessão de navegação.
- O painel ocupa metade da largura da janela do navegador, até um máximo de 720 px, e tem sempre a altura total. Fica fixado no mesmo lado do elemento de abertura, pelo que um widget posicionado à esquerda abre uma gaveta à esquerda.
- As opções Desktop width e Desktop height não se aplicam aqui - definem apenas o tamanho da janela flutuante normal.
- O botão só é apresentado em ecrãs de computador com pelo menos 1200 px de largura e com recurso a rato. Em telemóveis e tablets nunca aparece, pois aí o chat já ocupa todo o ecrã. Se um visitante reduzir a largura do navegador abaixo desse valor, a gaveta volta a recolher para a janela normal.
- O elemento de abertura fica oculto enquanto a gaveta está aberta; o visitante fecha-a a partir do cabeçalho ou sai do modo de gaveta através do mesmo botão.
O modo de gaveta está desativado por predefinição, pelo que nada muda para os seus visitantes até que o ative.
Outras definições de aparência
- Widget Shadow (Sombra do widget) - ative ou desative uma sombra em redor da moldura do widget de chat
- Open links in (Abrir hiperligações em) - escolha se as hiperligações nas mensagens do chat abrem num new tab (novo separador) ou no same tab (mesmo separador)
É também apresentado um botão de fechar (X) no cabeçalho do chat em computadores, para que os visitantes possam recolher o chat de volta para o elemento de abertura sem recarregar a página. O botão de fechar permanece oculto quando o chat está incorporado como iframe ou em modo de ecrã inteiro.
Custom Chat Footer
Adicione texto personalizado apresentado na parte inferior do widget de chat (máx. 250 carateres). O formato Markdown é suportado para inserir hiperligações. Uma utilização comum é a inclusão de ligações para a sua política de privacidade ou para os termos de serviço.
Exemplo em Markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS
Adicione estilos CSS personalizados para configurar ainda mais o aspeto visual do seu widget de chat (máx. 5000 carateres):
Artigos relacionados
As alterações são guardadas automaticamente. Aguarde pela indicação Saved (Guardado) e, em seguida, verifique a secção Overview (Visão geral) e o widget incorporado em computadores e dispositivos móveis. A pré-visualização das definições mostra a janela de chat; a posição do elemento de abertura e o comportamento de abertura automática ao nível da página também devem ser verificados na sua incorporação no site.
- Como criar o seu primeiro chatbot
- Definições de conversa - escreva a mensagem de boas-vindas e as perguntas sugeridas
- Welcome Screen - o esquema visual de abertura em ecrã inteiro e as respetivas variantes do ponto de vista do visitante
- Formulários personalizados - recolha dados dos visitantes dentro do chat
- Recolha de leads