Social Chat Generator
Mock up a WhatsApp or Instagram conversation — contact name, avatar, verified badge and messages — and export it as a high-resolution PNG for slides, mockups and case studies.
Optional. Replaces the initial in the avatar, on the left.
Ctrl + Enter adds your message. Message text is escaped before it reaches the preview.
Sarah Jenkins
✔online
The frame above is a mockup drawn in the page — it is not a real WhatsApp or Instagram capture, and the exported image is a picture of this mockup.
What this tool does
It draws a phone-shaped chat preview — WhatsApp or Instagram — from fields you control: the contact name, the profile photo, whether the verified tick shows, the message text and the timestamp. Then it rasterises that preview at three times its on-screen size and hands you a PNG. Designers use this for app mockups, social media carousels, UI case studies and conference slides, where a realistic-looking conversation communicates a product idea far faster than a description of one.
Be clear about what this is: a mockup generator, not a screenshot tool. The frame is redrawn in your browser, so the exported image will not match a genuine capture pixel for pixel, and the messages are whatever you type. That also means it is trivially abusable, and the line is worth stating plainly — fabricating a conversation and presenting it as real is fraud, and attributing invented words to a real person is defamation. Use it to illustrate, not to deceive.
How to use it
- Pick the platform with the WhatsApp / Instagram tabs. The whole preview restyles, including the bubble shapes.
- Type the contact name. The preview header, the initial in the avatar, and the "their message" button label all follow it.
- Optionally upload a profile photo to replace the initial, and tick Show verified badge for the blue tick.
- Write a message and a timestamp, then use Their Message or My Message to place it on the left or right. Repeat to build the conversation.
- Click Download HD Chat Image. The filename records the platform and timestamp so successive exports do not overwrite each other.
Common use cases
-
Product and UX mockups
Show how a conversation flow or notification would look inside a chat app.
-
Social media carousels
Illustrate a customer-support story or a "what clients say" slide with a visual.
-
Presentations and pitches
Communicate a messaging feature to stakeholders without building a prototype first.
-
Teaching and training material
Demonstrate a phishing pattern or a scam script safely, using invented content.
Frequently asked questions
Can I use these chat mockups commercially?
You own the images you generate, but the WhatsApp and Instagram names, logos and interface designs belong to Meta. Mockups are fine for illustrating a concept, a presentation or a UI case study. Do not use them to fabricate evidence, impersonate a real person, or imply that a real company or individual said something they did not — that can be fraud, defamation or a terms-of-service violation.
How do I get a clean, high-resolution export?
The export renders the phone preview at three times its on-screen size, so the PNG is sharp enough for slides and print. Crop to the phone frame afterwards if you want the mockup to sit on a plain background.
Why is my uploaded avatar missing from the exported image?
Custom avatars are loaded from your disk as data URLs, which canvas can always read. The failure case is a small number of browsers refusing to paint a background image at the moment of capture; if the avatar comes out blank, re-upload it and export again.