Cách hoạt động của widget trong tin nhắn Telegram trên Android, iOS và macOS

Widget trong tin nhắn Telegram là những chương trình nhỏ được xây dựng từ HTML, CSS và JavaScript, sống trực tiếp trong hộp tin nhắn: trò chơi, máy tính, khảo sát hay phản hồi từ bot đều được mở ngay trong cuộc trò chuyện mà không cần cửa sổ riêng hay Mini App. Trong các ứng dụng Telegram, chúng được gọi bằng nhiều tên khác nhau — message widgets, HTML bubbles (module HTMLBubbles trong bản beta cho macOS), khối tgwidget trong tin nhắn rich — nhưng đều chỉ về một cơ chế duy nhất. Cơ chế này đã hoạt động trong các bản beta của Telegram cho Android, iOS và macOS, và danh sách chờ cho công cụ tạo widget không cần code đã được mở tại @catalogue_app.

Đăng ký danh sách chờ widget

Widget trong tin nhắn là gì

Tin nhắn thông thường chỉ hiển thị văn bản và nội dung đa phương tiện. Widget là một loại nội dung đa phương tiện riêng biệt, messageMediaWidget: bên trong là một tài liệu HTML được nén kèm theo các kiểu dáng và mã JavaScript, cùng với kích thước và hai bộ dữ liệu. Client sẽ vẽ tài liệu này vào hộp tin nhắn và thực thi JavaScript trong môi trường cách ly (sandbox), còn chính widget sẽ phản hồi với thao tác chạm, hoạt hình, lưu trạng thái và tự động thay đổi theo chủ đề cuộc trò chuyện.

Widget đã hoạt động ở đâu

Phiên bản beta Android được phát hành qua kênh beta tester và liên kết trực tiếp từ trang web Telegram. Giao thức client ở phiên bản này có cấp độ 233, cao hơn một cấp so với phiên bản công khai: đã có sẵn các kiểu dữ liệu để server gửi widget, phản hồi inline từ bot và cập nhật dữ liệu sau khi gửi.

Cách widget hoạt động trên Android

Không có trình duyệt bên dưới widget. Cấu trúc được phân tích và vẽ bởi bộ renderer nội bộ dựa trên litehtml, còn JavaScript được thực thi bởi bộ thông dịch QuickJS riêng biệt trong luồng của riêng nó. DOM cho script được mô phỏng: các thay đổi được gửi về renderer theo từng đợt, và mỗi đợt đều được kiểm tra tính hợp lệ trước khi vẽ. Việc nhấn chạm thực sự hay giả lập được quyết định bởi bộ xử lý chạm nội bộ, chứ không phải script — do đó, cú chạm giả lập sẽ không bị nhầm thành thao tác của người dùng.

Chi tiết về bản beta Android và iOS có thể xem tại bài viết về widget tin nhắn Telegram trong bản beta Android và iOS.

Cách widget hoạt động trên iOS và macOS

Trên nền tảng Apple, tài liệu được vẽ bởi WebKit trong module riêng biệt WidgetSandbox, được bảo vệ khỏi mạng bằng ba lớp: chính sách bảo mật nội dung, danh sách quy tắc chặn các kết nối http, https và ws, và loại bỏ các lớp mạng khỏi cửa sổ trước khi chạy mã. Trong bản beta macOS, cùng với module HTMLBubbles, còn có thư viện three.js — widget có thể kết nối qua liên kết nội bộ app:three để vẽ cảnh 3D bằng Metal-Renderer của ứng dụng. Hình ảnh về các bản đầu tiên có thể xem tại bài viết về beta macOS.

Widget có thể làm được gì

• Thiết kế và hoạt hình — flex, gradient, bo tròn, transform, hoạt ảnh CSS và transitions.
• Đồ họa — SVG và canvas 2D: đường đi, gradient, mẫu, thao tác pixel.
• Form — trường văn bản, danh sách, thanh trượt, nút, khối mở rộng.
• Trạng thái — localStorage riêng cho từng widget, lưu cùng tin nhắn: điểm số trò chơi hay dữ liệu nhập vào sẽ không mất khi khởi động lại client.
• Chủ đề — màu sắc cuộc trò chuyện được truyền vào qua biến CSS --tg-theme-*, widget tự động chuyển đổi giữa chế độ sáng và tối.
• Phản hồi — rung qua HapticFeedback, liên kết khi chạm, sao chép văn bản.
• Bot — khi chạm, widget gửi tối đa 64 byte đến bot và nhận phản hồi tối đa 1.024 byte; bot có thể cập nhật dữ liệu của widget đã gửi.
• Người xem — widget biết ai đã mở nó (ID, tên, Premium) và nằm trong cuộc trò chuyện nào.

Widget không có gì và tại sao

Widget hoàn toàn không có kết nối mạng: fetch, XMLHttpRequest, WebSocket và worker bị thay thế bằng các hàm giả. Đây là tính năng, chứ không phải lỗi: widget nhận được không thể tiết lộ IP người đọc và hoạt động mà không cần internet. Dữ liệu thời gian thực được cung cấp qua bot — bằng cách gửi yêu cầu khi chạm hoặc cập nhật dữ liệu tin nhắn.

Giới hạn cho một tác vụ JavaScript là 500ms CPU và 64MB RAM. Chiều cao hộp tin nhắn từ 50 đến 600 dp trên Android, từ 24 đến 900 pt trên iOS. Hoạt ảnh ngoài màn hình sẽ tạm dừng.

Cách tối ưu giới hạn

Công việc nặng được chia nhỏ thành các phần nhỏ hơn 500ms bằng requestAnimationFrame hoặc setTimeout. Vòng lặp game với bước vật lý cố định có thể nằm trong giới hạn với dư sức: runner kiểu Geometry Dash hoàn thành cả cấp độ 3.289 khung hình chỉ trong 30ms CPU, tối đa 109 lệnh canvas mỗi khung hình.

Những gì bạn có thể làm với widget

• Trò chơi — arcade trên canvas, câu đố, clicker, câu chuyện văn bản, giải đấu điểm số ngay trong cuộc trò chuyện.
• Widget AI — đặt câu hỏi bằng một cú chạm, nhận câu trả lời từ mô hình qua bot, hiển thị ngay trong hộp tin nhắn.
• Máy tính và chuyển đổi — tiền tệ, phần trăm, đơn vị, chia hóa đơn cho nhóm.
• Khảo sát và quiz — thiết kế riêng, đếm điểm và hiển thị kết quả ngay tại chỗ.
• Thẻ và biểu đồ — hồ sơ, dự báo, thống kê, được vẽ dựa trên dữ liệu trong tin nhắn.
• Giao diện thông minh — giao diện do bot tự động tạo theo yêu cầu cụ thể: form đặt phòng, chọn thời gian, giỏ hàng.

Không chỉ giới hạn ở đó: widget là một tài liệu HTML, nên bất kỳ thứ gì vừa khung sandbox đều có thể gửi dưới dạng tin nhắn.

🎮 Trò chơi trong tin nhắn — đăng ký danh sách chờ

🤖 Widget AI — đăng ký danh sách chờ

🧮 Máy tính và chuyển đổi — đăng ký danh sách chờ

Tạo widget riêng mà không cần code

Widget là một tin nhắn chứa một tài liệu bên trong, nên bạn có thể xây dựng nó từ các khối có sẵn mà không cần lập trình. Công cụ tạo widget không cần code đang được chuẩn bị tại @catalogue_app: chọn mẫu trò chơi, quiz hay máy tính, thay đổi văn bản và màu sắc — và widget đã hoàn chỉnh có thể gửi vào bất kỳ cuộc trò chuyện nào. Bạn cũng có thể gửi widget từ bot riêng được tạo trong @catalogue_app, và chia sẻ mẫu để người khác fork và tạo phiên bản riêng.

Danh sách chờ tập hợp những ai muốn có widget riêng: khi widget chính thức ra mắt trên tất cả ứng dụng Telegram, @catalogue_app sẽ thông báo đầu tiên.

🧩 Tạo widget riêng mà không cần code — đăng ký danh sách chờ

Trò chơi-đơn vị đã hoạt động trong bản beta Android của Telegram có thể gửi bằng lệnh /game tại @catalogue_app.

🎮 Thử trò chơi-đơn vị

Câu hỏi thường gặp

HTML bubbles trong Telegram là gì?

Đây là tên gọi module widget trong bản beta Telegram cho macOS: một tin nhắn được thiết kế bằng HTML và CSS, có tích hợp JavaScript, sống trực tiếp trong hộp tin nhắn. Trên Android và iOS, cơ chế tương tự được gọi là widget trong tin nhắn.

Có thể gửi widget ngay bây giờ không?

Widget đang hoạt động trong bản beta Android, iOS và macOS. Hiện tại chưa có phương thức gửi widget qua Bot API; tuy nhiên, giao thức beta đã có sẵn các kiểu dữ liệu để server gửi widget và bot trả lời inline.

Widget khác Mini App ở điểm nào?

Mini App mở trong cửa sổ riêng và tải trang từ máy chủ, trong khi widget sống trong dòng tin nhắn và mang toàn bộ mã trong chính tin nhắn. Widget không có kết nối mạng, liên hệ với thế giới bên ngoài thông qua bot.

Có cần biết lập trình không?

Để viết widget từ đầu thì có, vì bạn cần HTML, CSS và JavaScript. Nhưng nếu muốn tạo widget từ mẫu thì không cần: chính công cụ tạo không cần code tại @catalogue_app đã được xây dựng để phục vụ điều đó.

Widget sẽ ra mắt trong phiên bản ổn định khi nào?

Telegram chưa công bố ngày cụ thể. Cơ chế đã có mặt trong bản beta của cả ba nền tảng, và bản beta Android đã có sẵn kiểu dữ liệu server trong giao thức.