Telegram Mesajlarında Widget'ların Nasıl Çalıştığını Anlamak

Telegram mesajlarında widget'lar, doğrudan sohbet balonunda yaşayan, HTML, CSS ve JavaScript ile yazılmış küçük uygulamalardır: oyun, hesap makinesi, anket ya da bot cevabı, ayrı pencere veya Mini App olmadan doğrudan mesaj içinde açılır. Telegram istemcilerinde bu yapılar farklı adlarla anılır — message widgets, HTML bubbles (macOS beta'da HTMLBubbles modülü), zengin mesajlarda tgwidget bloğu — ama hepsi aynı mekanizmaya dayanır. Bu sistem şu anda Android, iOS ve macOS için beta sürümlerde çalışıyor ve kod yazmadan widget oluşturmak için bekleyen liste, @catalogue_app üzerinden açılmış durumda.

Widget bekleyen listeye katıl

Mesaj Widget'ı Nedir?

Normal bir mesaj sadece metin ve medya gösterir. Widget ise ayrı bir medya türüdür: messageMediaWidget. İçinde, kendi stilleri ve betikleriyle birlikte sıkıştırılmış bir HTML belgesi bulunur; boyutu ve iki veri setiyle birlikte gelir. İstemci, bu belgeyi balon içinde çizer ve JavaScript’ini bir sandık içinde çalıştırır. Widget, tıklamalara yanıt verir, animasyonlar yapar, durumu saklar ve sohbet temasına göre uyarlanır.

Widget'ların Şu Anda Çalıştığı Yerler

Android beta, beta testciler kanalı ve doğrudan bağlantı üzerinden dağıtılmaktadır. Bu derlemede istemci protokolü, genel sürümün bir üstü olan 233 numaralı katmanı kullanır; widget'lar için sunucudan teslimat, bot inline yanıtları ve gönderim sonrası veri güncelleme türleri zaten mevcuttur.

Android'da Widget Nasıl Çalışır?

Widget'ın altında bir tarayıcı yoktur. HTML yapısı, litehtml tabanlı yerel bir render’ın işleyeceği şekilde ayrıştırılır ve JavaScript, ayrı bir QuickJS yorumlayıcısı tarafından kendi iş parçacığında çalıştırılır. Script için DOM sanal olarak emüle edilir: değişiklikler, render’a paketler halinde gönderilir ve her paket çizimden önce doğrulayıcı tarafından kontrol edilir. Gerçek tıklama, script değil, yerel dokunma yargıçları tarafından belirlenir — bu yüzden yapay tıklama, kullanıcı parmağı gibi görünmez.

Detaylı Android ve iOS beta analizi için Android ve iOS beta makalesine bakabilirsiniz.

iOS ve macOS'ta Widget Nasıl Çalışır?

Apple platformlarında, belge WebKit tarafından ayrı bir WidgetSandbox modülünde çizilir. Bu modül, üç katmanla ağdan izole edilmiştir: içerik güvenlik politikası, http, https ve ws’yi engelleyen kurallar listesi ve kod çalıştırılmadan önce pencere içindeki ağ sınıflarının kaldırılması. macOS beta’sında HTMLBubbles modülüyle birlikte, mesaj içeriğine app:three içeriğindeki bağlantı ile dahil edilen three.js kütüphanesi de bulunur. 3D sahneler, uygulamanın Metal render’ı tarafından çizilir. İlk sürümlerde nasıl göründüğü hakkında bilgi için macOS beta makalesine bakabilirsiniz.

Widget'ın Yaptığı Şeyler

• Düzenleme ve animasyon — flex, gradientler, yuvarlak köşeler, transform, CSS animasyonları ve geçişler.
• Grafik — SVG ve canvas 2D: yollar, gradientler, desenler, piksel işlemleri.
• Formlar — metin alanları, listeler, kaydırıcılar, butonlar, açılır bloklar.
• Durum — her widget için kendi localStorage’i vardır ve mesajla birlikte saklanır: oyun skoru ve girilen veriler istemci yeniden başlatıldığında bile korunur.
• Tema uyumu — sohbet renkleri CSS değişkenleriyle --tg-theme-* olarak gelir ve widget kendi kendine ışık ve karanlık temaya uyarlanır.
• Geribildirim — HapticFeedback ile titreşim, tıklama ile bağlantılar, metin kopyalama.
• Bot ile iletişim — widget, tıklama ile kendi botuna 64 bayt’a kadar veri gönderir ve 1.024 bayt’a kadar yanıt alır; bot, zaten gönderilmiş widget’ın verilerini güncelleyebilir.
• Görüş — widget, kimin açtığını (ID, isim, Premium) ve hangi sohbette olduğunu bilir.

Widget’ın Olmadığı Şeyler ve Nedenleri

Widget’ın hiçbir ağ bağlantısı yoktur: fetch, XMLHttpRequest, WebSocket ve iş parçacıkları (workers) boşluklarla değiştirilmiştir. Bu bir eksiklik değil, bilinçli bir tasarım tercihidir: alınan widget, okuyucunun IP adresini açığa çıkarmaz ve internet olmadan çalışır. Gerçek zamanlı veriler, bot aracılığıyla gelir — tıklama ile istek veya mesaj verilerinin güncellenmesiyle.

Bir JavaScript görevi için 500 ms işlemci süresi ve 64 MB bellek kotası vardır. Balon yüksekliği Android’de 50 ila 600 dp, iOS’da ise 24 ila 900 pt arasındadır. Ekranın dışında kalan animasyonlar duraklatılır.

Kotalara Uymak

Ağır işler, requestAnimationFrame veya setTimeout ile 500 ms’den küçük parçalara bölünür. Sabit adım fizikli oyun döngüsü, kota içinde rahatlıkla sığar: Geometry Dash tarzı bir yarışmacı, 3.289 karede 30 ms işlemci süresiyle tüm seviyeyi geçer, kare başına 109 canvas komutu kullanır.

Widget ile Yapabilecekleriniz

• Oyunlar — canvas tabanlı arka, bulmacalar, tıklama oyunları, metin maceraları, sohbet içinde skor turnuvaları.
• Yapay Zeka Widget'ları — tıklama ile soru, bot aracılığıyla modelin cevabı aynı balonda.
• Hesap makineleri ve dönüştürücüler — döviz, yüzde, birimler, şirket için hesap bölme.
• Anketler ve klasik sorular — kendi tasarımıyla, yerinde skor ve sonuçlarla.
• Kartlar ve grafikler — profil, tahmin, istatistikler, mesaj verilerine göre çizilmiş.
• Akıllı Arayüzler — botun, belirli bir isteğe göre oluşturduğu arayüz: rezervasyon formu, zaman seçimi, sepet.

Ve bunun ötesi: widget, bir HTML belgesidir ve sandıkta yer alabilen her şey, bir mesaj olarak gönderilebilir.

🎮 Mesajlarda Oyunlar — Bekleyen listeye katıl

🤖 Yapay Zeka Widget'ları — Bekleyen listeye katıl

🧮 Hesap makineleri ve dönüştürücüler — Bekleyen listeye katıl

Kod yazmadan Kendi Widget'ınızı Oluşturun

Widget, içine belge yerleştirilmiş bir mesajdır, bu yüzden programlama bilgisi olmadan hazır bloklarla birleştirilebilir. Kod yazmadan widget oluşturmak için @catalogue_app, oyun, klasik soru veya hesap makinesi şablonu, kendi metinleriniz ve renklerinizle birlikte hazır bir widget oluşturur. Kendi botunuzla bu şablonu kendi sohbetinize gönderip, başkalarının da kopyalayıp kendi versiyonlarını oluşturmasını sağlayabilirsiniz.

Bekleyen liste, kendi widget’ınızı isteyenleri toplar. Telegram’ın tüm uygulamalarında widget’lar yayınlandığında, @catalogue_app bu kişilere ilk olarak haber verir.

🧩 Kod yazmadan kendi widget’ınızı — Bekleyen listeye katıl

Telegram Android beta’sında çalışan bir oyun widget’ı, @catalogue_app üzerinden /game komutuyla gönderilebilir.

🎮 Oyun widget’ını deneyin

Sık Sorulan Sorular

Telegram’da HTML bubbles nedir?

Bu, macOS beta’sında bulunan widget modülüdür: HTML ve CSS ile tasarlanmış, içine JavaScript yerleştirilmiş bir mesaj, doğrudan sohbet balonunda yaşar. Android ve iOS’da aynı mekanizma "mesaj widget’ları" olarak adlandırılır.

Şimdi widget gönderebilir miyim?

Widget’lar Android, iOS ve macOS beta sürümlerinde görüntüleniyor. Bot API’de henüz gönderme yöntemi yoktur; beta protokolünde zaten sunucudan teslimat, bot inline yanıtları ve gönderim sonrası veri güncelleme türleri mevcuttur.

Widget, Mini App’den neyle ayrılır?

Mini App ayrı bir pencerede açılır ve sunucudan sayfa yükler. Widget ise sohbet akışında yer alır ve tüm kodu kendi mesajında taşır. Widget’ın ağ bağlantısı yoktur; dış dünya ile iletişim, bot aracılığıyla sağlanır.

Programlama bilmek gerekir mi?

Widget’ı sıfırdan yazmak istiyorsanız, HTML, CSS ve JavaScript bilmek gerekir. Ancak şablonlardan kendi widget’ınızı oluşturmak istiyorsanız, bu gerekmez: bu amaçla @catalogue_app’da kod yazmadan widget oluşturucu hazırlanıyor.

Widget’lar ne zaman sabit sürümlerde çıkacak?

Telegram henüz tarih açıklamadı. Mekanizma şu anda üç platformun da beta sürümlerinde bulunuyor ve Android beta’sunda istemci protokolü için sunucu türleri mevcut.