Créez une maquette réaliste de conversation façon WhatsApp et téléchargez-la en PNG. Rédigez les deux côtés de la conversation, puis réglez le nom du contact, les coches, les heures et le thème clair ou sombre. Gratuit, sans inscription, et tout se passe dans votre navigateur. Uniquement pour la parodie, les maquettes et les projets de design.
Uniquement pour la parodie, les maquettes, l'enseignement et les projets de design. Ne l'utilisez pas pour usurper l'identité de vraies personnes, fabriquer de fausses preuves ou tromper qui que ce soit sur une vraie conversation WhatsApp.
Vous venez de concevoir une maquette de conversation. Ces widgets CommonNinja gratuits font du chat un véritable canal sur votre site, sans code.
Ajoutez un vrai bouton de chat WhatsApp à votre site pour que les visiteurs vous écrivent en un geste, directement depuis la page qu'ils lisent déjà.
Un seul bouton flottant, tous les canaux. Laissez les gens vous joindre sur WhatsApp, Messenger, Telegram ou par e-mail depuis un seul widget.
Répondez automatiquement aux questions qu'on vous pose toute la journée, puis passez les plus délicates à une vraie conversation avec vous.
Permettez aux visiteurs de partager votre page en un geste. Chaque partage emmène le visuel que vous venez de créer au-delà de votre propre audience.
D'autres outils gratuits pour les contenus de réseaux sociaux et les maquettes.
Concevez une maquette de conversation façon Telegram en mode clair ou sombre, et exportez-la en PNG propre.
Utiliser l'outil →Créez une maquette de conversation façon Messenger avec des bulles bleues arrondies. Gratuit, dans votre navigateur.
Utiliser l'outil →Créez la maquette d'une publication façon Reddit avec votes, récompenses et fil de commentaires. Exportez un PNG.
Utiliser l'outil →Créez des captures réalistes de posts X (Twitter) avec vues, badges de certification et signets. Téléchargez un PNG propre.
Utiliser l'outil →Créez une maquette de SMS sur iPhone avec bulles iMessage bleues ou SMS vertes, réactions et accusé de lecture.
Utiliser l'outil →Créez la maquette d'une publication Facebook avec réactions, partages et fil de commentaires. Exportez un PNG.
Utiliser l'outil →Concevez la maquette d'une publication Instagram autour de votre propre photo, avec légende, j'aime et commentaires.
Utiliser l'outil →Créez une maquette de message privé Instagram avec bulles en dégradé, réactions cœur et mention Vu.
Utiliser l'outil →Créez une maquette de conversation Snapchat avec barres latérales colorées, score Snap et statut sur chaque ligne.
Utiliser l'outil →Placez un texte en gras derrière votre sujet en un clic. Détourage automatique, sans inscription, dans votre navigateur.
Utiliser l'outil →Créez une maquette de conversation façon ChatGPT en mode clair ou sombre, avec étapes de raisonnement et blocs de code.
Utiliser l'outil →Concevez une maquette de chat IA façon Gemini avec icône étincelle, débuts de phrase en gras et export PNG propre.
Utiliser l'outil →Créez la maquette d'un encadré Aperçu IA de Google (AI Overview) avec barre de recherche, réponse à puces et sources citées.
Utiliser l'outil →Comment ça marche
Pas de compte, pas d'inscription, entièrement gratuit. La maquette s'affiche en direct et le PNG est généré dans votre navigateur, donc ni votre texte ni votre image ne sont jamais envoyés sur un serveur.
Ajoutez un message, indiquez s'il vient du Contact ou de Vous, puis saisissez le texte. Réordonnez les lignes avec les flèches et donnez une heure à chacune.
Définissez le nom du contact et la ligne de statut, importez une photo de profil, choisissez clair ou sombre, et activez ou désactivez le fond d'écran, les coches, les heures et les points de saisie.
Un clic exporte un PNG net en 2x à largeur de téléphone fixe, prêt pour une diapositive, un storyboard, une maquette de landing page ou un mème.
Les détails
Une capture de conversation convaincante ne tient presque jamais aux couleurs. Tout dépend du rythme de l'échange et de la cohérence des petits détails entre eux.
lignes courtes + tours inégaux + minutes d'écart = vrai rythme
Les gens écrivent par fragments. Ils envoient deux messages d'affilée, répondent en retard et écrivent rarement un paragraphe entier. Reprenez ce rythme et la maquette se lit comme une capture d'écran. Écrivez-la comme un e-mail et elle se lit comme un brouillon.
L'autre moitié, c'est la cohérence. Si l'en-tête indique en ligne, la dernière réponse doit être récente. Si l'état de distribution indique lu, le message le plus récent doit être un message que vous avez envoyé. Chacun de ces détails est minime en soi, et chacun est la première chose que le lecteur remarque quand il cloche.
Disons-le clairement : un rendu crédible sert au travail de design. Ce n'est jamais une raison de présenter une maquette comme une vraie conversation. Gardez-la comme un visuel, signalez-la quand c'est important, et inventez tous les noms qui y figurent.
Réglages
Six commandes définissent l'aspect de l'export. Voici ce que fait chacune et l'usage auquel elle convient le mieux.
| Réglage | Ce qu'il fait | Idéal pour |
|---|---|---|
| Thème clair | Fond de conversation beige, bulles reçues blanches, bulles envoyées vert pâle | Articles de blog, présentations et tout ce qui est placé sur une page blanche Le plus utilisé |
| Thème sombre | Fond presque noir avec des bulles envoyées vert foncé | Reels, miniatures et visuels produit qui demandent un fort contraste Selon le cas |
| Fond d'écran | Texture à motif discret derrière les bulles | Captures d'écran qui doivent ressembler à un vrai téléphone plutôt qu'à un visuel à plat Selon le cas |
| Coches de distribution | Une coche pour envoyé, deux pour distribué, deux bleues pour lu | Montrer si le dernier message est parti, a été distribué ou a été lu Le plus utilisé |
| Indicateur de saisie | Trois points dans une bulle à la fin de la conversation | Maquettes à suspense où la réponse est encore en cours Selon le cas |
| Barre d'état | Heure, barres de réseau et batterie en haut | Rendu de capture d'écran complète. Désactivez-la pour une carte plus épurée dans une présentation Selon le cas |
Les thèmes suivent les palettes claires et sombres courantes des messageries, à jour en 2026. Cet outil n'est affilié à aucune plateforme de messagerie et n'est approuvé par aucune.
Bien l'utiliser
Une maquette de conversation est un élément de design. Voici les usages courants pour lesquels elle est conçue, et ceux qui en font tout autre chose.
| Scénario | De quoi il s'agit | Verdict |
|---|---|---|
| Maquettes d'app et de site | Conversations d'exemple dans une maquette produit, un parcours d'onboarding ou la démo d'une fonction de chat | Bon usage |
| Formation support et vente | Montrer à votre équipe à quoi ressemble une bonne réponse client, avec des noms inventés | Bon usage |
| Mèmes et sketchs | Échanges clairement humoristiques entre personnages inventés | Bon usage |
| Storyboards et scénarios | Visualiser une scène de chat pour une vidéo, une publicité ou un exercice en classe | Bon usage |
| Fabriquer de fausses preuves | Présenter une maquette comme une vraie conversation dans un litige, une réclamation ou une affaire judiciaire | Jamais |
| Usurpation d'identité ou arnaques | Faire croire qu'une vraie personne, marque ou banque a dit quelque chose qu'elle n'a jamais dit | Jamais |
À éviter
Quatre de ces points relèvent du savoir-faire. Les deux premiers ne se négocient pas. Lisez-les avant d'exporter quoi que ce soit qui quittera votre propre écran.
La seule règle qui compte plus que tous les conseils de design de cette page. Une maquette ne prouve rien. S'en servir pour appuyer une affirmation, gagner une dispute ou tromper un employeur, une plateforme ou un tribunal, c'est de la fraude, pas du design.
Jamais comme du vraiUn vrai nom, un vrai logo ou un vrai numéro de téléphone dans l'en-tête transforme une maquette en usurpation d'identité. Inventez plutôt le contact. Cela ne coûte rien et garde la maquette propre.
Inventez le contactDes réponses qui arrivent avant le message auquel elles répondent, ou une conversation qui saute plusieurs heures entre deux phrases, brisent l'illusion aussitôt. Faites avancer les heures par petits pas.
Heures dans l’ordreLes coches de distribution n'apparaissent que sur les messages que vous avez envoyés, jamais sur ceux que vous avez reçus. Cet outil respecte cette règle, alors terminez par un message envoyé si les coches sont le sujet de l'image.
Coches sur les envoyés seulementUn vrai chat est court, sans majuscules et un peu brouillon. Des paragraphes entiers à la ponctuation parfaite se lisent comme un texte marketing, et c'est exactement ce qui donne à une maquette un air mis en scène.
Écrivez comme on tape un messageUne maquette claire sur une diapositive blanche semble flotter, une sombre dans un reel sombre disparaît. Choisissez le thème selon l'endroit où l'image sera vraiment publiée, pas selon ce qui rend bien dans l'éditeur.
Thème adapté au contexteBonnes pratiques
Tous les widgets CommonNinja cités ci-dessous se lancent gratuitement. Appliquez ces conseils pendant que vous rédigez la conversation et après avoir placé l'image.
01
Un prénom et un nom génériques gardent l'attention sur le texte des messages et vous éloignent de tout ce qui ressemble à un vrai contact.
02
Les vraies conversations sont déséquilibrées. Deux messages rapides d'une personne, puis une réponse plus longue, sonnent bien plus vrai qu'un aller-retour bien rangé à chaque ligne.
03
Placez le premier message quelques minutes avant le dernier. Des réponses à la même minute sur toute une conversation, voilà le moyen le plus rapide de repérer une maquette.
04
Si l'histoire est « il l'a lu et n'a rien répondu », terminez par un message envoyé et réglez l'état de distribution sur Lu. Si c'est « il est en train de répondre », activez l'indicateur de saisie.
05
L'heure et la batterie rendent la capture de téléphone crédible, mais elles encombrent une diapositive. Retirez-les quand la maquette est placée dans un autre cadre ou une image d'appareil.
06
Une maquette montre à quoi pourrait ressembler une conversation. Un bouton de chat lance la vraie, depuis n'importe quelle page où se trouve déjà un visiteur.
Ajouter le chat WhatsApp gratuitement →EN07
Tout le monde n'écrit pas de la même façon. Un seul bouton flottant peut proposer WhatsApp, Messenger, Telegram et l'e-mail, pour que les visiteurs choisissent ce qu'ils utilisent déjà.
Ajouter All In One Chat gratuitement →EN08
Dans un article, une présentation ou un pitch, une courte légende précisant que la conversation est une maquette de design lève tout doute et ne vous coûte rien.
Glossaire
Six termes qui reviennent dès que vous concevez une capture de messagerie. Pratique si vous en créez pour une équipe.
Sur le blog
Plus d'articles du blog CommonNinja (en anglais). Gratuit, sans inscription, uniquement des articles pratiques pour échanger avec vos clients là où ils sont déjà.
In this article, we are going to discuss how to build a chat application with Svelte and Firebase.
Lire l'article →ENIn this article, we are going to discuss how to use social media to drive traffic to your website.
Lire l'article →ENIn this article, we are going to discuss the top WhatsApp Chat Button widgets for your website. We’ll present a list of...
Lire l'article →ENIn this article, we are going to discuss the top Telegram Chat widgets for your website. We’ll present a list of...
Lire l'article →ENIn this article, we are going to discuss the top Social Media Links widgets for your website. We’ll present a list of...
Lire l'article →ENIn this article, we delve into Messenger chat widgets and their role in enhancing customer service through streamlined...
Lire l'article →EN