Chats
How to Create a WhatsApp-Style Chat Screenshot
A practical walkthrough for WhatsApp-style chat mockups: ticks, bubble tails, date chips, voice notes, group names and dark mode — with examples.
By The Mocknex team · Published · Updated · 7 min read
WhatsApp-style screenshots are the most requested chat mockup by a long way — they show up in sketches, story videos, explainer content and safety lessons. The design is familiar to billions of people, which cuts both ways: viewers recognise it instantly, and they notice immediately when something is off.
This walkthrough explains the conventions to get right and how to build the screenshot with our WhatsApp-style chat generator.
Anatomy of a WhatsApp chat screen
- Header: back arrow (with an unread count if you like), round profile photo, name, and a status line underneath — “online”, “typing…” or “last seen today at 9:12”. Video and voice call buttons on the right.
- Wallpaper: a beige background with a faint doodle pattern in light mode, near-black in dark mode.
- Bubbles: your messages in pale green on the right, theirs in white on the left. The first bubble in a run has a small pointed tail at the top corner.
- Meta inside the bubble: the time and ticks sit in the bottom-right corner of each bubble, not under it.
- Date chips: small rounded labels like “Today” or “Yesterday” centred between messages.
- Composer: a plus button, the message field with a sticker icon, then camera and microphone.
The ticks, explained
Getting the ticks right is the most important WhatsApp detail. Every one of your messages shows one of these states:
| Receipt | Looks like | Meaning in your story |
|---|---|---|
| Sending | A small clock | Bad signal; the message hasn’t left the phone yet |
| Sent | One grey tick | Sent, but their phone is off or offline |
| Delivered | Two grey ticks | On their phone, not opened |
| Read | Two blue ticks | They’ve opened the chat |
A common storytelling trick is blue ticks on everything except the newest message, which stays grey — or blue ticks on the newest message with no reply underneath. Both say something without any extra words.
Step by step
- Open the generator. It starts with a sample chat you can edit or replace.
- Type the contact name and upload a photo (or leave initials). Pick a status line.
- Write messages directly, or open Messages → Bulk edit and paste lines like
Jamal: did you book the restaurant?. - For each of your messages, open “Time, receipts, reactions, reply” and set the time and the tick state.
- Add a date chip where a day changes: choose More → Date separator above the message box.
- Open the Settings section: battery, clock and network should match the scene.
- Download the PNG. At 3× quality it’s the size of a real iPhone screenshot.
Voice notes, replies, polls and groups
Voice notes show a play button, a waveform and a duration, with the sender’s photo beside them. Long durations are a reliable joke — the voice message generator starts with a run of them.
Quoted replies appear as a tinted box inside the bubble with a coloured bar and the original sender’s name. Use them when a reply could be ambiguous.
Polls fit group chats: a question, options with radio circles, vote counts and bars.
Groups put each sender’s name in colour inside the top of their first bubble, not above it. Admins get a small label. The group chat generator starts with a four-person group, and our group chat guide covers writing several voices.
Dark mode tips
Dark mode uses a deep green for your bubbles and dark slate for theirs. It looks great over video, but watch out for bright profile photos and white stickers — they jump out. If you’re placing the screenshot in a video, export with the TikTok / Reels / Shorts preset and a dark background so there’s no bright frame around the phone.