Widget dalam pesan Telegram — adalah mini‑aplikasi berbasis HTML, CSS, dan JavaScript yang hidup tepat di dalam gelembung percakapan: game, kalkulator, polling, atau balasan bot terbuka tanpa jendela terpisah dan tanpa Mini App. Di klien Telegram mereka disebut dengan istilah yang beragam — message widgets, HTML bubbles (modul HTMLBubbles dalam beta untuk macOS), blok tgwidget dalam rich‑message — tapi semuanya merujuk pada mekanisme yang sama. Mekanisme ini sudah berfungsi di beta Telegram untuk Android, iOS, dan macOS, dan daftar tunggu pembuat widget tanpa kode sudah dibuka di @catalogue_app.
Apa itu widget dalam pesan
Pesan biasa menampilkan teks dan media. Widget adalah tipe media terpisah, messageMediaWidget: di dalamnya terdapat dokumen HTML terkompresi lengkap dengan style dan script‑nya, beserta ukuran serta dua set data. Klien merender dokumen di dalam gelembung dan mengeksekusi JavaScript‑nya di sandbox, sementara widget merespons tap, beranimasi, menyimpan state, dan menyesuaikan tema chat.
| Widget dalam pesan | Mini App | |
|---|---|---|
| Tempat dibuka | langsung di feed chat | di jendela terpisah di atas chat |
| Dibuat dari | HTML, CSS, dan JavaScript di dalam pesan | halaman web di server pengembang |
| Jaringan | tidak ada: semua yang dibutuhkan ada di pesan | ada, seperti situs web |
| Diteruskan | diteruskan sebagai pesan lengkap dengan state‑nya | hanya link yang diteruskan |
| Koneksi ke bot | request saat tap, balasan ≤ 1 024 byte | request apa saja ke servernya |
Di mana widget sudah berfungsi
| Klien | Build | Status |
|---|---|---|
| Android, beta | 13.2.0 | widget dirender dan JavaScript dijalankan |
| iOS, beta | 13.2 | widget di pesan + alat pengecekan |
| macOS, beta | 13.1.0 | sandbox, request ke bot, scene 3D dengan three.js |
| Telegram Desktop | 7.3 | belum ada |
Beta Android dibagikan lewat channel beta‑tester dan tautan langsung dari situs Telegram. Protokol klien di dalamnya memakai layer 233, satu versi lebih baru dari publik: tipe widget untuk pengiriman oleh server, inline‑reply bot, dan pembaruan data setelah dikirim sudah tersedia.
Cara kerja widget di Android
Tidak ada browser di bawah widget. Markup di‑parse dan dirender oleh renderer native berbasis litehtml, sementara JavaScript dijalankan oleh interpreter QuickJS terpisah di thread‑nya sendiri. DOM untuk script disimulasikan: perubahan dikirim ke renderer secara batch, dan tiap batch diverifikasi validator sebelum dirender. Tap yang sebenarnya diputuskan oleh judge sentuhan native, bukan script — sehingga klik sintetis tidak dianggap sebagai sentuhan pengguna.
Ulasan lengkap build dapat dibaca di materi tentang beta Android dan iOS.
Cara kerja widget di iOS dan macOS
Di platform Apple dokumen dirender oleh WebKit dalam modul terpisah WidgetSandbox, yang terisolasi dari jaringan oleh tiga lapisan: kebijakan keamanan konten, daftar aturan yang memblokir http, https, dan ws, serta penghapusan kelas jaringan dari window sebelum kode dijalankan. Pada beta macOS, bersama modul HTMLBubbles terdapat library three.js yang di‑link oleh pesan lewat internal URL app:three: scene 3D digambar oleh renderer Metal aplikasi. Penjelasan visual pada build awal dapat dilihat di materi tentang beta macOS.
Apa yang dapat dilakukan widget
- Layout & animasi — flex, gradient, border‑radius,
transform, animasi CSS dan transitions. - Grafik — SVG dan canvas 2D: path, gradient, pattern, manipulasi pixel.
- Form — input teks, dropdown, slider, tombol, collapsible block.
- State —
localStoragemilik masing‑masing widget disimpan bersama pesan: skor game atau data yang dimasukkan tetap ada setelah klien di‑restart. - Tema — warna chat tersedia lewat CSS‑variable
--tg-theme-*, sehingga widget otomatis menyesuaikan tema terang atau gelap. - Respons — vibrasi via
HapticFeedback, link yang dapat diklik, copy teks. - Bot — saat tap, widget mengirim ≤ 64 byte ke botnya dan menerima balasan ≤ 1 024 byte; bot dapat memperbarui data widget yang sudah terkirim.
- Pengamat — widget mengetahui siapa yang membukanya (id, nama, Premium) dan di chat mana ia berada.
Apa yang tidak dimiliki widget dan mengapa
Widget tidak memiliki akses jaringan sama sekali: fetch, XMLHttpRequest, WebSocket, dan worker digantikan stub. Ini adalah fitur, bukan kekurangan: widget tidak dapat mengungkapkan IP pembaca dan berfungsi tanpa internet. Data dinamis datang lewat bot — request saat tap atau pembaruan pesan.
Kuota untuk satu tugas JavaScript — 500 ms CPU, memori — 64 MB. Tinggi gelembung — antara 50‑600 dp di Android dan 24‑900 pt di iOS. Animasi yang berada di luar layar dipause.
Cara tetap dalam kuota
Pekerjaan berat dibagi menjadi potongan < 500 ms lewat requestAnimationFrame atau setTimeout. Loop game dengan step fisika tetap berada dalam kuota dengan margin: runner ala Geometry Dash menyelesaikan seluruh level dalam 3 289 frame dengan 30 ms CPU, ≤ 109 perintah canvas per frame.
Apa yang bisa dibuat dengan widget
- Game — arcade canvas, puzzle, clicker, text‑based quest, turnamen skor langsung di chat.
- Widget AI — pertanyaan lewat tap, jawaban model lewat bot kembali ke gelembung yang sama.
- Kalkulator & konverter — mata uang, persen, satuan, split tagihan untuk grup.
- Polling & kuis — dengan tampilan kustom, hitungan, dan hasil di tempat.
- Kartu & grafik — profil, prediksi, statistik, visualisasi data pesan.
- Intelligent UI — interface yang dibangun bot sesuai permintaan: form booking, pilihan waktu, keranjang belanja.
Dan tidak terbatas pada itu: widget hanyalah dokumen HTML, jadi apa saja yang dapat masuk sandbox dapat dikirim sebagai pesan.
🎮 Game dalam pesan — daftar tunggu
🧮 Kalkulator & konverter — daftar tunggu
Widget milikmu tanpa kode
Widget hanyalah satu pesan dengan dokumen di dalamnya, sehingga dapat dirakit dari blok‑blok siap pakai tanpa menulis kode. Konstruktor widget tanpa kode disediakan oleh @catalogue_app: pilih template game, kuis, atau kalkulator, atur teks serta warna — lalu widget siap dikirim ke chat mana pun. Instansinya dapat dipanggil dari bot milikmu yang dibuat di @catalogue_app, dan kamu dapat membagikan template agar orang lain dapat fork.
Daftar tunggu mengumpulkan mereka yang ingin membuat widget sendiri: ketika widget tersedia di semua aplikasi Telegram, @catalogue_app akan memberi tahu mereka pertama kali.
🧩 Widget milikmu tanpa kode — daftar tunggu
Game‑widget yang sudah berfungsi di beta Android Telegram dapat dipanggil dengan perintah /game di @catalogue_app.
Pertanyaan
Apa itu HTML bubbles di Telegram?
Itu nama modul widget dalam beta Telegram untuk macOS: pesan yang dirender dengan HTML & CSS serta JavaScript ter‑embed, hidup langsung di dalam gelembung chat. Di Android dan iOS mekanisme yang sama disebut widget dalam pesan.
Sudah bisa mengirim widget?
Widget sudah dapat dirender di beta Android, iOS, dan macOS. Namun belum ada metode pengiriman lewat Bot API; protokol beta sudah menyediakan tipe untuk pengiriman widget oleh server dan inline‑reply bot.
Apa perbedaan widget dengan Mini App?
Mini App terbuka di jendela terpisah dan memuat halaman dari server, sementara widget berada di feed chat dan membawa seluruh kode di dalam pesan. Widget tidak memiliki jaringan, semua komunikasi ke dunia luar lewat bot.
Harus bisa pemrograman?
Jika ingin menulis widget dari nol — ya, itu HTML, CSS, dan JavaScript. Jika ingin merakit dari template — tidak, itulah tujuan konstruktor tanpa kode di @catalogue_app.
Kapan widget akan hadir di versi stabil?
Telegram belum mengumumkan tanggal pasti. Mekanisme sudah ada di beta ketiga platform, dan beta Android sudah menyertakan tipe protokol server untuk widget.
