Build a realistic WhatsApp-style conversation mockup and download it as a PNG. Write both sides of the chat, set the contact name, ticks, timestamps, and light or dark theme. Free, no sign-up, and everything runs in your browser. For parody, mockups, and design comps only.
For parody, mockups, education, and design comps only. Do not use this to impersonate real people, fake evidence, or mislead anyone about a real WhatsApp conversation.
You just designed a chat mockup. These free CommonNinja widgets turn chat into an actual channel on your website, no code needed.
Put a real WhatsApp chat button on your website so visitors can message you in one tap, straight from the page they are already reading.
One floating button, every channel. Let people reach you on WhatsApp, Messenger, Telegram, or email from a single widget.
Answer the questions you get asked all day automatically, then hand the tricky ones over to a real conversation with you.
Make it one tap for visitors to share your page. Every share sends the graphic you just made further than your own audience.
Other free tools for social content and mockups.
Design a Telegram-style chat mockup in light or dark mode and export it as a clean PNG.
Use Tool →Create a Messenger-style conversation mockup with blue pill bubbles. Free, in your browser.
Use Tool →Mock up a Reddit-style post with votes, awards, and a threaded comment section. Export a PNG.
Use Tool →Create realistic X (Twitter) post screenshots with views, checkmark tiers, and bookmarks. Download a clean PNG.
Use Tool →Build an iPhone text message mockup with blue iMessage or green SMS bubbles, reactions, and a Read receipt.
Use Tool →Mock up a Facebook post with reactions, shares, and a comment thread. Export a PNG.
Use Tool →Design an Instagram post mockup around your own photo, with caption, likes, and comments.
Use Tool →Build an Instagram DM mockup with gradient bubbles, heart reactions, and a Seen label.
Use Tool →Create a Snapchat chat mockup with colored side bars, a snap score, and a status on every row.
Use Tool →Place bold text behind your subject in one click. Automatic cutout, no sign-up, all in your browser.
Use Tool →How It Works
No account, no sign-up, completely free. The mockup renders live and the PNG is generated in your browser, so neither your text nor your image is ever uploaded to a server.
Add a message, mark it as Them or You, and type the text. Reorder lines with the arrows and set a time on each one.
Set the contact name and status line, upload a profile picture, pick light or dark, and switch the wallpaper, ticks, timestamps, and typing dots on or off.
One click exports a crisp 2x PNG at a fixed phone width, ready for a slide, a storyboard, a landing page comp, or a meme.
The Details
A convincing chat screenshot is almost never about the colors. It is about the rhythm of the conversation and whether the small details agree with each other.
short lines + uneven turns + minutes apart = real rhythm
People text in fragments. They send two messages in a row, they answer late, and they rarely write a full paragraph. Copy that rhythm and the mockup reads as a screenshot. Write it like an email and it reads as a draft.
The other half is consistency. If the header says online, the last reply should be recent. If the delivery state says read, the newest message should be one you sent. Each of those details is small on its own, and each one is what a reader notices first when it is wrong.
Worth saying plainly: believable styling is for design work. It is never a reason to present a mockup as a real conversation. Keep it a graphic, label it when it matters, and invent every name in it.
Settings
Six controls shape the look of the export. This is what each one does and the job it is best suited to.
| Setting | What it does | Best for |
|---|---|---|
| Light theme | Beige chat background, white incoming bubbles, pale green outgoing bubbles | Blog posts, slide decks, and anything placed on a white page Most used |
| Dark theme | Near-black background with deep green outgoing bubbles | Reels, thumbnails, and product shots that need high contrast Situational |
| Chat wallpaper | Faint patterned texture behind the bubbles | Screenshots meant to look like a real phone rather than a flat graphic Situational |
| Delivery ticks | One tick for sent, two for delivered, two tinted blue for read | Showing whether the last message landed, was delivered, or was read Most used |
| Typing indicator | Three dots in a bubble at the end of the thread | Cliffhanger mockups where the reply is still coming Situational |
| Status bar | Clock, signal bars, and battery across the top | Full phone-screenshot look. Turn it off for a cleaner card in a deck Situational |
Themes follow the common light and dark messaging palettes as of 2026. This tool is not affiliated with, or endorsed by, any messaging platform.
Use It Right
A chat mockup is a design asset. These are the everyday jobs it is built for, and the uses that turn it into something else entirely.
| Scenario | What it is | Verdict |
|---|---|---|
| App and website mockups | Filler conversations in a product comp, an onboarding flow, or a chat feature demo | Good use |
| Support and sales training | Showing your team what a good customer reply looks like, with made-up names | Good use |
| Memes and skits | Clearly humorous exchanges between invented characters | Good use |
| Storyboards and scripts | Visualizing a chat scene for a video, an ad, or a class exercise | Good use |
| Faking evidence | Presenting a mockup as a genuine conversation in a dispute, a claim, or a court matter | Never |
| Impersonation or scams | Making it look like a real person, brand, or bank said something they never said | Never |
Avoid These
Four of these are craft. The first two are not negotiable. Read them before you export anything that will leave your own screen.
The one rule that matters more than every design tip here. A mockup is not a record of anything. Using one to back a claim, win an argument, or mislead an employer, a platform, or a court is fraud, not design.
Never present it as realA real name, a real logo, or a real phone number in the header turns a design comp into impersonation. Invent the contact instead. It costs nothing and keeps the mockup clean.
Invent the contactReplies that arrive before the message they answer, or a thread that jumps hours between two sentences, break the illusion instantly. Keep the times moving forward in small steps.
Keep times in orderDelivery ticks only ever appear on messages you sent, never on the ones you received. This tool follows that rule, so keep the last message outgoing if the ticks are the point of the shot.
Ticks are outgoing onlyReal chat is short, lowercase, and a bit messy. Full paragraphs with perfect punctuation read as marketing copy, which is exactly what makes a mockup look staged.
Write how people textA light mockup on a white slide floats and a dark one on a dark reel disappears. Pick the theme for where the image will actually live, not for what looks nice in the editor.
Match theme to contextBest Practices
All CommonNinja widgets mentioned below are free to start. Apply these while you write the conversation and after you place the image.
01
A generic first name and last name keeps the focus on the message text and keeps you away from anything that looks like a real contact.
02
Real threads are lopsided. Two quick messages from one person, then a longer reply, reads far more true than a tidy back and forth on every line.
03
Set the first message a few minutes before the last. Same-minute replies across an entire conversation are the fastest way to spot a mockup.
04
If the story is "they read it and went quiet", finish with an outgoing message and set the delivery state to Read. If it is "they are answering", switch the typing indicator on.
05
The clock and battery sell a phone screenshot, but they add clutter in a slide. Drop them when the mockup sits inside another frame or a device image.
06
A mockup shows what a conversation could look like. A chat button starts the real one, from any page a visitor is already on.
Add WhatsApp Chat free →07
Not everyone messages the same way. One floating button can offer WhatsApp, Messenger, Telegram, and email so visitors pick what they already use.
Add All In One Chat free →08
In an article, a deck, or a pitch, one short caption noting the conversation is a design mockup removes any doubt and costs you nothing.
Glossary
Six terms that come up whenever you design a messaging screenshot. Useful if you make these for a team.
From the Blog
More from the CommonNinja blog. Free, no sign-up, just practical posts on talking to customers where they already are.
In this article, we are going to discuss how to build a chat application with Svelte and Firebase.
Read article →In this article, we’ll explain why a chatbot is essential to an e-commerce store
Read article →In this article, we are going to discuss how to use social media to drive traffic to your website.
Read article →In this article, we explore using social media to promote tournament brackets, discussing strategies for crafting...
Read article →In this article, we are going to discuss the top WhatsApp Chat Button widgets for your website. We’ll present a list of...
Read article →In this article, we are going to discuss the top Telegram Chat widgets for your website. We’ll present a list of...
Read article →