How to create a Messenger mockup in four steps
- Set the contact. Type the name into Contact → Name and add a header line such as
Active now. Drop in an avatar and it shows beside the name and next to the last bubble of each of their groups; leave it out and ChatMock draws the blue-gradient initial circle. - Write the thread. Add rows with + Alex or + Me and switch a message's side with the sender toggle. Messenger stacks a run from one person by squaring the corners where the group starts and ends, and the contact's picture hangs beside that group's final bubble only — never beside every line. Photos attach straight to a bubble with a caption.
- Set the Seen line. Contact → Delivery drives the small grey Seen note under your final outgoing message; type
Seen, a time, or clear the field. Messenger only ever labels the last message you sent, so a thread with no Seen line reads as one the other person has not opened. - Export. Choose the multiplier that matches the destination — 1x for a rough draft, 2x for a blog header or thumbnail, 3x for anything that will be enlarged — then press Download PNG. Phone frame stays off unless you switch it on, which hands you the flat, phone-free rectangle a real capture produces; turning it on wraps the thread in a device outline for mockup shots.
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, 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 intent behind the image is what decides. A thread composed to illustrate, parody, teach or design sits on the right side of it; the same thread dressed up as a genuine exchange, used to mislead, to harass, to pass as another person, or to manufacture evidence, does not — and this site offers no bank, government, medical or legal notice templates. Read the Acceptable Use Policy for the whole rule.
Handled entirely on your own device
The contact's name, the thread and the Seen line never cross the network — a Messenger mockup here is painted by your browser with plain HTML and CSS, and the PNG is encoded locally before it is saved to your downloads. Switch your wifi off after the page loads and the editor keeps going, which is the simplest proof that nothing is being sent anywhere.
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. Once you have a thread you like, the examples page is the quickest way to see how it compares with the other platforms.
Frequently asked questions
Does the Messenger chat generator cost anything?
Nothing. There is no account, no email wall, no daily ceiling and no watermark stamped on the export — every control in the editor, the Seen line included, is open and free.
What does the Seen line actually track?
In Messenger, Seen appears under your last outgoing message once the recipient has opened the thread. The Delivery field drives that line: write Seen, add a time, or clear it. It only ever attaches to the final message you sent, never to earlier ones — the same rule the real app follows.
Why is there no clock inside the bubbles?
Because Messenger does not draw one there. Time labels sit beneath each group of messages as small grey text instead of inside the bubbles. Tools that stamp a timestamp into every bubble are easy to spot, and it is one of the quickest tells of a staged screenshot.
Why does the avatar sit beside only some messages?
That is the genuine behaviour, not a flaw: your contact's picture hangs next to the last bubble of each of their groups rather than beside every single message. Repeating it on every bubble is a mistake low-effort generators make constantly.
Does anything I type reach a Facebook or Messenger server?
No. The thread is drawn by your own browser and the PNG is encoded on your own device before it lands in your downloads. Names, messages and any picture you load never travel over the network, so you can cut your connection after the page opens and keep working offline.
Why do the bubbles look like capsules without tails?
Real Messenger bubbles are 18px capsules with no tails at all; inside a run of messages the first and last bubble narrow to 6px on the sender's side so the group appears to stack. Copying an iMessage tail or rounding every corner to the same value is what makes most fakes look wrong.
What colour is the outgoing bubble in dark mode?
The same #0084ff blue as in light mode — Messenger keeps the sender bubble identical across themes rather than darkening it. Only the background and the incoming bubbles change, which is a detail generators that simply invert the palette get wrong.
Can I use Messenger mockups in commercial projects?
For legitimate work — videos, presentations, teaching, fiction, design — yes. What you may not do is present a fabricated thread as real, harass or impersonate anyone, or fake evidence, and the Acceptable Use Policy sets out the whole boundary.