CodeKitHubEn quoi consiste cet outil ?
Le Générateur de chat Microsoft Teams est un outil de maquettage basé sur le navigateur qui recrée la vue de chat individuel de Teams — un en-tête avec l'avatar du contact, le point de présence, le nom et le statut, plus des icônes d'appel/vidéo/partage, et un fil de discussion utilisant le style de bulle arrondie et alignée à droite de Teams pour les messages sortants.
Teams utilise par défaut un thème clair (fond blanc, accents violet Fluent discret #6264A7), correspondant à ce que voit la plupart des utilisateurs de Microsoft 365, avec un interrupteur optionnel pour le mode sombre.
Chaque contact possède un statut de présence — Disponible (vert), Occupé (rouge), Absent (jaune) ou Hors ligne (gris) — affiché sous forme de petit point coloré sur l'avatar, exactement comme dans le vrai client Teams.
Réservé au divertissement et aux maquettes : créez une démo de produit d'entreprise, illustrez un flux de travail Microsoft 365 pour une présentation, ou storyboardez un scénario de support. Il ne doit jamais servir à usurper une vraie conversation professionnelle, un vrai collègue, ou à fabriquer des preuves de propos que quelqu'un n'a jamais tenus.
Rien de ce que vous saisissez ne quitte jamais votre appareil. Toute la conversation est dessinée avec l'API HTML Canvas directement dans votre navigateur, et le PNG est généré et téléchargé localement.
Pourquoi l'utiliser ?
- Créez des captures réalistes de chats Teams pour des démos de logiciels d'entreprise et des études de cas.
- Maquettez le rendu d'un bot Teams ou d'une notification avant de le développer.
- Illustrez un scénario de support informatique, un parcours d'intégration ou un exemple de communication professionnelle pour une présentation.
- Prototypez une interface de chat façon Teams pour un outil interne.
- Rendu 100% local — le texte de votre conversation ne touche jamais un serveur.
Mode d'emploi
- Définissez le nom du contact et son statut de présence (Disponible, Occupé, Absent ou Hors ligne).
- Importez une photo pour l'avatar, ou laissez-le sous forme de cercle coloré avec initiales.
- Choisissez le thème clair ou sombre — Teams est clair par défaut.
- Ajoutez des lignes de message : saisissez le texte, choisissez un côté (eux/moi) et un horodatage.
- Observez l'aperçu en forme de téléphone se mettre à jour en direct, puis cliquez sur « Télécharger le PNG » pour enregistrer l'image.
Exemple
Entrée
Contact : « Jordan » · Statut : « Disponible » · Message 1 (eux) : « Salut ! Tu as pu y jeter un œil ? » · Message 2 (eux) : « Parfait, je t'envoie le reste ce soir » · Message 3 (moi) : « C'est fait — ça a l'air top, go »Résultat
Une image PNG montrant un chat Teams clair : un en-tête avec l'avatar de Jordan, un point de présence vert, le nom et le statut « Disponible », deux bulles entrantes gris clair à gauche avec le nom et l'horodatage au-dessus, et une bulle sortante violet clair à droite.L'image est générée instantanément dans le canvas d'aperçu en direct et se télécharge en un clic — sans attente, sans envoi.
Ce que vous pouvez personnaliser
- Nom du contact et statut de présence (Disponible, Occupé, Absent, Hors ligne).
- Avatar : importez une vraie photo (recadrée en cercle) ou choisissez une couleur par défaut.
- Thème clair ou sombre, le clair étant l'apparence par défaut authentique de Teams.
- Lignes de message illimitées, chacune avec son propre texte, côté (eux/moi) et horodatage.
Utilisation responsable
Ce générateur existe pour faciliter la création de captures clairement fictives façon Teams à des fins de démos d'entreprise, présentations et travail de design. Ce n'est pas un outil pour fabriquer des preuves, organiser du harcèlement professionnel ou faire croire à quelqu'un qu'une fausse conversation a eu lieu dans un vrai tenant Microsoft 365. Si vous prévoyez de partager une image créée avec cet outil, pensez à ajouter un contexte (comme « faux » ou « maquette ») afin que les spectateurs comprennent qu'il ne s'agit pas d'une véritable conversation.
Foire aux questions
Est-il légal ou éthique d'utiliser cet outil ?
L'outil en lui-même est légal à utiliser pour le divertissement, les démos produit, les présentations et le travail de design. Ce qui n'est ni légal ni éthique, c'est d'utiliser l'image générée pour tromper quelqu'un — par exemple la présenter comme une vraie conversation Teams pour commettre une fraude, harceler ou diffamer un collègue, ou usurper un vrai chat professionnel. Selon votre lieu de résidence, ce type d'usage abusif peut constituer une fraude, une diffamation ou du harcèlement. Merci de n'utiliser cet outil qu'à des fins clairement fictives ou illustratives.
L'outil envoie-t-il mes messages ou ma photo quelque part ?
Non. Chaque message, nom, photo et paramètre que vous saisissez reste dans la mémoire de votre navigateur et est dessiné directement sur un élément canvas via JavaScript. Le fichier PNG est généré et téléchargé sur votre appareil — rien n'est jamais envoyé à un serveur.
Puis-je contrôler le point de statut de présence ?
Oui. Choisissez Disponible (vert), Occupé (rouge), Absent (jaune) ou Hors ligne (gris) dans le menu déroulant de présence, et le petit point coloré sur l'avatar du contact se met à jour en conséquence, exactement comme dans le vrai client Teams. Si votre scénario porte sur une réponse rapide ou une conversation en cours, utilisez Disponible ou Occupé ; si votre maquette vise à montrer qu'un message est resté sans réponse ou a été vu après coup, utilisez Absent ou Hors ligne pour rendre cela crédible.
Teams utilise-t-il vraiment des bulles de chat arrondies comme ça ?
Oui. Contrairement à Discord et Slack, qui affichent les messages sous forme de liste plate, Microsoft Teams utilise des bulles de message arrondies : les messages entrants apparaissent à gauche avec le nom de l'expéditeur au-dessus, et vos propres messages apparaissent alignés à droite dans une bulle violet clair. Cet outil reproduit exactement cette mise en page.
Puis-je importer une vraie photo comme avatar ?
Oui. Cliquez sur « Importer une photo » pour utiliser n'importe quelle image de votre appareil comme avatar du contact — elle est automatiquement recadrée en cercle. Si vous ignorez cette étape, l'avatar reste un cercle coloré avec les initiales du contact.