Créez une maquette de conversation style Messenger et téléchargez-la en PNG. Écrivez les deux côtés, définissez le contact et la ligne En ligne, et passez du thème clair au thème sombre. Gratuit, sans inscription, tout se passe dans votre navigateur. Uniquement pour parodies, maquettes et 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 Messenger.
Vous venez de concevoir une maquette de conversation. Ces widgets CommonNinja gratuits en font un canal que vos visiteurs peuvent vraiment utiliser, sans code.
Ajoutez un vrai bouton de chat Messenger à votre site pour que les visiteurs puissent écrire à votre page en un clic, sans chercher votre messagerie.
Un bouton flottant pour tous les canaux. Messenger, WhatsApp, Telegram et e-mail, pour que chaque visiteur vous contacte comme il le préfère.
Répondez automatiquement aux questions courantes, jour et nuit, et transférez tout le reste vers une vraie réponse de votre part.
Rendez le partage possible en un clic pour que le visuel que vous venez de créer aille au-delà des personnes qui vous suivent déjà.
D'autres outils gratuits pour les contenus de réseaux sociaux et les maquettes.
Créez une maquette réaliste de conversation façon WhatsApp avec bulles, coches et heures. Téléchargez un PNG.
Utiliser l'outil →Concevez une maquette de conversation façon Telegram en mode clair ou sombre, et exportez-la en PNG propre.
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
Sans compte, sans inscription, entièrement gratuit. La maquette s'affiche en direct et le PNG est créé dans votre navigateur, votre texte et votre image ne quittent donc jamais votre appareil.
Ajoutez chaque message, indiquez s'il vient du contact ou de vous, puis saisissez le texte. Réorganisez les lignes avec les flèches et donnez une heure à chacune.
Ajoutez un nom de contact et une ligne de statut comme En ligne, puis importez une photo de profil carrée si vous le souhaitez.
Choisissez clair ou sombre, réglez les heures, l'état Vu et les points de saisie, puis téléchargez un PNG 2x bien net.
Les détails
Les bulles bleues arrondies sont la partie facile. Ce qui rend vraiment la capture crédible, c'est la forme de la conversation et la cohérence entre l'en-tête et les heures.
bulles inégales + quelques minutes d'écart + un en-tête cohérent
Les vraies conversations sont déséquilibrées. Quelqu'un répond en deux mots, quelqu'un d'autre écrit une phrase entière, et l'écart entre les messages se compte en minutes, pas en secondes. Ajoutez une ligne de statut qui correspond à l'heure la plus récente, et la maquette cesse de se contredire.
Écrivez comme les gens écrivent leurs messages. Une minuscule en début de phrase, un point oublié, un emoji là où il a sa place. C'est cette texture que le lecteur reconnaît avant même de lire consciemment un seul mot.
Et gardez l'objectif en tête. C'est un élément de design pour des maquettes, des formations et de l'enseignement. Inventez chaque nom, légendez-la comme une maquette quand c'est important, et ne la laissez jamais remplacer une conversation qui a vraiment eu lieu.
Réglages
Six réglages façonnent l'export. Voici ce que fait chacun et à quoi il sert le mieux.
| Réglage | Ce qu'il fait | Idéal pour |
|---|---|---|
| Thème clair | Écran blanc, bulles reçues gris clair, bulles envoyées en dégradé bleu | Présentations, articles d'aide et tout ce qui s'affiche sur une page blanche Le plus utilisé |
| Thème sombre | Écran quasi noir avec des bulles reçues gris foncé et le même bleu pour les envoyées | Reels, landing pages sombres et miniatures très contrastées Le plus utilisé |
| Ligne de statut | Texte libre sous le nom, le plus souvent En ligne ou Actif il y a 2 h | Indiquer si l'autre personne est disponible avant la première bulle Le plus utilisé |
| Heures | Petite heure sous chaque bulle plutôt qu'à l'intérieur | Garder des bulles arrondies épurées tout en montrant le rythme Selon le cas |
| État Vu | Une coche pour envoyé, deux pour distribué, colorées pour vu, uniquement sur vos messages | Montrer qu'un message a été lu et est resté sans réponse Selon le cas |
| Indicateur de saisie | Trois points dans une bulle à la fin de la conversation | Terminer sur une réponse encore en cours d'écriture Selon le cas |
Les thèmes suivent les palettes claires et sombres courantes des messageries en 2026. Cet outil n'est ni affilié à Messenger ou Meta, ni soutenu par eux.
Bien l'utiliser
Une maquette de conversation est un visuel. Voici les usages pour lesquels elle existe, et les deux qui en font tout autre chose.
| Scénario | De quoi il s'agit | Verdict |
|---|---|---|
| Maquettes de service client | Présenter un parcours de support ou un modèle de réponse avec des clients inventés | Bon usage |
| Maquettes de pubs et de landing pages | Une conversation fictive qui montre comment le chat s'intègre dans le design d'une page | Bon usage |
| Formation et onboarding | Montrer à un nouveau membre de l'équipe à quoi ressemble une bonne première réponse | Bon usage |
| Mèmes et sketchs | Des échanges clairement fictifs pour des publications ou un script vidéo | Bon usage |
| Fausses captures de vraies personnes | Faire croire qu'un vrai ami, un collègue ou une page de marque a dit quelque chose | Jamais |
| Preuve dans un litige | Soumettre une maquette à un employeur, une plateforme, un assureur ou un tribunal | 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 règle qui l'emporte sur tous les conseils de design ici. L'export ne prouve rien de ce qui s'est passé. Le présenter comme un véritable échange pour gagner une dispute, une réclamation ou un procès, c'est de la falsification.
Ne jamais le faire passer pour réelUne vraie personne dans l'en-tête, ou une vraie page de marque comme contact, transforme une maquette en usurpation d'identité. Inventez le contact. Cela prend deux secondes et règle tout le problème.
Inventez le contactEn ligne avec un dernier message datant de la veille, cela sonne faux tout de suite. L'en-tête et l'heure la plus récente doivent raconter la même histoire.
Accordez statut et heuresLes conversations Messenger sont naturellement déséquilibrées. Une réponse courte de deux mots à côté d'une phrase plus longue, c'est ce qui rend une maquette crédible plutôt que remplie de texte factice.
Variez la longueur des bullesUne image non carrée est recadrée dans le cercle et déforme le visage. Utilisez une image carrée pour que l'avatar reste net dans le petit en-tête.
Importez une image carréeUne maquette blanche disparaît sur une diapositive blanche et une sombre disparaît dans un reel sombre. Choisissez le thème selon l'endroit où le fichier sera réellement placé.
Adaptez le thème au contexteBonnes pratiques
Tous les widgets CommonNinja mentionnés ci-dessous se lancent gratuitement. Appliquez ces conseils pendant que vous écrivez la conversation et après avoir placé l'image.
01
Un prénom et un nom génériques gardent l'attention sur la conversation et éloignent la maquette de tout compte réel.
02
En ligne suggère une conversation en direct, Actif il y a 2 h suggère que vous attendez. La ligne est en texte libre, choisissez celle qui correspond à votre histoire.
03
Deux mots, puis une phrase, puis deux mots à nouveau. Des tours de parole réguliers et de longueur égale trahissent le plus vite une conversation écrite d'une traite.
04
Messenger garde ses bulles épurées en affichant l'heure en dessous plutôt qu'à l'intérieur. Laissez les heures activées pour garder le rythme sans encombrer les bulles.
05
Si la maquette doit montrer qu'un message est resté sans réponse, terminez par votre propre bulle et réglez l'état sur Vu.
06
Une maquette montre le concept. Un bouton de chat Messenger sur votre site lance la vraie conversation, depuis la page que la personne est en train de lire.
Ajouter le chat Messenger gratuitement →EN07
Tout le monde n'utilise pas Messenger. Un seul bouton flottant peut proposer Messenger, WhatsApp, Telegram et l'e-mail, pour que personne n'ait à changer d'application pour vous joindre.
Ajouter All In One Chat gratuitement →EN08
Une seule ligne dans la présentation ou l'article précisant que la conversation est une maquette de design, et tout reste transparent.
Glossaire
Six termes qui reviennent dès que vous concevez une capture de messagerie pour une équipe.
Sur le blog
Plus d'articles du blog CommonNinja (en anglais). Gratuits, sans inscription, des articles pratiques pour répondre aux clients là où ils se trouvent déjà.
In this article, we are going to discuss the top ten Facebook Feed widgets for your website.
Lire l'article →ENIn 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 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 delve into Messenger chat widgets and their role in enhancing customer service through streamlined...
Lire l'article →ENIn this article, we explore the benefits of Telegram chat buttons for enhancing user engagement through immediate...
Lire l'article →EN