CodeKitHubWat is deze tool?
De Microsoft Teams Chat Generator is een browsergebaseerde mockup-tool die de een-op-een chatweergave van Teams nabootst — een header met de avatar van de contactpersoon, aanwezigheidsstip, naam en status, plus bel-/video-/deelicoontjes, en een berichtenthread die Teams' afgeronde, rechts uitgelijnde bubbelstijl gebruikt voor uitgaande berichten.
Teams gebruikt standaard een licht thema (witte achtergrond, gedempte Fluent-paarse accenten #6264A7), overeenkomend met hoe de meeste Microsoft 365-gebruikers het zien, met een optionele donkeremodusschakelaar.
Elke contactpersoon heeft een aanwezigheidsstatus — Beschikbaar (groen), Bezet (rood), Afwezig (geel) of Offline (grijs) — weergegeven als een klein gekleurd stipje op de avatar, precies zoals in de echte Teams-client.
Alleen voor entertainment en mockup-gebruik: bouw een zakelijke productdemo, illustreer een Microsoft 365-workflow voor een presentatie, of storyboard een supportscenario. Het mag nooit worden gebruikt om zich voor te doen als een echt gesprek op de werkplek, een echte collega, of om bewijs te verzinnen van iets dat iemand niet echt heeft gezegd.
Niets wat je typt verlaat ooit je apparaat. Het hele gesprek wordt getekend met de HTML Canvas API rechtstreeks in je browser, en de PNG wordt lokaal gegenereerd en gedownload.
Waarom gebruiken?
- Maak realistische Teams-chat-screenshots voor zakelijke softwaredemo's en casestudy's.
- Maak een mockup van hoe een Teams-bot- of meldingsbericht eruit zal zien voordat je het bouwt.
- Illustreer een IT-supportscenario, onboardingtraject of voorbeeld van werkplekcommunicatie voor een presentatie.
- Prototype een Teams-achtige chat-UI voor een intern hulpmiddel.
- 100% lokale weergave — je gesprekstekst raakt nooit een server.
Hoe te gebruiken
- Stel de contactnaam en aanwezigheidsstatus in (Beschikbaar, Bezet, Afwezig of Offline).
- Upload een foto voor de avatar, of laat het een gekleurde cirkel met initialen.
- Kies een licht of donker thema — Teams is standaard licht.
- Voeg berichtregels toe: typ de tekst, kies een kant (zij/ik) en een tijdstempel.
- Bekijk hoe de telefoonvormige voorvertoning live wordt bijgewerkt en klik dan op "PNG downloaden" om de afbeelding op te slaan.
Voorbeeld
Invoer
Contact: "Jordan" · Status: "Beschikbaar" · Bericht 1 (zij): "Hé! Heb je er al naar kunnen kijken?" · Bericht 2 (zij): "Perfect, ik stuur de rest vanavond" · Bericht 3 (ik): "Net gedaan — ziet er goed uit, verstuur maar"Uitvoer
Een PNG-afbeelding met een lichte Teams-chat: een header met Jordans avatar, een groene aanwezigheidsstip, naam en "Beschikbaar"-status, twee lichtgrijze inkomende bubbels links met naam en tijdstempel erboven, en een lichtpaarse uitgaande bubbel rechts.De afbeelding wordt direct gegenereerd op het live voorvertoningscanvas en gedownload met één klik — geen wachttijd, geen upload.
Wat je kunt aanpassen
- Contactnaam en aanwezigheidsstatus (Beschikbaar, Bezet, Afwezig, Offline).
- Avatar: upload een echte foto (bijgesneden tot een cirkel) of kies een terugvalkleur.
- Licht of donker thema, waarbij licht de authentieke standaard van Teams is.
- Onbeperkt aantal berichtregels, elk met eigen tekst, kant (zij/ik) en tijdstempel.
Verantwoord gebruik
Deze generator bestaat om het gemakkelijk te maken duidelijk fictieve Teams-achtige screenshots te maken voor zakelijke demo's, presentaties en ontwerpwerk. Het is geen hulpmiddel om bewijs te verzinnen, pesten op de werkplek in scène te zetten, of iemand te misleiden te denken dat een nepgesprek plaatsvond in een echte Microsoft 365-tenant. Als je van plan bent een met deze tool gemaakte afbeelding te delen, overweeg dan om context toe te voegen (zoals "nep" of "mockup") zodat kijkers begrijpen dat het geen echt gesprek is.
Veelgestelde vragen
Is het legaal of ethisch om deze tool te gebruiken?
De tool zelf is legaal te gebruiken voor entertainment, productdemo's, presentaties en ontwerpwerk. Wat niet legaal of ethisch is, is het gebruiken van de gegenereerde afbeelding om iemand te misleiden — bijvoorbeeld door het te presenteren als een echt Teams-gesprek om fraude te plegen, een collega te pesten of te belasteren, of je voor te doen als een echte werkplekchat. Afhankelijk van waar je woont, kan dit soort misbruik fraude, laster of intimidatie vormen. Gebruik dit alstublieft alleen voor duidelijk fictieve of illustratieve doeleinden.
Uploadt de tool mijn berichten of foto ergens naartoe?
Nee. Elk bericht, elke naam, foto en instelling die je invoert blijft in het geheugen van je browser en wordt rechtstreeks op een canvas-element getekend met JavaScript. Het PNG-bestand wordt gegenereerd en gedownload op je apparaat — er wordt nooit iets naar een server gestuurd.
Kan ik de aanwezigheidsstatusstip regelen?
Ja. Kies Beschikbaar (groen), Bezet (rood), Afwezig (geel) of Offline (grijs) uit het aanwezigheids-vervolgkeuzemenu, en het kleine gekleurde stipje op de avatar van de contactpersoon wordt overeenkomstig bijgewerkt, precies zoals in de echte Teams-client. Als je scenario gaat over een snelle reactie of een lopend gesprek, gebruik dan Beschikbaar of Bezet; als het punt van je mockup is dat een bericht onbeantwoord bleef of later werd gezien, gebruik dan Afwezig of Offline om dat geloofwaardig te maken.
Gebruikt Teams echt afgeronde chatbubbels zoals deze?
Ja. In tegenstelling tot Discord en Slack, die berichten als een platte lijst tonen, gebruikt Microsoft Teams afgeronde berichtbubbels: inkomende berichten verschijnen links met de naam van de afzender erboven, en je eigen berichten verschijnen rechts uitgelijnd in een lichtpaarse bubbel. Deze tool reproduceert exact die lay-out.
Kan ik een echte foto uploaden als avatar?
Ja. Klik op "Foto uploaden" om elke afbeelding van je apparaat te gebruiken als avatar van de contactpersoon — deze wordt automatisch bijgesneden tot een cirkel. Als je dit overslaat, valt de avatar terug op een gekleurde cirkel met de initialen van de contactpersoon.