As definições de aparência controlam o aspeto do widget de chat do seu chatbot para os visitantes no seu website - 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 coincidir com a 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 aceda a Settings > Appearance (Definições > Aparência). A partir da página principal da ChatLab, clique em Chatbots, abra o seu chatbot, aceda ao separador Settings (Definições) e, em seguida, escolha Appearance (Aparência) no menu do lado esquerdo.
Uma pré-visualização em tempo real do seu widget aparece no lado direito da página e atualiza-se à medida que altera as definições.
Cabeçalho do chat (Chat Header)
Configure o aspeto da secção superior do seu widget de chat:
- Chatbot name (Nome do chatbot) - o nome apresentado no cabeçalho do chat (máx. 60 carateres)
- Tagline (Subtítulo) - subtítulo opcional apresentado abaixo 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 subtítulo) - cor do texto do subtítulo
- Reset conversation tooltip (Dica do botão de reiniciar conversa) - texto da dica de contexto apresentada quando os visitantes passam o cursor sobre o botão de reiniciar conversa no cabeçalho do widget (máx. 40 carateres, por defeito "Reset conversation")
Mensagem (Message)
Personalize o campo de introdução de mensagens e o aspeto das mensagens na conversa:
- Input placeholder (Texto de espaço reservado no campo de introdução) - texto apresentado no campo de texto de nova mensagem na parte inferior do widget (máx. 50 carateres, por defeito "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 Tipografia, em conjunto com o tipo de letra do widget.
Perguntas sugeridas (Suggested Questions)
As perguntas sugeridas são sugestões prontas que o visitante pode premir para iniciar uma conversa. Pode escrever as perguntas em si em Settings > Chat Conversation (Definições > Conversa do chat); aqui personaliza o aspeto 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 surgem empilhadas verticalmente em vez de mostrarem uma barra de deslocamento horizontal
O tamanho do texto das perguntas sugeridas é definido na secção Tipografia.
Definições do modo minimizado (Minimized-Mode Settings)
Controle como o widget de chat surge quando minimizado (antes de o visitante abrir o chat):
- Minimized display mode (Modo de apresentação minimizado) - escolha entre:
- Icon (Ícone) - ícone circular de abertura de chat padrão (predefinição)
- Minified chat bar (Barra de chat reduzida) - barra compacta com campo de texto apresentada na parte inferior da página
- Icon with text (Ícone com texto) - elemento de abertura mais largo em forma de pílula: o ícone com uma legenda curta de duas linhas
- Icon color / Mini bar color (Cor do ícone / Cor da mini barra) - cor do ícone de abertura ou do fundo da mini barra
- Custom chat icon (Ícone de chat personalizado, apenas no modo de ícone) - ative para carregar ícones personalizados para 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 o ícone/barra de chat para cima em) - deslocamento vertical em píxeis a partir do limite inferior
- Move icon/bar left/right by (Mover o ícone/barra para a esquerda/direita em) - deslocamento horizontal em píxeis a partir do limite do ecrã mais próximo
Ícone com texto (Icon with text)
O modo Icon with text adiciona uma legenda curta ao elemento de abertura, para que os visitantes vejam qual o objetivo do chat antes de o abrirem. É útil quando um ícone simples não é suficientemente evidente - por exemplo, "Fale connosco / Respondemos de imediato" ou "Precisa de ajuda? / Pergunte ao nosso assistente".
Escolher este modo adiciona quatro definições:
- Label line 1 (Linha de texto 1) - a primeira linha da legenda, em destaque (máx. 60 carateres)
- Label line 2 (Linha de texto 2) - a segunda linha, mais discreta (máx. 60 carateres). Deixe vazia para ter um elemento com uma única linha
- Text color (Cor do texto) - cor da legenda. Se mantiver a predefinição, a ChatLab escolhe preto ou branco automaticamente, consoante a luminosidade da cor do elemento de abertura
- Show close cross (Mostrar cruz para fechar) - adiciona uma pequena cruz ao elemento de abertura para permitir que os visitantes o ocultem
Ambas as linhas são encurtadas com reticências caso não caibam, para que o elemento de abertura nunca ultrapasse a largura do ecrã. O elemento de abertura volta a recolher para a forma circular enquanto o chat estiver aberto.
Se o seu chatbot for multilingue, ambas as linhas da legenda são traduzidas juntamente com os restantes textos visíveis pelos visitantes, permitindo que cada utilizador veja a legenda no seu idioma.
A opção Show close cross vem desativada por defeito e só está disponível neste modo. Quando ativada, o visitante que clicar na cruz oculta o elemento de abertura durante o resto da sua sessão de navegação - mantém-se oculto à medida que navega entre páginas e regressa na próxima visita 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.
Abrir automaticamente o widget de chat após o carregamento da página (Auto Open Chat Widget After Page Load)
Configure o chat para abrir automaticamente quando os visitantes carregam a página:
- Auto open on mobile (Abrir automaticamente no telemóvel) - abre o chat automaticamente em dispositivos móveis
- Auto open on desktop (Abrir automaticamente no computador) - abre o chat automaticamente em ecrãs de computador
- Open chat with delay (Abrir o chat com atraso) - ativa um intervalo de espera antes de abrir automaticamente (disponível apenas quando a abertura automática estiver ativada)
- Delay by (Atrasar em) - número de segundos a aguardar antes de abrir (0-60 segundos)
Envio de mensagens com estilo humano (Human-Like Messaging)
Simula a escrita humana dividindo as respostas em vários balões de mensagem, apresentados gradualmente frase a frase:
- Human-Like Messaging - ative ou desative esta funcionalidade
- Delay Between Bubbles (Atraso entre balões) - tempo em segundos entre a apresentação de cada balão de mensagem (0-200 segundos)
Balão de mensagem de boas-vindas (Welcome Message Bubble)
Apresente a mensagem de boas-vindas num balão sobre o í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 ou quando a abertura automática estiver ativada.
- Show on desktop (Mostrar no computador) - apresenta o balão da mensagem de boas-vindas no computador
- Show on mobile (Mostrar no telemóvel) - 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 aparecem empilhadas sobre o ícone do chat.
A introdução por voz (o botão do microfone na área de texto do chat) é configurada em Settings > Chat Conversation, e não aqui na secção Appearance.
Ecrã de boas-vindas (Welcome Screen)
Alterne o widget para uma apresentação inicial especial que acolhe novos visitantes com uma mensagem de boas-vindas de grandes dimensões e as perguntas sugeridas empilhadas num cartão branco centrado. O ecrã de boas-vindas surge apenas no início de uma nova sessão e transita para a vista normal de chat assim que o visitante envia a sua primeira mensagem.
- Special Welcome Screen (Ecrã especial de boas-vindas) - ativa ou desativa o modo de ecrã de boas-vindas (desativado por defeito)
- Suggested questions intro (Introdução das perguntas sugeridas) - texto curto apresentado 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 o texto. Exige 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 funcionalidade Lead Collection (Recolha de contactos) e com o Privacy Policy consent (Consentimento da Política de Privacidade) - se algum deles for obrigatório no início da conversa, o formulário ou pedido de consentimento é apresentado no cartão de boas-vindas em vez das perguntas sugeridas.
Para obter todos os detalhes, variantes de apresentação e capturas de ecrã do lado do visitante, consulte Welcome Screen.
Ações de cabeçalho (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 recebe o seu próprio ícone no cabeçalho, junto ao botão de fechar
- Menu (dropdown) (Menu suspenso) - ambas as ações passam para o menu do cabeçalho (o ícone de três pontos), ao lado de opções como "Reset conversation" e do seletor de idioma, quando ativos
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 os ícones separados, não alterando nada para os seus visitantes. Pode mudar a qualquer altura - a definição afeta apenas o formato de apresentação, não o funcionamento das ações.
Tipografia (Typography)
Define a fonte e os tamanhos de texto utilizados em todo o widget - mensagens, perguntas sugeridas, cabeçalho, formulários e na legenda do botão de abertura.
- Widget font (Tipo de letra do widget) - uma de oito opções: 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 do texto dos botões de perguntas sugeridas (12-24 px)
Inter é a opção por defeito e corresponde ao aspeto de cada chatbot antes da existência desta definição, pelo que nada se altera até escolher outro tipo de letra.
System default não transfere qualquer ficheiro - o widget utiliza a fonte já instalada no dispositivo do visitante. Isto torna-a na opção mais rápida e integra-se com sites que usem a fonte do sistema, mas o chat terá um aspeto ligeiramente diferente em Windows, macOS e Android. As outras sete opções são Google Fonts, transferidas uma vez pelo navegador do visitante. Cada uma inclui fontes alternativas de reserva (fallback), pelo que se a rede de um visitante bloquear as Google Fonts, o texto continua legível e o esquema visual mantém-se intacto.
O ficheiro de fonte é carregado diretamente na janela do chat. Só é adicionado à sua própria página se o widget apresentar texto fora da janela do chat - o elemento de abertura no modo Icon with text, a barra de chat reduzida ou os balões de mensagem de boas-vindas. Um chatbot que utilize o elemento com ícone simples não adiciona pedidos adicionais à sua página.
Tamanho do widget (Widget Size)
Ajuste o tamanho do widget de chat aberto em dispositivos móveis e computadores. Cada cursor dispõe de um botão Default (Predefinição) que repõe as dimensões de fábrica.
- 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 no telemóvel) - tamanho do widget em dispositivos móveis, em percentagem do ecrã (60-100%, predefinição 100%)
No valor por defeito, o widget utiliza o dimensionamento responsivo integrado da ChatLab. Qualquer outro valor aplica um tamanho fixo.
Em dispositivos móveis, o valor por defeito (100%) faz com que o chat aberto cubra todo o ecrã. Escolher uma percentagem mais baixa reduz o widget para essa porção do ecrã e centra-o na área de visualização, para que os visitantes continuem a ver a página em redor do chat.
Junto aos cursores 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 ver 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 formato para telemóvel, o que é útil ao ajustar o cursor Mobile size a partir de um computador.
Modo gaveta (Drawer Mode)
O Drawer mode permite que o visitante mude o chat de uma janela flutuante para um painel de altura completa fixado na lateral do ecrã, mantendo a sua página visível ao lado. É adequado para conversas que o visitante acompanha enquanto lê a página - respostas longas, comparações de produtos, formulários ou qualquer conteúdo com muito texto.
Ative-o para que um botão surja no cabeçalho do chat; o visitante decide se o utiliza. A escolha feita é mantida durante o restante tempo da sessão de navegação.
- O painel ocupa metade da largura da janela do navegador, até 720 px, e sempre a altura total. Fica fixado no mesmo lado do elemento de abertura, pelo que um widget posicionado à esquerda abre uma gaveta à esquerda.
- As definições Desktop width e Desktop height não se aplicam aqui - definem apenas as dimensões da janela flutuante normal.
- O botão só é apresentado em ecrãs de computador com pelo menos 1200 px de largura e com rato. Em telemóveis e tablets nunca surge, uma vez que o chat já ocupa todo o ecrã. Se um visitante reduzir a janela do navegador para uma largura inferior, a gaveta volta a recolher para a janela normal.
- O elemento de abertura fica oculto enquanto a gaveta estiver aberta; o visitante fecha-a a partir do cabeçalho ou sai do modo gaveta utilizando o mesmo botão.
O modo gaveta vem desativado por defeito, pelo que nada se altera para os seus visitantes até que o ative.
Outras definições de aparência (Other Appearance Settings)
- Widget Shadow (Sombra do widget) - ative ou desative uma sombra em redor do contentor do widget de chat
- Open links in (Abrir hiperligações em) - escolha se as hiperligações nas mensagens de chat abrem num new tab (novo separador) ou no same tab (mesmo separador)
Um botão de fechar (X) também é apresentado no cabeçalho do chat em computadores, para que os visitantes possam recolher o chat de volta para o ícone sem recarregar a página. O botão de fechar mantém-se oculto quando o chat está incorporado através de iframe ou no modo de ecrã inteiro.
Rodapé personalizado do chat (Custom Chat Footer)
Adicione texto personalizado apresentado na parte inferior do widget de chat (máx. 250 carateres). O formato Markdown é suportado para a inserção de hiperligações. Uma utilização comum é a ligação para a sua política de privacidade ou termos de serviço.
Exemplo de Markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
CSS personalizado (Custom CSS)
Adicione estilos CSS personalizados para configurar ainda mais o aspeto visual do seu widget de chat (máx. 5000 carateres):
Artigos relacionados
- Como criar o seu primeiro chatbot
- Definições de conversa - escreva a mensagem de boas-vindas e as perguntas sugeridas
- Ecrã de boas-vindas - o esquema visual de abertura em ecrã completo e as suas variantes para os visitantes
- Formulários personalizados - recolha dados de visitantes dentro do chat
- Recolha de contactos