Los widgets en los mensajes de Telegram son mini‑apps hechas con HTML, CSS y JavaScript que viven directamente dentro del globo de conversación: un juego, una calculadora, una encuesta o la respuesta de un bot se abren sin ventana separada y sin Mini App. En los clientes de Telegram se les llama de distintas formas — message widgets, HTML bubbles (módulo HTMLBubbles en la beta para macOS), bloque tgwidget en rich‑message — pero se trata del mismo mecanismo. Ya funciona en las betas de Telegram para Android, iOS y macOS, y la lista de espera del constructor de widgets sin código está abierta en @catalogue_app.
Entrar en la lista de espera de widgets
Qué es un widget en un mensaje
Un mensaje normal muestra texto y medios. Un widget es un tipo de medio distinto, messageMediaWidget: dentro lleva un documento HTML comprimido con sus propios estilos y scripts, sus dimensiones y dos conjuntos de datos. El cliente dibuja el documento dentro del globo y ejecuta su JavaScript en una sandbox; el propio widget responde a toques, se anima, guarda estado y se adapta al tema del chat.
| Widget en mensaje | Mini App | |
|---|---|---|
| Dónde se abre | directamente en el feed del chat | en una ventana separada sobre el chat |
| De qué está hecho | HTML, CSS y JavaScript dentro del mensaje | página web en el servidor del desarrollador |
| Red | ninguna: todo lo necesario está en el mensaje | sí, como en cualquier sitio |
| Reenviar | se reenvía como mensaje, con su propio estado | se reenvía como enlace |
| Conexión con bot | solicitud al tocar, respuesta de hasta 1 024 bytes | cualquier petición a su propio servidor |
Dónde ya funcionan los widgets
| Cliente | Build | Estado |
|---|---|---|
| Android, beta | 13.2.0 | los widgets se dibujan y ejecutan JavaScript |
| iOS, beta | 13.2 | widgets en mensajes y herramientas para probarlos |
| macOS, beta | 13.1.0 | sandbox, peticiones al bot, escenas 3D con three.js |
| Telegram Desktop | 7.3 | todavía no |
La beta de Android se distribuye por el canal de beta‑testers y por enlace directo desde la web de Telegram. El protocolo del cliente en ella es capa 233, una versión más nueva que la pública: ya incluye tipos para la entrega del widget por el servidor, para respuestas inline de bots y para actualizar datos tras el envío.
Cómo funciona el widget en Android
No hay navegador bajo el widget. El marcado lo procesa y dibuja un renderizador nativo basado en litehtml, y el JavaScript lo ejecuta un intérprete QuickJS en su propio hilo. El DOM para el script está emulado: los cambios se envían al renderizador en lotes, y cada lote se valida antes de dibujarse. El toque real lo decide el juez nativo de gestos, no el script, por lo que un clic sintético no se confunde con el dedo del usuario.
Un análisis detallado del build está en el artículo sobre las betas de Android e iOS.
Cómo funciona el widget en iOS y macOS
En las plataformas Apple el documento lo dibuja WebKit dentro de un módulo separado WidgetSandbox, aislado de la red por tres capas: política de seguridad de contenido, lista de reglas que bloquea http, https y ws, y eliminación de clases de red de la ventana antes de ejecutar el código. En la beta para macOS, junto al módulo HTMLBubbles, se incluye la biblioteca three.js, que el mensaje carga mediante el enlace interno app:three: las escenas 3D las renderiza el motor Metal de la aplicación. Cómo se veía en las primeras builds está en el artículo sobre la beta para macOS.
Qué puede hacer un widget
- Maquetado y animación — flex, gradientes, bordes redondeados,
transform, animaciones CSS y transitions. - Gráfica — SVG y canvas 2D: rutas, gradientes, patrones, manipulación de píxeles.
- Formularios — campos de texto, listas, sliders, botones, bloques desplegables.
- Estado —
localStoragepropio de cada widget, almacenado junto al mensaje: la puntuación del juego y los datos ingresados sobreviven al reinicio del cliente. - Tema — los colores del chat llegan como variables CSS
--tg-theme-*, y el widget se repinta automáticamente en modo claro y oscuro. - Respuesta — vibración mediante
HapticFeedback, enlaces al tocar, copia de texto. - Bot — al tocar, el widget envía a su bot hasta 64 bytes y recibe una respuesta de hasta 1 024 bytes; el bot puede actualizar los datos del widget ya enviado.
- Observador — el widget conoce quién lo abrió (id, nombre, Premium) y en qué chat está.
Qué le falta al widget y por qué
El widget no tiene red alguna: fetch, XMLHttpRequest, WebSocket y workers están sustituidos por stubs. Eso es una característica, no una limitación: el widget no puede revelar la IP del lector y funciona sin internet. Los datos en tiempo real llegan a través del bot — mediante una petición al tocar o una actualización del mensaje.
La cuota para una tarea de JavaScript es de 500 ms de CPU y 64 MB de RAM. La altura del globo varía de 50 a 600 dp en Android y de 24 a 900 pt en iOS. Las animaciones fuera de pantalla se ponen en pausa.
Cómo mantenerse dentro de la cuota
El trabajo pesado se fragmenta en bloques menores a 500 ms usando requestAnimationFrame o setTimeout. Un bucle de juego con paso de física fijo cabe en la cuota con holgura: un runner al estilo Geometry Dash completa todo el nivel en 3 289 frames usando 30 ms de CPU, con hasta 109 comandos canvas por frame.
Qué se puede crear con un widget
- Juegos — arcade en canvas, puzzles, clickers, aventuras textuales, torneos con puntuación directamente en el chat.
- Widgets de IA — pregunta con un toque, respuesta del modelo a través del bot en el mismo globo.
- Calculadoras y convertidores — divisas, porcentajes, unidades, split de cuentas para grupos.
- Encuestas y quizzes — con su propio diseño, conteo y resultados in‑place.
- Tarjetas y gráficos — perfil, pronósticos, estadísticas, dibujados a partir de datos del mensaje.
- Intelligent UI — interfaz que el bot genera bajo demanda: formulario de reserva, selección de horario, carrito de compras.
Y no solo eso: un widget es un documento HTML, y cualquier cosa que quepa en la sandbox puede enviarse como mensaje.
🎮 Juegos en mensajes — entrar en la lista de espera
🤖 Widgets de IA — entrar en la lista de espera
🧮 Calculadoras y convertidores — entrar en la lista de espera
Tu propio widget sin código
Un widget es un solo mensaje con el documento dentro, por lo que puede construirse a partir de bloques predefinidos, sin programar. El constructor de widgets sin código lo ofrece @catalogue_app: plantilla de juego, quiz o calculadora, textos y colores propios — y el widget listo se envía a cualquier chat. Puedes enviar tu instancia desde tu propio bot creado en @catalogue_app y compartir la plantilla para que otros la bifurquen.
La lista de espera agrupa a quienes quieren su propio widget: cuando los widgets estén disponibles en todas las apps de Telegram, @catalogue_app les avisará primero.
🧩 Tu widget sin código — entrar en la lista de espera
El juego‑widget que ya funciona en la beta de Android se envía con el comando /game en @catalogue_app.
Preguntas
¿Qué son los HTML bubbles en Telegram?
Así se llama el módulo de widgets en la beta de Telegram para macOS: un mensaje maquetado con HTML y CSS y con JavaScript incrustado que vive directamente en el globo del chat. En Android e iOS el mismo mecanismo se denomina widgets en mensajes.
¿Ya se pueden enviar widgets?
Los widgets se dibujan en las betas de Android, iOS y macOS. Aún no hay método de envío en Bot API; el protocolo de la beta ya incluye tipos para la entrega del widget por el servidor y para respuestas inline de bots.
¿En qué se diferencia un widget de una Mini App?
Una Mini App se abre en una ventana separada y carga una página desde un servidor; el widget vive en el feed y lleva todo el código dentro del propio mensaje. El widget no tiene red, la comunicación con el exterior pasa por el bot.
¿Necesito saber programar?
Para crear un widget desde cero sí, se trata de HTML, CSS y JavaScript. Para armar uno a partir de una plantilla no, para eso está el constructor sin código en @catalogue_app.
¿Cuándo llegarán los widgets a las versiones estables?
Telegram no ha anunciado una fecha. El mecanismo ya está en las betas de las tres plataformas, y la beta de Android ya incluye los tipos de protocolo necesarios para la entrega del widget desde el servidor.
