ChatMock
WhatsApp examples

WhatsApp chat screenshot examples

WhatsApp mockups live or die on the small things: the beige header, the doodle wallpaper behind every bubble, the blue double ticks that only appear once a message is read. The examples on this page were all rendered live by the same engine as our WhatsApp chat generator — nothing here is a screenshot of a real phone or a real conversation.

Maya
online
Today
Hey! Loved your latest reel — the pacing on it is so clean.10:12
We're planning a short collab series for next month. Would you be up for it?10:13
Thank you! Yes, sounds fun — what did you have in mind?10:15
A three-part mini series, one reel each. I'll send the draft brief over.10:16
Perfect, send it through 👌10:17
Message
WhatsApp

Creator collab outreach

A WhatsApp exchange with blue read ticks, a warm opener and a concrete next step — the structure most creator collab scenes need.

Open the WhatsApp generator →
Ben
last seen today at 14:11
Today
New landing hero is pushed to staging.14:02
Checking now… the spacing reads much better.14:05
One nit: the badge under the H1 feels slightly heavy.14:06
Dropped it to 12px. Refresh and look again?14:08
Perfect. Ship it 🚀14:09
Message
WhatsApp · Dark

Design sign-off in dark mode

The same WhatsApp engine in dark mode: deep wallpaper, blue read ticks and a compact approval arc for product work.

Open the WhatsApp generator →
Nadia
online
Today
Hi! A parcel for you came to us by mistake — the courier mixed up the numbers.17:42
Oh thank you, I was wondering where it went.17:48
No trouble at all. I'm in all evening if you want to grab it.17:49
Perfect — I'll come by around 8.17:51
Door's the one with the blue plant pot 👋17:52
Message
WhatsApp

Neighbour parcel handover

A doorstep co-ordination thread between neighbours — short, polite and full of real timings, with the blue read ticks proving the message was actually seen.

Open the WhatsApp generator →

Why these compositions work

Why the rhythm is uneven on purpose

A real WhatsApp thread is not a column of equal-width bubbles. Look at the five-message collab scene: a long opener from Maya, a shorter question, your two-line reply, then a one-line sign-off. We cap every bubble at roughly three quarters of the chat width, so a detailed message wraps onto three or four lines while a quick confirmation stays a stub. That mismatch is the point. When every bubble is padded to the same length the eye reads a form, not a conversation. In the editor, resist the urge to balance the two sides: let one person type a paragraph and the other answer in four words, and keep the final outgoing bubble short so the blue ticks land under something punchy.

Dark mode is a repaint, not an inversion

WhatsApp dark mode is where most mockups fall apart, because flipping the light theme does not produce it. The chat surface drops to a near-black, green-tinged #0b141a, but the incoming bubble lifts to #202c33 so it separates from the wallpaper instead of vanishing into it. Your own bubble is not a dimmed #d9fdd3 — it becomes a deep green #005c4b with light text, and the header takes #202c33, one step off the conversation surface rather than the beige of the light theme. Only the read ticks carry over untouched: the blue stays #53bdeb in both modes, because it is the app's accent rather than a tint. Change any one of those relationships and the dark render stops reading as WhatsApp.

Grouping and timestamps inside the bubble

Two small mechanics keep a WhatsApp thread legible. First, grouping: when the same sender fires several messages in a row, only the first bubble carries the corner notch and the rest stack with squared edges, so a three-line burst reads as one beat rather than three messages from three people. Second, the timestamp. WhatsApp places a small time inside the bottom-right of every bubble, in a muted grey (#667781 on light, #8696a0 on dark) that stays subordinate to the message text. That is a different contract from apps that print a time under each group: because the stamp lives inside the bubble, a long message and a single-word reply both keep it tucked away from the content instead of colliding with it.

Design details we reproduce

  • iOS-style WhatsApp header in the authentic beige, with video and call icons — not the Android green variant
  • Signature doodle wallpaper on the chat background, in both light and dark mode
  • Blue double-tick read receipts and a full per-message timestamp editor
  • Flex-anchored timestamps that never spill outside the bubble, at any message length

Where these scenes shine

Creator collab threads, product sign-offs and small everyday logistics are the three WhatsApp scenarios people rebuild most often — which is why the gallery covers all three, including one in dark mode.

Make your WhatsApp mockup →

WhatsApp mockup questions

Are these real WhatsApp screenshots?

No. Every example is drawn in your browser by the ChatMock engine to look like WhatsApp on iOS. No real accounts, numbers or conversations are involved.

How do I make my own version?

Open the WhatsApp chat generator, start from a conversation shaped like the examples, and edit names, messages, ticks and timestamps. Export is a high-resolution PNG, free and watermark-free.

Can I switch the example to dark mode?

Yes — one of the three examples on this page already uses dark mode, and in the generator a single Appearance toggle flips the whole mockup between light and dark.

Browse examples by platform

Messenger examplesGroup Chat examplesiPhone Text Message examplesInstagram DM examplesDiscord examplesTelegram examplesSnapchat examplesAndroid SMS examplesWhatsApp Call examples