How to create a Messenger mockup in four steps
- Set the contact. Type a name into Contact → Name and upload an avatar if you want one. The avatar shows in the header and hangs beside your contact's message groups — without a photo, ChatMock draws a blue-gradient initial circle like the real default.
- Write the conversation. Add messages with + Alex or + Me, flip each one between the two sides, reorder with the arrows. Uploading an image turns that message into a photo bubble with a caption.
- Set the Seen status. Under Contact → Delivery, write
Seen, a time, or clear the field. The line appears under your last outgoing message only. Detail worth knowing: a conversation that ends on your message with no Seen line reads as “they never opened it” — useful for specific scenes. - Export. Pick 1x, 2x or 3x and hit Download PNG. Exports are plain screen captures by default — a real screenshot never includes the phone body. Tick Phone frame only when you want a device-mockup look for a thumbnail, slide or design.
What makes a Messenger screenshot actually look real
Messenger looks simple and is surprisingly easy to get wrong, because almost all of its identity is in geometry rather than colour. Here are the values ChatMock uses, taken from the real app:
| Element | Light mode | Dark mode |
|---|---|---|
| Chat background | #ffffff | #000000 |
| Outgoing bubble | #0084ff — the same blue in both modes | |
| Incoming bubble | #e4e6eb | #303031 |
| Bubble shape | 18px capsules with no tails; in a run of messages, the first and last bubbles narrow to 6px on the sender's side | |
| Contact avatar | Beside the last bubble of each of their groups — not every bubble | |
| Seen / time labels | Small grey text under the message groups, never inside bubbles | |
The single biggest tell in fake Messenger screenshots is bubble geometry. Real Messenger bubbles are tail-less capsules, and consecutive messages visually “stack” by squaring the corners where the group starts and ends. Fake ones usually copy the iMessage tail or round every corner to 18px, and either choice is spotted in a second. The second tell is the avatar: in the real app it appears once per message group, not once per message.
Everything you can customise
- Contact name and avatar photo
- Header status line (Active now, or anything else)
- Light or dark mode, both matching the real app
- Unlimited messages, reorderable, either side
- Seen status text under the last outgoing message
- Image attachments with captions
- Date line at the top of the thread
- Status bar: clock, carrier, battery and signal
- Optional iPhone-style phone frame
What people use Messenger mockups for
Messenger threads show up constantly in video work because the interface is familiar to billions of people and reads clearly even at thumbnail size. Creators use it to stage conversations for sketches without publishing anyone's real messages. Designers demonstrate reply flows and auto-reply behaviour. Teachers build dialogue exercises. Writers draft scenes that unfold over chat. The common thread is that the audience knows the conversation is illustrative.
The line, as always, is intent. Illustrating, parodying, teaching and designing are fine. Using a fabricated conversation to deceive someone, harass a person, impersonate someone or fabricate evidence is not — and this site deliberately offers no templates for fake bank, government, medical or legal notices. The Acceptable Use Policy has the full boundary.
Why it runs entirely in your browser
Everything is rendered locally with plain HTML and CSS, and the PNG is generated on your device — nothing is transmitted, stored or logged. That is also why the editor keeps working if you switch off your wifi after loading the page, and why there is no gallery of other people's staged conversations anywhere on our servers.
Other generators
ChatMock covers the platforms people actually search for, one at a time: the WhatsApp chat generator, the iPhone text message generator and the group chat generator with coloured sender names are all live. See the generator index for the full list.
Frequently asked questions
Is this Messenger chat generator free?
Yes — no signup, no email wall, no daily limit and no watermark on the export. PNG download at 1x, 2x or 3x resolution is free, as is every editing feature on the page.
What does the Seen status mean and can I change it?
In Messenger, Seen appears under your last outgoing message once the other person has read it. In the editor, the Delivery field controls that line: write Seen, leave a time, or clear it entirely to show a conversation the other person has not opened yet. The line only ever appears under the final outgoing message, the same rule the real app follows.
Why are there no timestamps inside the bubbles?
Messenger does not work that way. Time labels sit under each group of messages as small grey text, not inside the bubbles. Generators that stamp every bubble get this wrong, and it is one of the quickest tells of a fake screenshot.
Why does the avatar appear next to only some messages?
Because that is the real behaviour: your contact's avatar hangs beside the last bubble of each of their message groups, not next to every bubble. Repeating the avatar on every message is a common mistake in low-quality generators.
Is my conversation uploaded to a server?
No. The mockup is rendered entirely on your device, and the PNG is generated in your browser and saved directly to your downloads. Names, messages and uploaded images never leave your computer or phone — you can disconnect from the internet after loading the page and keep working.
What resolution can I export?
1x (390px wide), 2x (780px) or 3x (1170px). For YouTube thumbnails, blog posts and presentations, 2x is usually the right balance of sharpness and file size. Use 3x for print or when the screenshot will be zoomed into.
Can I use the mockups commercially?
Yes, for legitimate creative work: videos, presentations, teaching material, fiction and design. You may not use them to deceive, defraud, harass, impersonate anyone or fabricate evidence. See the Acceptable Use Policy for the full boundary.