WhatsApp Chat Generator
Create fake WhatsApp chat mockups with green bubbles, double ticks, online status, and PNG export. Free online mockup maker.
This WhatsApp-style chat generator builds conversation mockups with green sent bubbles, white received bubbles, and realistic check mark delivery indicators. Set a contact name, toggle online status, add messages with individual timestamps and delivery statuses, then export the whole conversation as a high-resolution PNG. Everything runs in the browser - no data leaves the device.
About WhatsApp Chat Generator
How the WhatsApp Chat Generator Works
The tool recreates the core visual elements of a messaging interface: a teal header bar with contact name and avatar initials, a light wallpaper background (#efeae2), green sent bubbles (#d9fdd3) on the right, and white received bubbles on the left. Each message carries a timestamp and, for sent messages, a configurable delivery status shown as check marks.
To build a conversation, type a message, choose whether it is sent or received, set a timestamp in HH:MM format, and pick a delivery status. Click Add and the message appears in the live preview. Repeat until the conversation is complete, then hit Export as PNG. The Canvas API renders the chat at 2x resolution for crisp output on high-DPI screens. The resulting file downloads directly to the device.
Message Controls Reference
| Setting | Options | What It Does |
|---|---|---|
| Direction | Sent or Received | Sent messages appear as green bubbles on the right; received as white on the left |
| Timestamp | Any time (HH:MM format) | Shown inside each message bubble, right-aligned |
| Delivery status (sent only) | Single check, double grey, double blue | Single = sent, double grey = delivered, double blue = read |
| Contact name | Free text | Shown in the teal header bar with avatar initials |
| Online status | Toggle on or off | Shows "online" subtitle text in the header when enabled |
What Do the WhatsApp Check Marks Mean?
The check mark system is one of the most recognisable parts of the WhatsApp interface. Each status represents a distinct stage in message delivery.
| Icon | Status | What It Means |
|---|---|---|
| Single grey check | Sent | Message left the device and reached the WhatsApp server |
| Double grey checks | Delivered | Message reached the recipient's device but has not been opened |
| Double blue checks | Read | Recipient opened the chat and saw the message |
Using the right check mark for each message adds authenticity. In a realistic mockup, the last sent message typically shows the current status (single check or double grey), while earlier sent messages show double blue checks if the conversation has progressed. A common mistake is marking every sent message as "read" - in practice, only messages the other person has actually seen should carry blue checks.
Note that users can disable read receipts in their WhatsApp privacy settings, in which case messages never show blue checks even after being read. Group chats show double grey checks when delivered to all participants and double blue when read by everyone in the group.
WhatsApp Interface Design Details
The mockup uses colour values that closely match the real app's interface. The header bar uses #075E54 (WhatsApp's signature teal), sent bubbles use #d9fdd3 (the light green introduced in later updates), and the wallpaper background uses #efeae2 (the default chat canvas). Text renders at 15px in a system font stack for a native mobile feel.
| Element | Colour | Notes |
|---|---|---|
| Header bar | #075E54 (teal) | Brand primary colour used across the app |
| Sent bubble | #d9fdd3 (light green) | Updated green from the 2022 redesign |
| Received bubble | #ffffff (white) | Plain white on the light wallpaper |
| Chat wallpaper | #efeae2 (warm grey) | Default wallpaper tone |
| Message text | #111b21 (near-black) | High contrast for readability |
| Timestamp text | #667781 (grey) | Subtle secondary text inside bubbles |
| Read receipts | #53bdeb (blue) | The distinctive "blue tick" colour |
Why WhatsApp Matters for Mockups
WhatsApp had over 3.3 billion monthly active users as of January 2026 (Backlinko), making it the most-used messaging app worldwide. Over 100 billion messages are sent on the platform every day (Business of Apps). India leads with roughly 535 million users, followed by Brazil at 148 million and Indonesia at 112 million (World Population Review). In Europe, penetration exceeds 85% of the smartphone population, with Germany, Italy, and Spain among the heaviest markets (Chatarmin).
More than 200 million businesses use WhatsApp Business monthly (DemandSage), and the WhatsApp Business API has grown at over 40% year-on-year in active accounts (YCloud). That scale means mockups of WhatsApp-style conversations are relevant for a huge range of audiences, from marketing teams previewing campaign messages to UX designers prototyping chatbot flows.
Tips for Building a Realistic Conversation
| Tip | Why It Helps |
|---|---|
| Use natural message lengths | Real WhatsApp messages tend to be short - often just a few words per bubble. Long paragraphs in a single bubble look unnatural. |
| Space timestamps logically | Rapid-fire messages share the same minute; gaps of 5 to 15 minutes indicate pauses. A 3-hour gap suggests someone went away and came back. |
| Set online status to match context | "Online" suggests an active, real-time chat. Leaving it off suggests the other person has not replied yet. |
| Mix sent and received unevenly | Alternating one-for-one looks scripted. Real chats have clusters where one person sends two or three messages in a row before getting a reply. |
| Keep conversations focused | 5 to 10 messages tell a clear story without making the exported image too tall to share easily on social media. |
| Use delivery statuses progressively | Earlier messages should be "read" (blue), recent ones "delivered" (grey), and possibly the very last one "sent" (single check) if the conversation is still ongoing. |
Common Use Cases
| Use Case | Example |
|---|---|
| Marketing mockups | Show how a brand's WhatsApp Business messages would appear to customers before launching a campaign |
| UX prototyping | Design chatbot or customer service conversation flows for stakeholder review |
| Presentation slides | Embed conversation screenshots in pitch decks, reports, or case studies |
| Educational content | Create example conversations for language learning materials or communication training courses |
| Social media content | Build shareable conversation graphics for posts and stories |
| Legal or HR training | Mock up workplace communication scenarios for policy training without using real employee messages |
| App development | Generate realistic chat screenshots for app store listings or product demos |
Worked Example: Building a Customer Service Mockup
Suppose a marketing team needs a mockup showing how their brand would respond to a customer query on WhatsApp Business. Here is a step-by-step walkthrough:
Step 1: Set the contact name to "Acme Support" and enable the online status toggle. This creates a header that looks like an active business chat.
Step 2: Add the first message as "Received" with text "Hi, I ordered a blue jumper but got a red one. Order #4821" and timestamp "09:14". Leave the delivery status as-is since received messages do not show check marks.
Step 3: Add a "Sent" reply: "Hi! Sorry about that. I can see order #4821 - I'll arrange a replacement right away. You'll get a shipping confirmation within the hour." Set the timestamp to "09:16" and delivery status to "read" (double blue checks) since the customer has continued the conversation.
Step 4: Add another "Received" message: "That's great, thank you!" at "09:17".
Step 5: Add a final "Sent" message: "No problem at all. Your new jumper is on its way - tracking link will follow shortly." Set the timestamp to "09:18" and delivery status to "delivered" (double grey checks) since this is the most recent message.
Step 6: Click Export as PNG. The result is a clean, high-resolution conversation image ready for a presentation deck or social media post showing responsive customer service.
How WhatsApp Compares to Other Messaging Platforms
Different messaging apps have distinct visual languages. Choosing the right mockup format depends on the target audience and the platform they associate with.
| Platform | Bubble Style | Key Visual Feature | Primary Audience |
|---|---|---|---|
| Green sent, white received | Double-check delivery indicators | Global - dominant in Europe, India, Latin America, Africa | |
| iMessage | Blue sent, grey received | Tapback reactions, typing indicator | Apple device users, mainly US and UK |
| SMS/Android | Varies by app | Green bubbles in cross-platform chats | Non-iPhone users, older demographics |
| Telegram | White bubbles, blue accents | Cloud-based, channels, large file sharing | Tech-savvy users, privacy-focused markets |
| Signal | Blue sent, white received | Disappearing messages, minimal metadata | Privacy-focused users |
WhatsApp is the default messaging app in over 100 countries (Business of Apps). For any audience outside the US Apple ecosystem, a WhatsApp-style mockup will look more familiar and credible than an iMessage one. In India, Brazil, Germany, Spain, and most of Africa, WhatsApp is the primary way people communicate digitally.
WhatsApp Business Mockups
With over 200 million businesses using WhatsApp Business monthly as of 2025 (DemandSage), the platform has become a major customer communication channel. The WhatsApp Business API saw over 40% year-on-year growth in active accounts (YCloud), and total business platform spending is projected to reach $3.6 billion by the end of 2026 (Statista).
For marketing teams, the ability to mock up WhatsApp conversations before launch helps in several ways. Product managers can review the tone and flow of automated responses. Compliance teams can check that disclaimers and opt-out instructions appear correctly. Designers can ensure the message length works well within the bubble layout. Sales teams can use mockups in pitch decks to show clients what their WhatsApp marketing campaigns would look like in practice.
Common business mockup scenarios include order confirmations, appointment reminders, shipping updates, promotional offers, and two-factor authentication codes. Each of these has a different conversation structure. An order confirmation is typically a single outbound message with no reply expected, while a support conversation involves back-and-forth exchanges.
Export Quality and Privacy
The PNG export renders at 2x resolution (780px wide on a 390px viewport) via the Canvas API, producing sharp images on retina and high-DPI displays. The file downloads directly to the device with zero server involvement. No messages, contact names, or any other data are transmitted anywhere.
The preview uses a chat wallpaper background, rounded bubbles, and a teal header bar for an authentic messaging appearance. The tool does not use any trademarked logos, icons, or exact brand assets. Colours and layout are inspired by common messaging app conventions rather than replicating any specific brand's protected design.
Each exported image includes the full conversation from top to bottom, regardless of scroll position. The canvas height adjusts dynamically to fit all messages, so even a 20-message conversation will export as a single continuous image. This makes the output ideal for embedding in documents or presentations where cropping would lose context.
For Apple-style blue-bubble conversations, the iMessage chat generator produces iOS message mockups with tapback reactions and read receipts. For social media post mockups, the tweet mockup generator covers microblog formats while the Instagram post mockup handles photo post layouts. All mockup tools run entirely in the browser with no server processing.
Sources
Frequently Asked Questions
Does this use real WhatsApp branding?
No. The tool uses generic green-themed chat styling inspired by messaging apps. It does not use any WhatsApp logos, trademarks, or exact brand assets.
What do the check marks mean?
A single check means sent, double gray checks mean delivered to the recipient's device, and double blue checks mean the message has been read. You can set the status for each sent message.
Can I show online status?
Yes, there's a toggle to show or hide the online status indicator under the contact name in the chat header.
Is there a message limit?
There's no hard limit on the number of messages. Each message can be up to 1000 characters. The preview scrolls if the conversation is long.
How do I export the chat?
Click the Export as PNG button to render the conversation to a high-resolution image using the Canvas API. The file downloads straight to your device.
Related Tools
Link to this tool
Copy this HTML to link to this tool from your website or blog.
<a href="https://toolboxkit.io/tools/whatsapp-mockup/" title="WhatsApp Chat Generator - Free Online Tool">Try WhatsApp Chat Generator on ToolboxKit.io</a>