CodeKitHubApa Itu Alat Ini?
Generator Chat Microsoft Teams adalah alat mockup berbasis browser yang meniru tampilan chat satu-lawan-satu di Teams — header dengan avatar kontak, titik kehadiran, nama dan status, ditambah ikon panggilan/video/berbagi, serta alur pesan menggunakan gaya gelembung membulat dan rata kanan khas Teams untuk pesan keluar.
Teams secara default menggunakan tema terang (latar belakang putih, aksen ungu Fluent #6264A7 yang lembut), sesuai dengan tampilan yang dilihat sebagian besar pengguna Microsoft 365, dengan sakelar mode gelap opsional.
Setiap kontak memiliki status kehadiran — Tersedia (hijau), Sibuk (merah), Menjauh (kuning), atau Offline (abu-abu) — ditampilkan sebagai titik kecil berwarna pada avatar, sama seperti klien Teams sungguhan.
Hanya untuk hiburan dan penggunaan mockup: buat demo produk perusahaan, ilustrasikan alur kerja Microsoft 365 untuk presentasi, atau buat storyboard skenario dukungan. Alat ini tidak boleh digunakan untuk menyamar sebagai percakapan tempat kerja nyata, rekan kerja sungguhan, atau memalsukan bukti sesuatu yang sebenarnya tidak dikatakan seseorang.
Apa pun yang Anda ketik tidak pernah meninggalkan perangkat Anda. Seluruh percakapan digambar dengan HTML Canvas API langsung di browser Anda, dan PNG dibuat serta diunduh secara lokal.
Mengapa Menggunakannya?
- Buat tangkapan layar chat Teams yang realistis untuk demo perangkat lunak perusahaan dan studi kasus.
- Buat mockup tampilan pesan bot atau notifikasi Teams sebelum membangunnya.
- Ilustrasikan skenario dukungan TI, alur onboarding, atau contoh komunikasi tempat kerja untuk presentasi.
- Buat prototipe UI chat bergaya Teams untuk alat internal.
- Rendering 100% lokal — teks percakapan Anda tidak pernah menyentuh server.
Cara Menggunakan
- Atur nama kontak dan status kehadiran (Tersedia, Sibuk, Menjauh, atau Offline).
- Unggah foto untuk avatar, atau biarkan sebagai lingkaran berwarna dengan inisial.
- Pilih tema terang atau gelap — Teams secara default terang.
- Tambahkan baris pesan: ketik teksnya, pilih sisi (mereka/saya) dan stempel waktu.
- Perhatikan pratinjau berbentuk ponsel diperbarui secara langsung, lalu klik "Unduh PNG" untuk menyimpan gambar.
Contoh
Input
Kontak: "Jordan" · Status: "Tersedia" · Pesan 1 (mereka): "Hai! Sempat lihat itu tidak?" · Pesan 2 (mereka): "Bagus, saya akan kirim sisanya malam ini" · Pesan 3 (saya): "Baru saja lihat — bagus sekali, kirim saja"Output
Gambar PNG yang menampilkan chat Teams bertema terang: header dengan avatar Jordan, titik kehadiran hijau, nama dan status "Tersedia", dua gelembung masuk abu-abu muda di kiri dengan nama dan stempel waktu di atasnya, serta gelembung keluar ungu muda di kanan.Gambar dibuat secara instan di canvas pratinjau langsung dan diunduh dengan satu klik — tanpa menunggu, tanpa unggah.
Apa yang bisa Anda sesuaikan
- Nama kontak dan status kehadiran (Tersedia, Sibuk, Menjauh, Offline).
- Avatar: unggah foto asli (dipotong menjadi lingkaran) atau pilih warna cadangan.
- Tema terang atau gelap, dengan terang sebagai default Teams yang autentik.
- Baris pesan tanpa batas, masing-masing dengan teks, sisi (mereka/saya), dan stempel waktunya sendiri.
Penggunaan yang bertanggung jawab
Generator ini ada untuk memudahkan pembuatan tangkapan layar bergaya Teams yang jelas-jelas fiktif untuk demo perusahaan, presentasi, dan pekerjaan desain. Ini bukan alat untuk memalsukan bukti, mementaskan pelecehan tempat kerja, atau menyesatkan siapa pun agar berpikir bahwa percakapan palsu terjadi di tenant Microsoft 365 yang sungguhan. Jika Anda berencana membagikan gambar yang dibuat dengan alat ini, pertimbangkan untuk menambahkan konteks (seperti "palsu" atau "mockup") agar pemirsa memahami bahwa ini bukan percakapan sungguhan.
Pertanyaan yang Sering Diajukan
Apakah menggunakan alat ini legal atau etis?
Alat ini sendiri legal digunakan untuk hiburan, demo produk, presentasi, dan pekerjaan desain. Yang tidak legal atau etis adalah menggunakan gambar yang dihasilkan untuk menipu seseorang — misalnya menyajikannya sebagai percakapan Teams sungguhan untuk melakukan penipuan, melecehkan atau mencemarkan nama baik rekan kerja, atau menyamar sebagai chat tempat kerja nyata. Tergantung di mana Anda tinggal, penyalahgunaan semacam itu dapat merupakan penipuan, pencemaran nama baik, atau pelecehan. Mohon gunakan ini hanya untuk tujuan yang jelas-jelas fiktif atau ilustratif.
Apakah alat ini mengunggah pesan atau foto saya ke suatu tempat?
Tidak. Setiap pesan, nama, foto, dan pengaturan yang Anda masukkan tetap berada di memori browser Anda dan digambar langsung ke elemen canvas menggunakan JavaScript. File PNG dibuat dan diunduh di perangkat Anda — tidak ada yang pernah dikirim ke server mana pun.
Bisakah saya mengontrol titik status kehadiran?
Ya. Pilih Tersedia (hijau), Sibuk (merah), Menjauh (kuning), atau Offline (abu-abu) dari menu dropdown kehadiran, dan titik kecil berwarna pada avatar kontak akan diperbarui sesuai, sama seperti klien Teams sungguhan. Jika skenario Anda tentang balasan cepat atau percakapan yang sedang berlangsung, gunakan Tersedia atau Sibuk; jika inti mockup Anda adalah bahwa sebuah pesan tidak dibalas atau dilihat belakangan, gunakan Menjauh atau Offline agar terasa meyakinkan.
Apakah Teams benar-benar menggunakan gelembung chat membulat seperti ini?
Ya. Berbeda dengan Discord dan Slack yang menampilkan pesan sebagai daftar datar, Microsoft Teams menggunakan gelembung pesan membulat: pesan masuk muncul di kiri dengan nama pengirim di atasnya, dan pesan Anda sendiri muncul rata kanan dalam gelembung ungu muda. Alat ini mereproduksi tata letak persis tersebut.
Bisakah saya mengunggah foto asli sebagai avatar?
Ya. Klik "Unggah foto" untuk menggunakan gambar apa pun dari perangkat Anda sebagai avatar kontak — gambar tersebut akan dipotong otomatis menjadi lingkaran. Jika Anda melewati langkah ini, avatar akan kembali menjadi lingkaran berwarna dengan inisial kontak.