CodeKitHubO que é esta ferramenta?
O Gerador de Chat do Messenger é uma ferramenta de mockup baseada no navegador que recria a interface do Facebook Messenger — seus característicos balões de saída azuis com cantos arredondados, a barra superior com nome do contato e a linha de status "Ativo(a) agora", e a barra de status do telefone — para você digitar sua própria conversa e exportar como uma imagem para compartilhar.
Os balões de saída do Messenger usam um azul sólido característico, e este gerador reproduz esse visual por padrão, enquanto o botão de tema claro/escuro ajusta o restante da interface para combinar com qualquer um dos dois modos de aparência do Messenger.
Apenas para entretenimento e design: esta ferramenta foi feita para piadas, memes, esquetes, slides de apresentação, protótipos de UI/UX e conteúdo para redes sociais. Nunca deve ser usada para fabricar provas fraudulentas, assediar ou difamar alguém, ou se passar pelas mensagens reais de uma pessoa de verdade — isso pode ser ilegal dependendo da sua jurisdição e vai contra o uso pretendido desta ferramenta.
Nada do que você digita sai do seu dispositivo — toda a conversa é desenhada com a API HTML Canvas diretamente no navegador, e o PNG é gerado e baixado localmente. Não há envio a servidor, nem conta, nem rastreamento do conteúdo das suas mensagens.
Por que usar?
- Você quer fazer um vídeo de humor sobre aquele grupo de amigos no Facebook, mas usar print de uma conversa real do Messenger pega mal — dá pra criar tudo do zero com nomes e falas fictícias.
- Numa proposta de UI de app, você quer mostrar ao cliente como fica uma notificação estilo Messenger, sem precisar tirar print de verdade no celular — inclusive com marca de "visto" e status "Ativo(a) agora".
- Um vídeo curto de comédia sobre "aquele Zap... digo, Messenger que ficou sem resposta" precisa de uma tela realista, mas expor uma conversa de verdade não é legal — aqui dá pra montar tudo fictício desde o início.
- Você precisa mostrar o mesmo mockup de chat estilo Messenger em modo claro e escuro num material de design, e refazer o print duas vezes no celular seria trabalhoso — basta alternar o tema aqui.
- Você está planejando uma pegadinha ou surpresa para um amigo e quer testar antes o texto e o visual da conversa, sem precisar mandar de verdade.
- Tudo roda no navegador — se o texto e as fotos que você digita não podem ir parar em servidor nenhum, essa renderização local resolve.
Como usar
- Defina o nome do contato, o texto de status (ex.: "Ativo(a) agora") e escolha o tema claro ou escuro.
- Envie uma foto para o avatar, ou deixe como um círculo colorido com iniciais.
- Adicione linhas de mensagem: digite o texto, escolha um lado (ele/eu) e um horário.
- Para suas próprias mensagens, escolha o status de leitura.
- Ajuste a barra de status (hora, bateria, sinal) como preferir.
- Veja a prévia em forma de telefone atualizar ao vivo e clique em "Baixar PNG" para salvar a imagem.
Exemplo
Entrada
Contato: "Alex" · Status: "Ativo(a) agora" · Mensagem 1 (ele): "A gente ainda vai hoje à noite?" · Mensagem 2 (eu, lida): "Vou sim! Te vejo às 8 😊"Resultado
Uma imagem PNG de 375×812 mostrando uma tela estilo Messenger: cabeçalho com "Alex" e "Ativo(a) agora", um balão cinza claro à esquerda com a primeira mensagem, e um balão azul arredondado à direita com a resposta.A imagem é gerada instantaneamente no canvas de prévia ao vivo e é baixada com um clique — sem espera, sem upload.
O que você pode personalizar
- Nome do contato, texto de status e tema claro/escuro.
- Avatar: envie uma foto de verdade (recortada em círculo) ou escolha uma cor padrão.
- Linhas de mensagem ilimitadas, cada uma com seu próprio texto, lado (ele/eu) e horário.
- Status de leitura por mensagem enviada.
- Barra de status do telefone: hora, porcentagem de bateria e força do sinal.
Uso responsável
Este gerador existe para facilitar a criação de imagens de chat claramente fictícias para humor, storytelling e trabalhos de design. Não é uma ferramenta para fabricar provas, encenar assédio ou fazer alguém acreditar que uma conversa falsa é real. Se você planeja compartilhar uma imagem feita com esta ferramenta, considere adicionar um contexto (como "fake" ou "mockup") para que quem veja entenda que não é uma conversa real.
Detalhes visuais do estilo Messenger
| Elemento | Como o Messenger faz | Como configurar aqui |
|---|---|---|
| Balão próprio | Azul sólido, alinhado à direita, cantos arredondados | Aplicado automaticamente conforme o tema |
| Balão do contato | Fundo cinza claro, alinhado à esquerda | Basta marcar o lado como "ele/ela" |
| Barra superior | Nome do contato e status "Ativo(a) agora" | Texto de status totalmente editável |
| Marca de visto | Pequeno texto abaixo do balão, fora dele | Liga/desliga por mensagem enviada |
| Barra de status do telefone | Hora, sinal e bateria alinhados no topo | Editável manualmente, incluindo porcentagem |
Perguntas frequentes
É legal ou ético usar esta ferramenta?
A ferramenta em si é legal para uso em entretenimento, mockups, apresentações e trabalhos de design. O que não é legal nem ético é usar a imagem gerada para enganar alguém — por exemplo, apresentá-la como uma conversa real para cometer fraude, assediar ou difamar uma pessoa, ou se passar pelas mensagens reais de alguém. Use apenas para fins claramente fictícios ou ilustrativos.
A ferramenta envia minhas mensagens ou foto para algum lugar?
Não. Cada mensagem, nome, foto e configuração que você insere permanece na memória do seu navegador e é desenhada diretamente em um elemento canvas usando JavaScript. O arquivo PNG é gerado e baixado no seu dispositivo — nada é enviado a nenhum servidor.
Devo usar esta ferramenta ou o gerador de chat do WhatsApp/Signal?
Se a cena que você está montando é especificamente ambientada no Facebook Messenger — com balões azuis e a linha de status "Ativo(a) agora" — use esta ferramenta para que a interface combine. Se você só precisa de um print de mensagens genérico para um meme sem a identidade visual do Messenger, o Gerador de Chat Personalizado permite escolher suas próprias cores de balão; se a cena precisa parecer especificamente WhatsApp ou Signal, use aqueles geradores dedicados para que os detalhes da plataforma (cores, marcas de confirmação, estilo do cabeçalho) combinem com o que o público espera.
Posso enviar uma foto de verdade como avatar?
Sim. Clique em "Enviar foto" para usar qualquer imagem do seu dispositivo como avatar do contato — ela é recortada automaticamente em círculo. Se você pular essa etapa, o avatar volta a ser um círculo colorido com as iniciais do contato. A foto é usada apenas localmente no seu navegador e nunca é enviada a lugar nenhum.
Qual o tamanho da imagem exportada?
A prévia e o PNG exportado usam uma proporção de tela de celular (375×812 por padrão), que fica natural ao compartilhar em redes sociais ou incorporar em uma apresentação.
Dá pra usar outro texto de status além de "Ativo(a) agora"?
Sim. O campo de status é de texto livre, então além de "Ativo(a) agora" você pode colocar "Ativo(a) há 5 min", "Offline" ou qualquer outra variação que aparece de verdade no Messenger.
Como funciona o status de "visto" em cada mensagem?
Você escolhe o status de leitura individualmente para cada mensagem que enviar. Isso permite reproduzir tanto o clássico "enviei e não foi visto" quanto a resposta instantânea de quem já viu — útil para piadas sobre ser ignorado ou sobre respostas rápidas demais.
Dá pra juntar o modo claro e o escuro numa imagem só?
Cada exportação reflete um tema por vez. Se você quer mostrar os dois, o mais prático é baixar dois PNGs (um em cada tema) e depois juntá-los lado a lado num editor de imagem.
Alguém pode confundir a imagem gerada com um print real do Messenger?
Visualmente, sim — o objetivo é reproduzir a interface com fidelidade. Por isso é responsabilidade de quem publica deixar claro que é uma montagem, por exemplo com uma legenda como "fake" ou "mockup". Usar nomes de pessoas reais e mensagens reais delas para fazer a imagem parecer autêntica está fora do uso pretendido desta ferramenta.