How to create a WhatsApp chat mockup in four steps
- Set the contact. Put the name in Contact → Name and add a status line —
online,typing…orlast seen today at 20:14— so the beige iOS header reads like a real thread. Skip the avatar and ChatMock draws the neutral grey initial circle WhatsApp uses for a contact with no photo. - Write the messages. Use + Alex and + Me to alternate speakers; each bubble can be flipped with the sender toggle and reordered with the arrows. Consecutive messages from one side stack together — only the first in a run keeps the little tail, the rest square off against it. Any photo message can take a caption.
- Set the blue ticks. The read state of each outgoing message is yours to choose: one grey tick for sent, two grey for delivered, two blue (
#53bdeb) for read. A thread left at two grey ticks is normal; a wall of blue reads as staged. - Export. Press Download PNG and choose a scale: 1x for a fast preview, 2x for screens and thumbnails, 3x when the image is headed for a poster or printed packaging. Leave Phone frame unticked for an ordinary capture, because a genuine screenshot never shows the handset itself; tick it only if you want the framed-device look for a hero image.
What makes a WhatsApp mockup actually look real
Most generators approximate the interface and hope nobody looks closely. WhatsApp users see this screen hundreds of times a day, so the tells are immediate: the wrong header, the wrong bubble colour, a tick that is the wrong shade of blue. On an iPhone the navigation bar is not green — it picks up the beige of the wallpaper, which is the single most-cloned mistake in WhatsApp mockups. Here are the values ChatMock uses, taken from the real app:
| Element | Light mode | Dark mode |
|---|---|---|
| Chat background | #efeae2 | #0b141a |
| Header bar (iPhone) | #efeae2 | #202c33 |
| Incoming bubble | #ffffff | #202c33 |
| Outgoing bubble | #d9fdd3 | #005c4b |
| Blue ticks | #53bdeb | #53bdeb |
| Timestamp / secondary text | #667781 | #8696a0 |
Three more details matter as much as colour. Bubble radius is 8px, not the 16–18px pill shape most clones use. Grouped messages lose their tail — only the first bubble in a consecutive run from the same sender gets the little corner notch, and its top corner is squared off where the notch sits. And bubbles cap at roughly 75% of the chat width; let them run wider and the screenshot instantly reads as fake.
Everything you can customise
- Contact name, status line and avatar photo
- Light or dark mode (both match the real app, not an inversion filter)
- Unlimited messages, reorderable, with per-message timestamps
- Read receipts: sent, delivered or read
- Image attachments with captions
- Date separator text (TODAY, YESTERDAY, or any label you need)
- Status bar: clock, battery percentage and signal strength
- Optional iPhone-style phone frame with the Dynamic Island
What a fake WhatsApp chat generator is — and what it isn't
People land on this page through different names: a fake WhatsApp chat generator, a fake WhatsApp conversation maker, a WhatsApp chat screenshot creator. They all describe the same tool — one that composes an image of a WhatsApp conversation without a real account, a real contact or a real phone. That is exactly what the editor above does: type the messages, set the ticks and timestamps, switch between light and dark mode, and download a finished PNG in seconds.
The word fake in that search describes the image, not the intent. A staged conversation is a prop — everyone watching the video or reading the slide understands it was composed, the same way they know a stock photo is not your office. What the word should never describe is an image presented as real correspondence. That distinction — not the technology — decides whether using a chat generator is harmless or harmful, and the section below shows what the harmless side looks like in practice.
What people use these mockups for
The honest answer: mostly legitimate, boring, creative work. YouTubers and TikTok creators use them to stage the setup of a story without doxxing a real conversation. Product designers drop them into wireframe presentations to show a messaging flow in a familiar shell. Teachers build dialogue exercises. Novelists and screenwriters draft scenes that play out over text. Support teams document what a good reply looks like without pasting a customer's real messages into a slide.
What settles it is intent. A mockup that illustrates, parodies or teaches is doing its job. The same picture used to convince someone that something happened which did not — a borrowed identity, an invented piece of evidence, a staged reply offered as real — is where it stops being acceptable, and we would rather not host that traffic. Our Acceptable Use Policy draws the line in detail, and this tool is deliberately useless as a bank-notice or legal-document factory.
Why nothing you type leaves this tab
The contact name, the status line and every message are drawn with plain HTML and CSS inside your browser, and the PNG is rasterised on your own machine before it lands in your downloads. There is no server in the loop, which is why you can load the page, kill your connection and carry on editing as though nothing changed — and why there is no gallery of other people's staged chats sitting anywhere on our side.
Other generators
ChatMock is expanding one platform at a time, because a mockup is only convincing when the small details are right. Also live: the iPhone text message generator, the group chat generator and the Messenger chat generator — the examples gallery lines their finished PNGs up side by side if you would rather look before you pick a platform.
For a deeper walkthrough of the details above, read the full WhatsApp chat screenshot guide on the blog.
Frequently asked questions
Is the WhatsApp chat generator free to use?
It is, and it stays that way. Nothing on this page asks for an account, an email address or a card, there is no cap on how many mockups you build, and the PNG you export carries no watermark or branding from us.
Do I need to install anything?
No app and no extension — the editor is a single web page. Open it in Chrome, Safari, Firefox or Edge on a laptop or a phone and everything, from the contact avatar to the blue ticks, is drawn live inside the tab.
Where does the conversation go when I export it?
Straight to your own downloads folder and nowhere else. The thread is painted by your browser and the PNG is encoded on your own machine, so no copy of the names, messages or avatars is ever posted anywhere. Pull the network cable after the page has loaded and the editor carries on as if nothing happened.
What do the single, double and blue ticks mean?
WhatsApp has three states and this editor exposes every one of them: a single grey tick is sent, two grey ticks are delivered, and two blue ticks (#53bdeb) mean read. Plenty of mockup tools flatten all three into one look, which is exactly the kind of slip that makes a screenshot feel wrong.
Why is the iPhone header beige instead of WhatsApp green?
Because on iOS the chat header takes its tint from the wallpaper, not from the brand green — against the stock background it reads as a warm beige. Painting that bar bright green is the single most common mistake in WhatsApp mockups, and this page avoids it on purpose.
Why are the bubble corners tighter than in other tools?
Real WhatsApp bubbles use an 8px corner radius. Many generators round them into a pill, closer to 16 or 18px, which looks fine on its own and instantly wrong beside the real app. Here you get the correct, tighter geometry.
Can I attach a photo to a message?
Yes. Any bubble can carry an image, read straight from your device and shown above whatever caption you type, with WhatsApp's own corner treatment. There is no separate upload step and nothing is sent to an image host.
May I use the finished mockups in commercial work?
For honest uses — a video, a pitch deck, a course, a novel, a design comp — yes, freely. The limit is deception: offering a composed image as somebody's real correspondence is where it stops being acceptable, and our Acceptable Use Policy spells that boundary out in full.