Interface de chatbot: 5 exemplos e boas práticas

A interface de um chatbot é tudo o que a pessoa vê e toca enquanto conversa com um bot: a janela do chat, o nome e a foto no topo, as mensagens, o ritmo das respostas e o caminho até um atendente humano. Quando ela funciona, as pessoas continuam digitando. Quando não funciona, elas fecham a janela depois da primeira resposta.

As expectativas são altas. No relatório CX Trends 2026 da Zendesk, 74% dos consumidores dizem que, por causa da IA, agora esperam atendimento disponível 24 horas por dia, 7 dias por semana. Uma boa interface de chatbot é como você atende essa expectativa sem fazer a pessoa sentir que está preenchendo um formulário.

Neste guia você vai ver:

1. O que é a interface de um chatbot hoje, no site e nos apps de mensagens
2. Os elementos principais da interface de um chatbot
3. Como configurar a interface do seu chatbot no Chatfuel
4. O que cada canal permite mostrar
5. Boas práticas de design, ferramentas e formas de testar
6. 5 exemplos de interface de chatbot do Chatfuel, Bank of America, Replika, Lark e Duolingo

O que é a interface de um chatbot

A interface de um chatbot (ou chatbot UI, de user interface) é a camada visual e de conversa entre a pessoa e o bot. Ela define como o bot aparece, como ele fala e o quanto é fácil conseguir uma resposta.

Existem dois casos bem diferentes:

• Seu próprio widget de chat no site. Você controla a janela: o nome, o logo, as cores e onde ela aparece.
• Apps de mensagens: WhatsApp, Instagram, Facebook Messenger, TikTok. A interface do app é fixa. As pessoas veem o chat que já conhecem, com o nome e a foto da sua empresa no topo. O que você desenha é a conversa: as palavras, o tamanho das mensagens, as fotos e os links que você envia e o momento em que uma pessoa assume.

Com agentes de IA, essa segunda parte importa mais do que nunca. As pessoas escrevem a pergunta com as próprias palavras e recebem a resposta no mesmo chat, então a própria conversa vira a interface.

Elementos principais da interface de um chatbot

Seja qual for o canal, as pessoas avaliam um chatbot pelas mesmas coisas:

1. Nome e avatar. Um nome de empresa claro e o logo mostram com quem a pessoa está falando. Se o assistente tiver nome próprio, ainda deve ficar claro que ele é a IA da sua empresa.
2. Janela do chat e botão de abrir. No site, um botão de chat fácil de encontrar e uma janela que não cobre a página. Nos apps de mensagens, isso é o próprio app.
3. A primeira resposta. Um oi curto, quem está respondendo e com o que pode ajudar. Ela define o tom de todo o resto.
4. Tamanho e formato das mensagens. Mensagens curtas, uma ideia por vez. Fotos e links quando respondem à pergunta, não como enfeite.
5. Botões ou texto livre. Bots baseados em regras dependem de botões. Agentes de IA entendem texto livre, então a pessoa pode simplesmente perguntar.
6. Ritmo. Respostas que chegam todas de uma vez parecem robóticas. Uma pausa curta e uma resposta única parecem mais humanas.
7. Transferência para um humano. Um caminho visível até a sua equipe e um bot que percebe quando alguém precisa dela.
8. Resposta para quando não sabe. O que o bot diz quando não tem a resposta. Um honesto "vou chamar alguém da equipe" é melhor do que uma resposta errada dita com confiança.

Como configurar a interface do seu chatbot no Chatfuel

No Chatfuel, um Agente de IA responde seus clientes no WhatsApp, Instagram, Facebook Messenger, TikTok e no seu site. Veja onde fica cada parte da interface.

Widget de chat do site: nome, imagem e cor

Acesse Configurações › Plataformas › Site. Em Aparência, defina:

• Nome: o nome da sua empresa, com até 30 caracteres. O widget mostra esse nome no topo do chat.
• Imagem: seu logo ou ícone. Ele aparece no topo do chat aberto.
• Cor de destaque: uma de seis cores prontas para o botão do chat e para as mensagens do visitante.

Depois, adicione seu site em Domínios, clique em Copiar código em Instalação e cole o trecho no HTML do site, antes da tag de fechamento </body>. Por fim, ative a automação Chats do site em Agente de IA › Automações: como toda automação, ela começa desativada.

Um detalhe: seu logo aparece dentro do chat aberto, mas o pequeno botão de chat no canto da página sempre mostra o ícone do Chatfuel, em todos os planos.

Veja como funciona o widget de chat para sites

Saudação, tom e nome: Instruções de IA

Não existe um campo separado de "mensagem de boas-vindas". O Agente de IA responde depois da primeira mensagem do visitante, e você define essa resposta em Instruções de IA, dentro da automação de cada canal. Escreva como se fosse um briefing para alguém novo na equipe:

• quem é o assistente ("Você é a Mia, assistente de IA da Nuvia Skin")
• como começa a primeira resposta (um oi curto e o nome do assistente)
• o tamanho das respostas (2 ou 3 frases, uma pergunta por vez)
• o que sempre incluir (o preço e a duração do serviço e, em seguida, um horário para agendar)
• o que evitar (mais de um emoji, conselhos médicos)

Cada canal pode ter as próprias instruções. As configurações que você não muda em um canal vêm da automação Padrão, então você mantém uma só voz em todos os canais e ajusta apenas o que cada um precisa.

Você nem precisa abrir as configurações. O AI Co-pilot, o assistente dentro do Chatfuel, muda o nome, a saudação e o tom quando você pede no chat:

Conheça o AI Co-pilot

Fotos e ritmo: Imagens e Atrasos em mensagens

Mais duas configurações na mesma automação definem o que as pessoas veem:

• Imagens envia fotos do seu catálogo: escolha Quando a IA mostra imagens (Nunca, Quando o produto ou serviço é mencionado pela primeira vez ou Quando solicitado) e a quantidade de Imagens por produto ou serviço.
• Atrasos em mensagens torna o chat mais humano. O Agente de IA espera alguns segundos, junta as mensagens que a pessoa manda em sequência e responde tudo de uma vez.

Por que não há botões

O Agente de IA do Chatfuel não usa menus de botões, respostas rápidas nem opções numeradas, e isso é de propósito. Os bots de botões eram uma solução para a época em que os bots não entendiam o que as pessoas escreviam. Eles travam assim que uma pergunta não bate com nenhum botão, e cada novo produto ou política exige refazer o menu.

O Agente de IA lê o que as pessoas escrevem, com as próprias palavras e em qualquer ordem, e responde a partir da sua Base de conhecimento de IA. Se você quiser que ele sugira opções, coloque isso nas instruções ("ofereça dois horários livres para agendar") e ele escreve as opções na resposta. Quem quiser falar com uma pessoa só precisa pedir.

Apps de mensagens: nome e foto

No WhatsApp, as pessoas veem o nome de exibição e a foto de perfil da sua empresa. Você muda o nome de exibição no WhatsApp Manager e depois clica em Sincronizar dados nas configurações de WhatsApp do Chatfuel. No Instagram e no Facebook Messenger, o chat mostra o nome e a foto da própria conta ou Página. As Instruções de IA e as configurações da automação Padrão funcionam do mesmo jeito em todos os canais.

Veja também: Boas práticas de chatbot: 8 regras para seu agente de IA

A interface do chatbot em cada canal

Cada app de mensagens tem os próprios elementos nativos. Veja o que as plataformas oferecem para bots, segundo a documentação para desenvolvedores da Meta em outubro de 2026:

Esses limites importam para bots baseados em regras, montados com botões e menus. O Agente de IA do Chatfuel responde com texto, fotos do seu catálogo e links, que aparecem do mesmo jeito em todos os canais e nunca esbarram em limite de botões.

Boas práticas de design de interface de chatbot

1. Diga quem você é e com o que pode ajudar

A primeira resposta precisa responder a duas perguntas: quem está falando e o que posso perguntar? "Oi, eu sou a Mia, da Nuvia Skin, posso ajudar com preços e agendamentos" faz as duas coisas em uma linha. Se o assistente for uma IA, diga isso.

2. Mensagens curtas, uma pergunta por vez

Parágrafos longos são difíceis de ler no celular. Mantenha cada resposta em duas ou três frases e termine com uma pergunta clara, para a pessoa saber que é a vez dela. As diretrizes de design de conversa do Google chamam isso de troca de turnos: o bot deve deixar claro quando é a vez do usuário.

3. Deixe a pessoa digitar e ofereça opções no próprio texto

Texto livre funciona para qualquer pergunta. Quando há poucas boas opções, como dois horários livres para agendar, escreva essas opções na resposta em vez de deixar a pessoa adivinhar.

4. Faça o chat parecer e soar como a sua marca

Use o mesmo nome, logo e cores do seu site, e um tom parecido com o jeito que a sua equipe fala. Uma clínica soa mais calma do que uma loja de tênis.

5. Mostre fotos só quando elas respondem à pergunta

Uma foto do tratamento ou do produto que a pessoa perguntou ajuda na decisão. Cinco fotos seguidas empurram a resposta para fora da tela.

6. Deixe claro o caminho até um humano

Diga logo no começo que uma pessoa pode assumir e defina regras claras para quando o bot passa o chat para a sua equipe: reembolsos, reclamações, dúvidas médicas. No Chatfuel, essas regras ficam em Transferir para agentes humanos, e a sua equipe assume o chat na mesma caixa de entrada.

7. Trate o "não sei" com cuidado e teste no celular

Diga ao bot o que responder quando a resposta não estiver na base de conhecimento. Depois teste o chat inteiro no celular, onde a maioria das pessoas vai usá-lo: mensagens longas, imagens grandes e botões cobertos aparecem primeiro ali.

Ferramentas de design de interface de chatbot

O protótipo mais rápido é o chat de verdade. Com um agente de IA, você não precisa desenhar cada caminho. No Chatfuel, Testar automação no painel de pré-visualização abre um chat com as configurações daquela automação e a sua base de conhecimento real, sem enviar mensagens para clientes. Escreva as instruções, faça as perguntas mais comuns e ajuste.

Quando você precisa de mockups, para um redesign do site ou uma apresentação interna, estas são as ferramentas que designers usam em 2026:

• Figma. A ferramenta de design de interfaces mais usada, com colaboração em tempo real. O Figma Make, disponível para todos os usuários desde julho de 2025, transforma um prompt em um protótipo clicável, o que ajuda a testar o fluxo de um chat. Há um plano Starter gratuito; o Professional custa a partir de US$ 16 por assento completo por mês, segundo o site em outubro de 2026.
• Sketch. Para desenhar, ainda é preciso um Mac; um app web permite que qualquer pessoa veja, inspecione e comente. O Standard custa US$ 12 por editor por mês no plano anual, segundo o site em outubro de 2026.
• Penpot. Uma ferramenta de design de código aberto que roda no navegador, com plano gratuito e opção de hospedagem própria.
• Voiceflow. Uma plataforma de agentes de IA para equipes de experiência do cliente, usada para desenhar e testar conversas de chat e voz. O preço é sob consulta.

O InVision, que aparece em guias antigos, encerrou os serviços de colaboração em design no fim de 2024, e o site agora redireciona para o Miro.

Como avaliar a eficácia da interface do chatbot

1. Leia conversas reais. Nada mostra problemas de interface mais rápido: pessoas repetindo a pergunta, pedindo um atendente ou saindo depois da primeira resposta. No Chatfuel, todos os chats de todos os canais ficam em Chats, e o AI Co-pilot resume o que os clientes mais perguntaram na semana e quais respostas estão faltando.
2. Peça feedback. Uma avaliação de uma pergunta no fim do chat ou uma pesquisa curta com clientes recentes. É uma percepção declarada, mas mostra como as pessoas se sentiram.
3. Faça uma avaliação heurística. Percorra o chat com um checklist de usabilidade: fica claro quem está falando, o que fazer em seguida, como pedir ajuda e o que deu errado depois de um erro?
4. Teste com cinco pessoas. Dê a elas uma tarefa real ("agende uma limpeza de pele para sábado") no próprio celular e observe onde elas hesitam.
5. Eye-tracking, se houver orçamento. Ele mostra exatamente para onde as pessoas olham na janela do chat, mas custa bem mais do que os métodos acima.

Para um checklist do que testar antes do lançamento e do que perguntar ao AI Co-pilot toda semana, veja como testar e revisar um chatbot.

5 exemplos de interface de chatbot

1. Agente de IA do Chatfuel em um site

O chat do site de um estúdio de cuidados com a pele feito com o Chatfuel. O widget traz o nome, o logo e a cor roxa do estúdio. O Agente de IA se apresenta pelo nome, responde em duas frases com o preço e a duração do tratamento, envia uma foto do catálogo e termina com uma única pergunta: qual horário fica bom? O mesmo Agente de IA responde no WhatsApp, Instagram, Messenger e TikTok do estúdio, com instruções ajustadas para cada canal.

Experimente o Chatfuel no seu site

2. Erica, do Bank of America

A Erica é a assistente financeira virtual dentro do app do Bank of America. A interface dela faz mais do que responder: envia alertas proativos, como uma assinatura que ficou mais cara, ajuda a pessoa a gerenciar as contas e conecta com especialistas financeiros. Segundo o Bank of America, 20,6 milhões de clientes usaram a Erica em 2025, em quase 700 milhões de interações, e o total de interações passou de 3,2 bilhões desde o lançamento, em 2018.

O que aproveitar: alertas curtos e específicos que levam a um próximo passo, e um caminho claro até um especialista humano.

3. Replika

O Replika é um app de companhia com IA cuja interface gira em torno de um avatar pessoal. Os usuários escolhem a aparência do avatar, conversam com ele em mensagens curtas e informais, recebem selfies dele e podem até ligar para ele. A página inicial do app mostra mais de 42 milhões de usuários no mundo.

O que aproveitar: uma persona consistente. Nome, aparência e tom combinam em todas as mensagens, e é isso que faz as pessoas voltarem.

4. Lark Health

O Lark é um programa digital de acompanhamento de saúde para prevenção de diabetes, diabetes tipo 2, hipertensão e perda de peso, muitas vezes sem custo para quem tem plano de saúde ou benefício do empregador. O coach conversa com os participantes 24 horas por dia, e a página na App Store descreve "tap-to-send messaging OR type custom messages", ou seja, a pessoa responde com um toque ou com as próprias palavras. O Lark diz que mais de 2,5 milhões de pessoas já o escolheram.

O que aproveitar: check-ins rápidos, que levam segundos, com texto livre sempre disponível.

5. Duolingo Max

O Duolingo Max adiciona dois recursos de IA ao app de idiomas: Roleplay, em que o aluno conversa em situações da vida real, e Video Call with Lily, em que ele fala com uma das personagens do Duolingo. A interface transforma o chatbot em uma personagem com rosto, voz e personalidade, e o treino parece uma conversa, não uma prova. O Max está disponível no app para celular, não na versão web.

O que aproveitar: uma personagem e um cenário dão à pessoa um motivo para continuar conversando.

Resumo

A interface de um chatbot é o nome e a foto que as pessoas veem, a primeira resposta, o tamanho e o ritmo das mensagens, as fotos e os links que você envia e o caminho até um humano. No site, você também controla a janela. Nos apps de mensagens, a conversa é a interface inteira.

Com o Chatfuel, você define o nome, a imagem e a cor de destaque do widget em Configurações › Plataformas › Site, ajusta a saudação e o tom nas Instruções de IA de cada canal, ou pede ao AI Co-pilot para fazer isso, e escolhe quando o Agente de IA envia fotos. Depois, teste em Testar automação, leia os chats reais e ajuste.

Os planos do Chatfuel começam em US$ 20 por mês com US$ 20 em créditos de IA. Comece um teste grátis de 7 dias e coloque um Agente de IA no seu site e nos seus apps de mensagens.

Perguntas frequentes

O que é a interface de um chatbot?

A interface de um chatbot é o que as pessoas usam para conversar com um bot: a janela do chat, o nome e o avatar do bot, as mensagens, os botões ou o campo de texto livre e o caminho até um humano. No site, ela inclui o próprio widget de chat; no WhatsApp, Instagram ou Messenger, a interface do app é fixa e a interface é principalmente a conversa.

O que a interface de um chatbot deve ter?

Um nome e um avatar claros, uma primeira resposta que diga quem está falando e com o que pode ajudar, mensagens curtas, fotos ou links só quando respondem à pergunta, um ritmo natural, uma resposta para quando o bot não sabe e um caminho visível até uma pessoa.

O chatbot deve usar botões ou texto livre?

Bots baseados em regras precisam de botões porque não entendem perguntas digitadas. Agentes de IA entendem, então a pessoa pode simplesmente perguntar. O Agente de IA do Chatfuel responde a texto livre e escreve opções na resposta quando elas ajudam, como dois horários livres para agendar, em vez de mostrar menus de botões.

Posso personalizar o widget de chat do Chatfuel?

Sim. Em Configurações › Plataformas › Site, você define o nome (até 30 caracteres), a imagem e uma de seis cores de destaque, adiciona seus domínios e copia o código de instalação. A saudação e o tom vêm das Instruções de IA da automação Chats do site. O pequeno botão de chat no canto da página sempre mostra o ícone do Chatfuel.

Quais ferramentas são usadas para desenhar a interface de um chatbot?

Designers usam o Figma (inclusive o Figma Make para protótipos clicáveis), o Sketch no Mac, o Penpot, de código aberto, e plataformas de design de conversa como o Voiceflow. Com um agente de IA, o protótipo mais rápido é um chat de teste: no Chatfuel, Testar automação usa suas configurações e sua base de conhecimento reais sem enviar mensagens para clientes.

Como testar a interface de um chatbot?

Faça o papel do cliente antes do lançamento: faça as perguntas mais comuns, tente agendar, peça para falar com uma pessoa e escreva com erros de digitação. Depois do lançamento, leia os chats reais toda semana, peça avaliações rápidas e observe algumas pessoas concluindo uma tarefa no celular.