How to create a WhatsApp call log mockup in four steps
- Keep the header as Calls. The page ships with the header pre-filled as
Calls— that is what the real tab is called, so leave it unless your scene genuinely needs something else. - Add the callers. Each participant in the editor is one caller. Add as many as your log needs, each with a name and avatar. Three to six entries is the range where a call log looks naturally used.
- Set the calls. Each row has a sender (the caller), a direction — Outgoing, Incoming or Missed — and a time. Add optional duration notes like
12 minfor completed calls; real logs mix short and long durations, and one or two missed calls make it believable. - Export. Pick 1x, 2x or 3x and hit Download PNG. The phone frame is on by default; untick it when you are compositing the screenshot into a larger design.
What makes a WhatsApp call log actually look real
The Calls screen shares a colour system with the chat view but a completely different structure — it is a list, not a conversation, and generators that render it as chat bubbles with a phone icon are getting it wrong. Here is what ChatMock reproduces:
| Element | Detail |
|---|---|
| Direction arrows | Green up-right = outgoing, green down-left = incoming, red down-left = missed (#ea4335) |
| Missed calls | Caller name renders in the same red as the arrow, exactly like the real app |
| Row layout | 46px avatar, bold name, direction + time on the second line, green phone icon on the right |
| Bottom tab bar | Status / Calls / Chats / Communities / Settings, with Calls highlighted in green (#00a884) |
| Durations | Optional small grey text under the direction line for completed calls |
Two details separate a convincing call log from a fake. First, the arrow grammar: real users read those arrows without thinking, and a log where every call points the same direction looks staged — real usage mixes incoming, outgoing and the occasional missed call. Second, the tab bar: the Calls screen is never shown without the bottom navigation in a genuine screenshot. Cropping it off is the normal workaround for generators that cannot render it.
Everything you can customise
- Caller names and avatar photos
- Unlimited call entries, reorderable, any caller
- Direction per call: outgoing, incoming or missed — plus a Video toggle for camera-call entries
- Time per call, plus optional duration notes
- Light or dark mode
- Status bar: clock, carrier, battery and signal
- Optional phone frame
What people use call log mockups for
The Calls screen appears in storytelling where the evidence is who called whom and when: a missing-person scene, a “they called me 14 times” story beat, an HR or safeguarding training module, or a comedy sketch about ignoring calls. The information density of a call log — names, directions, times — is what makes it useful on screen, and also why getting the arrow grammar wrong is so visible.
The line, as everywhere on this site, is intent. Illustrating, parodying, teaching and designing are fine. Using a fabricated call log to deceive someone, harass a person, impersonate someone or fabricate evidence is not — and there are no templates here for fake bank, government, medical or legal notices. The Acceptable Use Policy has the full boundary.
Why it runs entirely in your browser
Everything is rendered locally with plain HTML and CSS, and the PNG is generated on your device — nothing is transmitted, stored or logged. That is why the editor keeps working with your wifi switched off, and why there is no record of your mockups anywhere on our side.
Other generators
For conversations rather than calls, the WhatsApp chat generator covers one-to-one threads with blue ticks and dark mode, and the group chat generator handles multi-participant chats. iPhone, Messenger, Discord, Telegram, Instagram and Snapchat are also live — see the generator index.
Frequently asked questions
Is this WhatsApp call log generator free?
Yes — every feature is free, with no signup, no email wall, no daily limit and no watermark on your export. PNG download works at 1x, 2x and 3x resolution.
What do the arrows next to each call mean?
They show call direction the same way the real app does: a green arrow pointing up-right means an outgoing call you placed, a green arrow pointing down-left means an incoming call you received, and a red arrow means a missed call. In the real app, missed calls also turn the caller's name red — this generator reproduces that too.
Can I add a call duration?
Yes. Each row has an optional duration note (for example 12 min) rendered as small grey text under the direction line. The real app shows durations for completed calls, so adding a few makes the log look lived-in.
Is the bottom tab bar included?
Yes. The Calls screen renders with the full five-tab bottom navigation (Status, Calls, Chats, Communities, Settings) with Calls highlighted in green — the same structure as the real app. Screenshots without the tab bar read as cropped rather than authentic.
Is my data uploaded to a server?
No. The mockup is rendered entirely on your device and the PNG is generated in your browser. Names, numbers and durations never leave your computer or phone — you can disconnect from the internet after loading the page and keep working.
What resolution can I export?
1x (390px wide), 2x (780px) or 3x (1170px). For thumbnails and blog posts, 2x is usually the sweet spot. Use 3x when the screenshot will be zoomed into or printed.
Can I use the mockups commercially?
Yes, for legitimate creative work: videos, presentations, teaching material, fiction and design. You may not use them to deceive, defraud, harass, impersonate anyone or fabricate evidence. The Acceptable Use Policy has the full boundary.