Generador gratis de chat falso de WhatsApp
Crea un mockup realista de conversación estilo WhatsApp y descárgalo como PNG. Escribe los dos lados del chat y elige el nombre del contacto, las palomitas, las horas y el tema claro u oscuro. Gratis, sin registro y todo funciona en tu navegador. Solo para parodia, mockups y bocetos de diseño.
Crea tu mockup de chat de WhatsApp
Solo para parodia, mockups, educación y bocetos de diseño. No lo uses para suplantar a personas reales, falsificar pruebas ni engañar a nadie sobre una conversación real de WhatsApp.
Este chat puede ser un widget en vivo
Ver cómo →Empieza conversaciones reales en tu sitio
Acabas de diseñar un mockup de chat. Estos widgets gratis de CommonNinja convierten el chat en un canal real en tu sitio web, sin código.
Chat de WhatsApp
Pon un botón de chat de WhatsApp real en tu sitio web para que los visitantes te escriban con un toque, desde la misma página que ya están leyendo.
All In One ChatEN
Un botón flotante, todos los canales. Deja que te contacten por WhatsApp, Messenger, Telegram o correo desde un solo widget.
AI ChatbotEN
Responde automáticamente las preguntas que te hacen todo el día y pasa las difíciles a una conversación real contigo.
Social Share ButtonsEN
Haz que compartir tu página esté a un toque para los visitantes. Cada vez que alguien comparte, el gráfico que acabas de crear llega más allá de tu propia audiencia.
Explora más herramientas gratis
Otras herramientas gratis para contenido social y mockups.
Free Fake Telegram Chat GeneratorEN
Diseña un mockup de chat estilo Telegram en modo claro u oscuro y expórtalo como un PNG limpio.
Usar herramienta →Free Fake Messenger Chat GeneratorEN
Crea un mockup de conversación estilo Messenger con burbujas azules redondeadas. Gratis, en tu navegador.
Usar herramienta →Free Fake Reddit Post GeneratorEN
Crea un mockup de publicación estilo Reddit con votos, premios y una sección de comentarios en hilo. Exporta un PNG.
Usar herramienta →Free Fake Tweet & X Post GeneratorEN
Crea capturas realistas de publicaciones de X (Twitter) con vistas, niveles de verificación y guardados. Descarga un PNG limpio.
Usar herramienta →Free Fake Text Message GeneratorEN
Crea un mockup de mensaje de texto de iPhone con burbujas azules de iMessage o verdes de SMS, reacciones y un aviso de Leído.
Usar herramienta →Free Fake Facebook Post GeneratorEN
Crea un mockup de publicación de Facebook con reacciones, veces compartido y un hilo de comentarios. Exporta un PNG.
Usar herramienta →Free Fake Instagram Post GeneratorEN
Diseña un mockup de publicación de Instagram con tu propia foto, descripción, me gusta y comentarios.
Usar herramienta →Free Fake Instagram DM GeneratorEN
Crea un mockup de DM de Instagram con burbujas en degradado, reacciones de corazón y la etiqueta Visto.
Usar herramienta →Free Fake Snapchat GeneratorEN
Crea un mockup de chat de Snapchat con barras laterales de color, un snap score y un estado en cada fila.
Usar herramienta →Free Text Behind Image MakerEN
Coloca texto grande detrás de tu sujeto con un clic. Recorte automático, sin registro, todo en tu navegador.
Usar herramienta →Free Fake ChatGPT GeneratorEN
Crea un mockup de conversación estilo ChatGPT en modo claro u oscuro, con filas de razonamiento y bloques de código.
Usar herramienta →Free Fake Gemini GeneratorEN
Diseña un mockup de chat de IA estilo Gemini con el destello, inicios en negrita y una exportación limpia a PNG.
Usar herramienta →Free Fake Google AI Overview GeneratorEN
Crea un mockup de una tarjeta de AI Overview de Google con barra de búsqueda, respuesta en viñetas y fuentes citadas.
Usar herramienta →Cómo funciona
Cómo hacer un mockup de chat de WhatsApp
Sin cuenta, sin registro, totalmente gratis. El mockup se dibuja en vivo y el PNG se genera en tu navegador, así que ni tu texto ni tu imagen se suben nunca a un servidor.
Escribe la conversación
Agrega un mensaje, márcalo como Contacto o Tú y escribe el texto. Cambia el orden de las líneas con las flechas y ponle una hora a cada una.
Dale estilo a la pantalla
Elige el nombre del contacto y la línea de estado, sube una foto de perfil, elige claro u oscuro, y activa o desactiva el fondo, las palomitas, las horas y los puntos de escritura.
Descarga el PNG
Un clic exporta un PNG nítido a 2x con un ancho fijo de teléfono, listo para una diapositiva, un storyboard, el boceto de una landing page o un meme.
Los detalles
Qué hace que un mockup de chat se vea real
Una captura de chat convincente casi nunca depende de los colores. Depende del ritmo de la conversación y de que los pequeños detalles coincidan entre sí.
líneas cortas + turnos disparejos + minutos de diferencia = ritmo real
La gente chatea en fragmentos. Mandan dos mensajes seguidos, contestan tarde y casi nunca escriben un párrafo completo. Copia ese ritmo y el mockup se lee como una captura de pantalla. Escríbelo como un correo y se lee como un borrador.
La otra mitad es la coherencia. Si el encabezado dice en línea, la última respuesta debe ser reciente. Si el estado de entrega dice leído, el mensaje más nuevo debe ser uno que tú enviaste. Cada uno de esos detalles es pequeño por sí solo, y cada uno es lo primero que nota quien lo lee cuando está mal.
Vale la pena decirlo claro: un estilo creíble es para trabajo de diseño. Nunca es una razón para presentar un mockup como una conversación real. Mantenlo como un gráfico, indícalo cuando importe e inventa todos los nombres que aparezcan.
Ajustes
Cada ajuste y cuándo usarlo
Seis controles definen el aspecto de la exportación. Esto es lo que hace cada uno y el trabajo para el que mejor sirve.
| Ajuste | Qué hace | Ideal para |
|---|---|---|
| Tema claro | Fondo de chat beige, burbujas entrantes blancas y burbujas salientes verde pálido | Artículos de blog, presentaciones y cualquier cosa que vaya sobre una página blanca Más usado |
| Tema oscuro | Fondo casi negro con burbujas salientes verde oscuro | Reels, miniaturas y fotos de producto que necesitan mucho contraste Según el caso |
| Fondo del chat | Textura tenue con patrón detrás de las burbujas | Capturas que deben parecer un teléfono real y no un gráfico plano Según el caso |
| Palomitas de entrega | Una palomita para enviado, dos para entregado y dos en azul para leído | Mostrar si el último mensaje se envió, se entregó o se leyó Más usado |
| Indicador de escritura | Tres puntos en una burbuja al final de la conversación | Mockups con suspenso donde la respuesta todavía está por llegar Según el caso |
| Barra de estado | Reloj, barras de señal y batería en la parte superior | Aspecto de captura de pantalla completa del teléfono. Desactívala para una tarjeta más limpia en una presentación Según el caso |
Los temas siguen las paletas claras y oscuras comunes de las apps de mensajería en 2026. Esta herramienta no está afiliada ni respaldada por ninguna plataforma de mensajería.
Úsalo bien
Buenos usos, y los dos que nunca debes tocar
Un mockup de chat es un recurso de diseño. Estos son los trabajos de todos los días para los que está hecho, y los usos que lo convierten en algo completamente distinto.
| Escenario | Qué es | Veredicto |
|---|---|---|
| Mockups de apps y sitios web | Conversaciones de relleno en un boceto de producto, un flujo de bienvenida o la demo de una función de chat | Buen uso |
| Capacitación de soporte y ventas | Mostrarle a tu equipo cómo se ve una buena respuesta a un cliente, con nombres inventados | Buen uso |
| Memes y sketches | Intercambios claramente humorísticos entre personajes inventados | Buen uso |
| Storyboards y guiones | Visualizar una escena de chat para un video, un anuncio o un ejercicio de clase | Buen uso |
| Falsificar pruebas | Presentar un mockup como una conversación real en una disputa, un reclamo o un asunto judicial | Nunca |
| Suplantación o estafas | Hacer que parezca que una persona, marca o banco real dijo algo que nunca dijo | Nunca |
Evita esto
Lo que delata un mockup, y la línea que nunca debes cruzar
Cuatro de estos son cuestión de oficio. Los dos primeros no son negociables. Léelos antes de exportar cualquier cosa que vaya a salir de tu propia pantalla.
Hacerlo pasar por una prueba real
La única regla que importa más que todos los consejos de diseño de esta página. Un mockup no es registro de nada. Usarlo para respaldar un reclamo, ganar una discusión o engañar a un empleador, una plataforma o un tribunal es fraude, no diseño.
Nunca lo presentes como realUsar una persona o marca real
Un nombre real, un logo real o un número de teléfono real en el encabezado convierte un boceto de diseño en suplantación. Mejor inventa el contacto. No cuesta nada y mantiene limpio el mockup.
Inventa el contactoHoras que se contradicen
Respuestas que llegan antes que el mensaje al que responden, o una conversación que salta horas entre dos frases, rompen la ilusión al instante. Haz que las horas avancen en pasos pequeños.
Mantén las horas en ordenPalomitas del lado equivocado
Las palomitas de entrega solo aparecen en los mensajes que enviaste, nunca en los que recibiste. Esta herramienta sigue esa regla, así que deja como último un mensaje saliente si las palomitas son lo importante de la imagen.
Palomitas solo en salientesEscribir demasiado formal
Un chat real es corto, en minúsculas y un poco desordenado. Párrafos completos con puntuación perfecta parecen texto publicitario, y eso es justo lo que hace que un mockup se vea armado.
Escribe como la gente chateaEl tema equivocado para la página
Un mockup claro sobre una diapositiva blanca parece flotar, y uno oscuro en un reel oscuro desaparece. Elige el tema según dónde va a vivir la imagen, no según lo que se ve bonito en el editor.
Ajusta el tema al contextoBuenas prácticas
8 consejos para un mockup de chat que funcione
Todos los widgets de CommonNinja que se mencionan abajo son gratis para empezar. Aplica estos consejos mientras escribes la conversación y después de colocar la imagen.
01
Inventa un nombre sencillo y fácil de olvidar
Un nombre y apellido genéricos mantienen la atención en el texto de los mensajes y te alejan de cualquier cosa que parezca un contacto real.
02
Alterna los lados de forma natural
Las conversaciones reales son disparejas. Dos mensajes rápidos de una persona y luego una respuesta más larga se ven mucho más reales que un ida y vuelta ordenado en cada línea.
03
Separa las horas por minutos
Pon el primer mensaje unos minutos antes que el último. Respuestas en el mismo minuto durante toda la conversación son la forma más rápida de detectar un mockup.
04
Termina en el estado que quieres mostrar
Si la historia es “lo leyó y no contestó”, termina con un mensaje saliente y pon el estado de entrega en Leído. Si es “está respondiendo”, activa el indicador de escritura.
05
Desactiva la barra de estado en presentaciones
El reloj y la batería venden una captura de teléfono, pero estorban en una diapositiva. Quítalos cuando el mockup va dentro de otro marco o de la imagen de un dispositivo.
06
Lleva el chat real a tu propio sitio
Un mockup muestra cómo podría verse una conversación. Un botón de chat inicia la real, desde cualquier página en la que ya esté un visitante.
Agrega el chat de WhatsApp gratis →07
Ofrece todos los canales a la vez
No todos escriben de la misma forma. Un solo botón flotante puede ofrecer WhatsApp, Messenger, Telegram y correo, para que los visitantes elijan el que ya usan.
Agrega All In One Chat gratis →EN08
Indica que es un mockup
En un artículo, una presentación o un pitch, un pie de foto corto que diga que la conversación es un mockup de diseño elimina cualquier duda y no te cuesta nada.
Glosario
Términos de mockups de chat, en breve
Seis términos que aparecen cada vez que diseñas una captura de mensajería. Útiles si los haces para un equipo.
Del blog
Más lecturas sobre chat y mensajería
Más del blog de CommonNinja (en inglés). Gratis, sin registro, solo artículos prácticos sobre cómo hablar con tus clientes donde ya están.
Building a Chat Application With Svelte and Firebase
In this article, we are going to discuss how to build a chat application with Svelte and Firebase.
Leer artículo →EN10 Reasons Why a Chatbot Is Essential in an E-Commerce Store
In this article, we’ll explain why a chatbot is essential to an e-commerce store
Leer artículo →ENHow to Use Social Media to Drive Traffic to Your Website
In this article, we are going to discuss how to use social media to drive traffic to your website.
Leer artículo →ENHow to Promote Your Bracket Tournament on Social Media
In this article, we explore using social media to promote tournament brackets, discussing strategies for crafting...
Leer artículo →ENTop WhatsApp Chat Button Widgets (Plugins) for Websites in 2026
In this article, we are going to discuss the top WhatsApp Chat Button widgets for your website. We’ll present a list of...
Leer artículo →ENTop Telegram Chat Widgets (Plugins) for Websites in 2026
In this article, we are going to discuss the top Telegram Chat widgets for your website. We’ll present a list of...
Leer artículo →EN