Design a Telegram-style conversation mockup and export it as a PNG. Write both sides, set the contact name and last-seen line, and switch between light and dark. Free, no sign-up, 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 Telegram conversation.
You just designed a chat mockup. These free CommonNinja widgets put real messaging on your website, no code required.
Add a real Telegram chat button to your website so visitors can message your channel or account in one tap, without leaving the page.
One floating button, every channel. Offer Telegram, WhatsApp, Messenger, and email from a single widget so people pick what they already use.
Handle the repeat questions automatically, day and night, then pass the interesting conversations through to you.
Make sharing one tap. Every share pushes the mockup you just exported past your own following.
Other free tools for social content and mockups.
Build a realistic WhatsApp-style conversation mockup with bubbles, ticks, and timestamps. Download a 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 created in your browser, so your text and your image never leave your device.
Add each message, mark it as Them or You, and type the text. Reorder with the arrows and set a time on every line.
Enter a contact name and a status line such as online or last seen recently, then upload a profile picture if you want one.
Pick light or dark, adjust the wallpaper, ticks, timestamps, and typing dots, then download a crisp 2x PNG.
The Details
The palette does less work than people expect. What sells a messaging screenshot is the pacing of the conversation and whether the header agrees with the bubbles.
header + timestamps + message length = one consistent story
Every part has to point the same way. A last seen recently header with a reply from three seconds ago contradicts itself, and so does a four-message thread where every bubble is the same length. Fix those two and the rest looks after itself.
Write the way people actually type. Lowercase openings, a missing full stop, one emoji where it belongs. That rhythm does more for a mockup than any single toggle in the editor, because it is what a reader recognizes without thinking about it.
None of that changes what the file is. It is a design asset for comps, demos, and teaching. Keep the names invented, keep it labelled where it matters, and never let it stand in for a real conversation.
Settings
Six settings shape the export. Here is what each one changes and the job it suits best.
| Setting | What it does | Best for |
|---|---|---|
| Light theme | Soft blue backdrop, white incoming bubbles, pale green outgoing bubbles | Docs, blog posts, and slides on a white background Most used |
| Dark theme | Deep navy background with slate blue outgoing bubbles | Product shots, reels, and anything that needs to pop on dark Most used |
| Status line | Free text under the contact name, such as online or last seen recently | Setting the mood of the thread before anyone reads a single message Most used |
| Chat wallpaper | Faint pattern behind the bubbles | Making the export read as a phone screen rather than a flat card Situational |
| Delivery ticks | One tick for sent, two for delivered or read, on outgoing messages only | Showing whether the last thing you sent actually landed Situational |
| Typing indicator | Three dots in a bubble at the end of the thread | Leaving the conversation mid-reply for a cliffhanger frame Situational |
Themes follow the common light and dark messaging palettes as of 2026. This tool is not affiliated with, or endorsed by, Telegram.
Use It Right
A chat mockup is a graphic. These are the jobs it is built for, and the two uses that turn it into something else entirely.
| Scenario | What it is | Verdict |
|---|---|---|
| Bot and channel demos | Showing what a bot flow or channel announcement looks like before you build it | Good use |
| Product and app comps | Placeholder conversations inside a UI mockup or a feature walkthrough | Good use |
| Tutorials and courses | Illustrating a messaging concept with invented participants | Good use |
| Memes and fiction | Clearly humorous or fictional exchanges between made-up characters | Good use |
| Fabricating proof | Passing a mockup off as a genuine chat in a dispute, a claim, or a legal matter | Never |
| Crypto and giveaway scams | Fake screenshots of payouts, admins, or endorsements used to bait people | 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.
This matters more than any styling tip on the page. A generated image records nothing. Using one to support a claim, a refund, a report, or a legal argument is fabrication, not design work.
Never present it as realMessaging screenshots are a favourite prop in crypto and giveaway scams. Do not build mockups that imply a real admin, exchange, or public figure promised anyone money.
No fake endorsementsIf the header says last seen yesterday but the newest message is from a minute ago, the mockup argues with itself. Match the status line to the timestamps.
Match status to timesReal threads clump. Someone fires off two short lines, then goes quiet, then writes a long one. A strict one-for-one exchange is the clearest sign of a script.
Let the turns clumpOne or two emoji read as natural. A line of them in every bubble reads as a designer filling space, and it pulls attention away from the message itself.
One emoji is plentyLight mockups vanish on white slides and dark ones vanish on dark backgrounds. Choose the theme for the destination, then check it against the real page.
Match theme to contextBest Practices
All CommonNinja widgets mentioned below are free to start. Use these while you write the thread and after you place the export.
01
A plain first and last name keeps the mockup generic. It also keeps you clear of anything that looks like a real account or channel.
02
Online, typing, or last seen recently each set a completely different mood before the reader reaches the first bubble. Choose deliberately.
03
Two or three words in one bubble, a full sentence in the next. Uneven lengths are what make a thread look like a screenshot instead of a script.
04
A conversation that spans four minutes reads naturally. Four messages stamped with the same minute does not.
05
If you are placing the export in a phone mockup that already has a clock, switch the tool status bar off so you do not end up with two.
06
A mockup shows the idea. A Telegram chat button starts the actual conversation from any page on your site.
Add Telegram Chat free →07
Some people live in Telegram, others in WhatsApp or Messenger. A single all-in-one chat button lets each visitor choose.
Add All In One Chat free →08
One short caption in the article, deck, or case study removes any ambiguity about whether the conversation happened.
Glossary
Six terms worth knowing if you build messaging screenshots for a team.
From the Blog
More from the CommonNinja blog. Free, no sign-up, practical posts on reaching customers in the apps they already use.
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 define brand community and its importance. We discuss key elements like shared interest and active...
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 →In this article, we delve into Messenger chat widgets and their role in enhancing customer service through streamlined...
Read article →