MessengerCreator
The one with the reaction row
Outlined send field and the quick-reaction emoji beside it, on their own surface below the photo. What separates this from Facebook's story.
Use this templateMessenger mockups
Fake Messenger story & mockup generator
Build a Messenger story with the controls Messenger actually uses — an outlined Send message field and a row of quick-reaction emoji on their own surface below the photo, where Facebook fills its field and draws four reaction discs instead.
Open the Messenger editorFree · no account · PNG and video
Start from a Messenger example
Each one opens in the editor as an editable, fictional scene — names, timings and interface details already set. Change a word, or change everything.
MessengerCreator
Your own, with the count
The control bar swaps for a viewer count, because you do not send yourself a message. Same rule every story skin here follows.
Use this template
MessengerGroup chats
Asking the group something
A question sticker over the photo. Shows the inline header — avatar, name and time on one line — against WhatsApp's stacked one.
Use this templateHow to make a Messenger mockup
Start from an example
The three above cover the range: a plain photo showing the reaction row, a question sticker put to a group, and your own story with the viewer count.
Set the photo and the account
Upload an image or pick one from the library, then edit the name straight in the preview. The avatar comes from the Contact section.
Write the caption
Type it, then choose top, middle or bottom. Line breaks work, so a two-line announcement stacks the way it would on the phone.
Add a sticker, or none
Poll, question, music or link. A poll takes a question and two to four answers; the others take one line. Pick None if the story is just a photo.
Export
PNG at 1× free, up to 3× on Pro, device frame optional, and onto a sized canvas if it is going into a video.
How the Messenger interface is put together
Our Messenger skin is rebuilt from the real interface in code rather than traced from a screenshot, so the details that make it recognisable survive at export resolution. Here is what those details actually are.
The send field is outlined, not filled
Facebook's story puts a solid dark grey Send message box in its control bar. Messenger puts a hairline border around a transparent one in the same position. Same company, same place on the screen, opposite treatment — and it is one of the two things that stop the two apps' stories reading as the same screenshot.
Emoji reactions, not reaction discs
Beside the field sits a short row of quick reactions — a heart, a laughing face, a surprised face. Facebook draws four bespoke reaction discs there instead: Like, Love, Haha and Care, as illustrations with no unicode equivalent. Messenger genuinely shows system emoji, so drawing them would be the invention. This is the most visible difference between the two.
The header is on one line
Avatar, name, then the time in lighter grey, all inline. WhatsApp Status and Telegram both stack the time under the name; Messenger and Instagram do not. Two lines against one changes the height and the weight of the header before you read a word of it.
Both top-right controls are bare
The ••• and the × have nothing behind them — no translucent disc, no ring. Telegram puts a disc behind its overflow and leaves the × bare, and WhatsApp rings its overflow. Messenger draws both plain, which is what keeps it from being mistaken for either.
The photo stops above the controls
The media does not run to the bottom of the screen. It ends with rounded corners and the control bar sits on its own dark surface beneath, the way Facebook's does. Instagram, WhatsApp, Snapchat and Signal all float their controls over the image instead, so this changes the silhouette of the whole screenshot.
Viewers only on your own story
The control row is replaced by an eye and a count on a story you posted, because you do not send yourself a message. Leave the field empty for someone else's — a viewer count on another account's story is something anyone who uses the app will spot.
What people use Messenger mockups for
- Social-media planning and mockups
- Creator and brand pitch decks
- Group and event announcements
- Scam-awareness and safety training
- UI design portfolios
- Storyboards for a campaign before it runs
Questions about Messenger mockups
- How is this different from the Facebook story generator?
- Structurally they are close — one company, and both stop the photo short of a control bar rather than floating controls over it. The controls in that bar are not the same, though: Messenger outlines its send field where Facebook fills it, and Messenger shows emoji quick-reactions where Facebook draws four reaction discs. Both are built from their own reference, not from each other.
- Is this the same as Messenger Notes?
- No. Notes is a separate feature with its own viewer — it has a pause control, a Done button top-right and a Reaction sent toast, and messenger.com lists Stories and Notes as two different things. This generator makes Stories. Building the two as one screen would produce something Messenger does not have.
- Can I add a poll or a question sticker?
- Yes — poll, question, music and link stickers all render over the photo. One at a time, which is what a real story almost always carries.
- How do I show it as the second story out of four?
- Set Segments to four and Playing to two. The bar fills the first, half-fills the second and dims the rest, exactly as it looks caught mid-play.
- Where does the caption go?
- Top, middle or bottom. Three positions rather than a drag handle, because dragging needs a pointer, a keyboard alternative and a long-press fallback on a phone, and what people actually make is text in one of those three places.
- Why is the viewer count optional?
- It is only ever on your own story. Leaving it empty is what makes a screenshot of somebody else's story correct.
- Can I make a story from a real person's account?
- No, and our terms prohibit it. Attributing an invented story to a real account is impersonation. Parody, teaching, fiction and design work are fine — every example on this page uses fictional accounts.
- Can I export it at 9:16?
- Yes. The download dialog places the mockup on a 9:16, 4:5, 1:1 or 16:9 canvas with a background and margin, and PNG exports at 1× free, or up to 3× on Pro.
Use these responsibly
Everything made here is simulated. SocialMock has no connection to Messenger and cannot read, send or alter a real message. Do not use a mockup to impersonate anyone, pass it off as a genuine screenshot, or present it as evidence in any legal, workplace or academic matter — see our Acceptable Use policy. For general information about legal risk, read is it legal to fake a screenshot? If you publish somewhere a viewer might mistake it for real, switch on the “Simulated” label before exporting.
Related generators
Browse all 36 appsBuild your Messenger mockup now
Click straight into the preview and type. Export when you are done — free at 1×, up to 3× on Pro.
Open the Messenger editor