Tienda de Telegram (Mini App dentro del bot)

Convierte tu bot de Telegram en una tienda completa dentro de la app. Construye un catálogo de productos multipágina y pulido — con fotos, videos, páginas con temas, un asistente de IA por producto y toma de pedidos ligera — que se abre dentro de Telegram en el momento en que tu cliente toca el botón de menú de tu bot. Sin tienda de aplicaciones, sin sitio web aparte, sin checkout que gestionar. Solo un toque, y tu cliente ya está navegando.

Gratis en todos los planes, incluida la prueba. Construido en un compositor visual de arrastrar y soltar en Integrations → Telegram bot → Configure mini app: 12 tipos de bloque, 6 temas, chat de IA por producto, CTAs de pedido que se transfieren a un humano real en tu inbox.

Qué puedes construir

Algunas formas comunes que toma la tienda en producción:

• Tienda boutique — banner hero + cuadrícula de productos + chat por producto (“¿Viene en talla M?”) + formulario de consulta de pedido. Los pedidos llegan a tu inbox; un miembro del equipo responde desde ahí.
• Menú de restaurante — multipágina (Entradas / Platos principales / Bebidas) + galería de fotos + bloque Cart review + campo de dirección de entrega en el checkout.
• Catálogo de cursos o servicios — tarjetas de producto para cada curso con un bloque Video de introducción, testimonios y una CTA back-to-bot tipo “Agendar una llamada”.
• Sitio tipo folleto — hero + página acerca de + galería + tarjeta de contacto + FAQ — sin productos en absoluto. La tienda se convierte en un folleto móvil pulido que vive dentro de tu bot.
• Landing de captura de leads — una página, un hero, un formulario, una CTA. El “embudo de Telegram” más liviano posible.

Empieza con una página y crece a un catálogo multipágina cuando estés listo.

Por qué importa

• Los clientes nunca salen de Telegram. Sin instalación de app, sin dominio que recordar, sin flujo de checkout que abandonar. La tienda se abre en el WebView de Telegram y hereda el tema, el idioma y la sesión del usuario.
• A un toque desde un chat. El botón de menú junto al compositor se conecta automáticamente a tu tienda cuando conectas el bot. La etiqueta cambia automáticamente a “Shop” en el momento en que publicas un producto — sin necesidad de configurar BotFather.
• Chat de producto nativo de IA. El chat por producto está acotado a los documentos que tú adjuntas a ese producto — el asistente puede responder con confianza “¿cuál es la política de devolución de este vestido?”, sin filtrar datos de otros productos.
• Transferencia de pedidos a un humano real. Los formularios de pedido ligeros (modo consulta o carrito) llegan a tu Inbox como una transferencia estructurada, con el DM de Telegram del cliente abierto para hacer seguimiento.
• Gratis en todos los planes. La prueba tiene un tope de 5 páginas / 25 bloques por página / 100 documentos de producto; cada plan pagado elimina los topes. El precio es por organización — agregar un segundo bot de Telegram no cambia el precio de tu plan.

De un vistazo

• Multipágina, arrastrar y soltar. Los usuarios finales tocan el ícono de hamburguesa (arriba a la izquierda) para cambiar de página. Si publicas una sola página, se carga a pantalla completa.
• 12 tipos de bloque — Hero, Product card, Product grid, Carousel, Gallery, FAQ, Testimonial, CTA back-to-bot, Contact, Video, Rich text, Cart review.
• 6 temas (Telegram por defecto + 5 personalizados) con overrides de estilo por bloque.
• Ciclo de vida Draft → Publish (borrador → publicar) con reversión de un clic al último snapshot publicado.
• Toggle de encendido/apagado por integración — desactívalo y el menú del bot vuelve al selector de comandos / de Telegram; la URL pública devuelve 410 Gone para que los marcadores obsoletos no filtren contenido.
• Shell con detección de idioma (inglés, español, portugués brasileño, francés, ruso) — sigue automáticamente el idioma de Telegram del usuario final, o fija un solo idioma.
• Help Center integrado — una superficie de FAQ fija para preguntas ad-hoc, siempre a un toque de distancia. Ver más abajo.
• Sin pagos, sin inventario, sin envíos — esto es una superficie pulida de catálogo + captura de leads, no un stack completo de e-commerce. Combínalo con un humano en tu inbox y tienes un ciclo de ventas completo.

Cómo lo encuentran los clientes

Cuando alguien abre tu bot de Telegram, ve el botón de menú junto al compositor. Al tocarlo se abre tu tienda a pantalla completa dentro de Telegram. La etiqueta del botón es:

• “Shop” — se configura automáticamente si tu tienda publicada contiene cualquier product card o product grid
• “Open” — se configura automáticamente en caso contrario
• Lo que tú hayas escrito — si configuraste una etiqueta personalizada en el compositor (cualquier cadena de 1–32 caracteres sobrevive a cada publicación hasta que la borres)

La URL de la tienda tiene la forma https://storefront.cuneiform.chat/{your-org-slug} (con ?i={integration_id} añadido solo si tu organización tiene más de un bot de Telegram). Copia esta URL desde la tarjeta de integración para códigos QR, anuncios, o para registrar un enlace directo t.me/<bot>/<app> en BotFather (consulta el playbook de BotFather en la tarjeta del bot).

Requisitos previos

• Una integración de Telegram conectada. La tienda se monta sobre ella — no hay una integración separada que agregar.
• (Opcional) Imágenes de producto, copys de producto, entradas de FAQ y documentos de base de conocimiento para conectar al chat por producto.

Inicio rápido (5 minutos)

El camino más corto desde “conecté un bot” hasta “mi primer cliente está navegando”:

1. Ve a Integrations → tu Telegram bot → Configure mini app. El compositor se abre en estado Draft.
2. Haz clic en ”+ Add page” en la barra izquierda. Ponle nombre (p. ej. “Home”).
3. Agrega un bloque Hero — titular, subtitular, una imagen de fondo 16:9 (suelta una foto, el recortador se abre automáticamente).
4. Agrega una Product card — nombre, precio, imagen 1:1, descripción corta. Activa AI chat y adjunta un doc (una ficha PDF, tu política de envío — cualquier cosa de tu KB).
5. Agrega una Order CTA en ese producto — elige modo inquiry, escoge los campos del formulario (name siempre es obligatorio).
6. Haz clic en Publish. El botón de menú del bot se reetiqueta automáticamente a “Shop” porque tienes un producto.
7. Abre tu bot en Telegram. Toca “Shop”. Toca tu producto. Toca “Ask a question”. Toca “Order this”. Envía. Verás la transferencia llegar a tu Inbox en segundos.

Esa es la tienda mínima viable. Agrega más páginas, más productos, temas, videos y un Help Center a medida que creces.

El compositor

El compositor vive en Integrations → [tu Telegram bot] → Configure mini app (también accesible desde el menú de tres puntos en la tarjeta del bot). Es un layout de 3 paneles:

Una barra de herramientas fija arriba tiene: una insignia de estado (Draft / Published), un menú ⋯ (Descartar cambios / Revertir a publicado), Guardar como borrador y Publicar.

Borrador vs Publicado

• Guardar como borrador — tus ediciones se guardan pero los clientes siguen viendo la última versión publicada.
• Publicar — tu borrador se vuelve activo; un “snapshot publicado” congelado se guarda automáticamente para que puedas volver atrás más tarde.
• Descartar cambios — descarta las ediciones locales no guardadas y recarga la última versión guardada (sin llamada al servidor).
• Revertir a publicado — copia el snapshot publicado de vuelta a tu borrador de trabajo y lo vuelve a publicar. Deshabilitado para organizaciones que nunca han publicado antes.

Si haces clic en Guardar como borrador estando actualmente publicado, obtendrás un diálogo de confirmación de “despublicar” (con una pista sobre cómo volver).

Los 12 tipos de bloque

Suelta cualquiera de estos en una página de tu tienda:

Cada bloque también admite overrides de estilo por bloque — color de fondo, color de texto, tamaño de fuente — multiplicados con el tema de la página. Úsalos con moderación; por defecto el tema maneja la apariencia.

Temas

Elige un tema por página. El tema controla el fondo, el color del texto, el color de acento y la tipografía.

Donde no eliges un tema, obtienes el Telegram por defecto — tu tienda siempre se siente nativa a la app de Telegram del cliente.

Controles por integración

Cada integración de Telegram tiene ajustes independientes, acotados a ese único bot. Agregar un segundo bot de Telegram a la misma organización obtiene sus propios toggles independientes. Los tres viven en la barra izquierda del compositor bajo Mini app settings.

Toggle de encendido/apagado de la tienda

• Por defecto: encendido.
• Apagarlo hace dos cosas a la vez:
  1. El botón de menú del bot se restablece al selector de comandos / por defecto de Telegram — la tienda ya no es alcanzable desde la UI del bot.
  2. Si un cliente todavía tiene la URL de la tienda marcada y la abre directamente, el shell muestra un mensaje de “actualmente no disponible” (el servidor devuelve 410 Gone para que los cachés obsoletos no puedan filtrar contenido más allá del interruptor de apagado).
• El toggle confirma una vez con un diálogo antes de deshabilitarse.
• Volver a encenderlo restaura el botón de menú del bot (etiqueta automática o tu override, lo que esté configurado).

Override de la etiqueta del botón de menú

• Por defecto: derivación automática en cada publicación — “Shop” si tu tienda tiene algún bloque de producto, “Open” en caso contrario.
• Configura una etiqueta personalizada (1–32 caracteres) para congelar el texto del botón — la derivación automática se omite a partir de ese punto, incluso después de cambios de contenido o republicación.
• Borra el campo (cadena vacía) para volver a la derivación automática.
• Usa una etiqueta personalizada si tu audiencia no habla inglés — la etiqueta automática por defecto es solo en inglés.

Idioma de UI de la tienda

El shell usa por defecto el propio idioma de Telegram del cliente para su chrome. Si has redactado tu tienda en un solo idioma, puedes fijar el idioma del chrome del shell: elige en, es, pt (brasileño), fr o ru. Dejarlo en blanco mantiene el comportamiento de detección automática.

Esto solo afecta al chrome del shell (drawer, botones del sistema, encabezado del Help Center) — todo lo que hayas escrito en un titular hero, nombre de producto o bloque rich-text se renderiza tal cual.

Chat de IA por producto

Cualquier product card puede volverse un producto chateable. Cada product card lleva una fila de dos botones en el compositor para gestionar los documentos que alimentan su chat:

• Attach docs — abre un selector que te permite escoger desde cualquier carpeta en tu base de conocimiento. Los docs ya adjuntos a este producto se muestran deshabilitados para que no puedas adjuntar dos veces. ¿Necesitas un archivo nuevo? Usa la acción inline Upload new en el selector — aterriza en tu KB y se selecciona automáticamente.
• Linked docs (N) — abre un gestor que lista todo lo actualmente adjunto. Desde ahí puedes desvincular un doc de este producto (el doc se mantiene en tu KB y en cualquier otro producto al que esté vinculado) o saltar a la vista de Knowledge Base para editarlo. El gestor también muestra una tira de “También vinculado a: …” cuando el mismo doc alimenta otros productos.

Cuando un cliente toca el producto, se abre un chat dentro de la hoja. El chat está acotado solo a los documentos vinculados de ese único producto — el asistente no filtrará respuestas de archivos de otros productos. Las conversaciones se transmiten en vivo (SSE) y se almacenan en una colección dedicada por integración.

Algunas cosas que vale la pena saber:

• Un doc puede alimentar múltiples productos. Comparte un solo PDF de “Envíos y devoluciones” entre cada producto en lugar de subirlo cinco veces.
• Desvincular es por producto. Quitar un doc de un product card lo deja intacto en tu KB y en cualquier otro producto que lo vincule. Para borrar un doc en todas partes, bórralo desde la página de Knowledge — todos los vínculos de producto se limpian automáticamente.
• Los docs aterrizan en una carpeta “Showcase Products” por defecto cuando usas la subida inline desde el selector, pero eres libre de organizarlos en cualquier lugar de tu KB.

Los límites de plan se aplican al número total de documentos de producto que puedes adjuntar (ver Límites de plan).

Consultas de pedido y carrito (opcional)

Puedes adjuntar una Order CTA a cualquier product card o product grid. Esto es puramente una transferencia de mensaje estructurada — sin pagos, sin inventario, sin cumplimiento.

Dos modos

• Modo inquiry — el cliente toca “Order this” → se abre un formulario con el producto pre-rellenado → lo envía → una transferencia aterriza en tu inbox.
• Modo cart — el cliente toca “Add to cart” → el producto se agrega a un carrito local (vive solo en su navegador, vinculado a tu integración) → revisa en la página de carrito (un bloque Cart review) y hace checkout → una transferencia multilínea aterriza en tu inbox.

Campos del formulario

Elige cualquier subconjunto de name, phone, email, notes, delivery_address. name siempre es obligatorio sin importar lo que selecciones.

Qué pasa después de enviar

1. Se crea una nueva conversación en tu inbox con el resumen del pedido formateado como primer mensaje.
2. Se crea una transferencia — se le señala a un miembro humano del equipo que tome el control. Los ítems de línea y la información de contacto se adjuntan como metadatos estructurados.
3. El sistema envía instantáneamente un mensaje localizado “Recibimos tu pedido” de vuelta al DM de Telegram del cliente, lo que mantiene abierta la ventana de respuesta de 24 horas de Telegram para que las respuestas de tu equipo desde el inbox se enruten limpiamente de vuelta al cliente.
4. La vista de detalle del inbox renderiza un Order Request Panel dedicado con ítems de línea, precios, información de contacto y notas dispuestos limpiamente.

Anti-spam / anti-duplicado

• Cada cliente puede enviar como máximo 10 pedidos por minuto; cada tenant como máximo 100 por minuto.
• Los toques dobles dentro de 60 segundos sobre el mismo pedido exacto se deduplican; dos pedidos diferentes dentro de 60 segundos pasan.

Help Center integrado

Cada tienda viene con un pequeño Help Center — una página de soporte fija al final del menú de páginas, siempre a un toque para clientes que necesitan una FAQ o quieren preguntarle al bot. Redactado desde un panel dedicado (Integrations → tarjeta del bot → Help Center), lleva hasta ~50 entradas con reordenamiento por arrastre. Dos modos de entrada: curada (la respuesta en markdown se renderiza inline, costo de LLM cero) y agente (al tocar se dispara una pregunta pre-escrita al chat del bot). También puedes mostrar un subconjunto de estas entradas inline en una página de tienda vía el bloque FAQ — útil para poner algunas respuestas clave junto a los product cards.

La mayoría de los clientes nunca necesitan abrirlo — los productos, la galería y las order CTAs responden a las preguntas del flujo de compra en la propia tienda.

Imágenes

Cuando subes una imagen en el compositor:

• Formatos permitidos: PNG, JPEG, WebP.
• Tamaño máximo de subida: 2 MB (el original — lo que se almacena y sirve es mucho más pequeño).
• Recortador inline se abre automáticamente, fijado a la relación de aspecto correcta para el slot (16:9 para fondos de hero, 1:1 para avatares de product / gallery / testimonial).
• Auto-compresión: la salida del recortador se comprime a WebP en tu navegador antes de subir (hero ≤500 KB, product/gallery ≤350 KB, avatar ≤100 KB).
• Texto de ayuda con dimensiones recomendadas se muestra encima de cada zona de soltar vacía.
• Las URLs de imágenes se auto-refrescan cada 15 minutos vía URLs prefirmadas seguras — los clientes nunca ven tus rutas crudas de almacenamiento.

El tope de 2 MB es sobre el original que subes, no sobre lo que ven los clientes. Suelta una foto de teléfono de 12 MP o una toma de catálogo de resolución de impresión tal cual — el recortador en el navegador maneja la reducción de escala sin pérdida visible de calidad.

Límites de plan

Disponible en todos los planes, incluida la prueba gratuita. El compositor aplica los topes.

Notas:

• Un product grid o carousel cuenta como 1 bloque hacia el límite de bloques por página, sin importar cuántos ítems o diapositivas contenga.
• Cuando alcanzas un límite, el compositor muestra un modal de upgrade.
• El precio es por organización, no por bot. Agregar un segundo (o quinto) bot de Telegram a tu organización no cambia el precio de tu plan. Cada bot obtiene su propia tienda dentro del mismo plan; los topes son compartidos entre todos tus bots bajo una organización.

Permisos

Las acciones de escritura del compositor (guardar, publicar, subir imagen, subir doc de producto, revertir) requieren todas el permiso Integration manage para Telegram. En la práctica eso significa que los roles Owner y Admin pueden redactar la tienda; el rol Member es de solo lectura.

Hoy en día no hay un rol “solo tienda” — tanto Owner como Admin también ven Billing. Si traes un contratista para construir tu tienda, tus opciones son:

• Agregarlo como Admin (con la advertencia de que también verá Billing).
• Usar una sesión de compartir pantalla donde tú permaneces autenticado y el freelancer maneja.
• Pedirle que prepare assets/copys offline (un doc con todo el texto + imágenes) y los pegues tú como Owner.

Un rol granular de “Integration Editor” está en el roadmap.

Rendimiento y frescura

• Caché del lado del servidor — la respuesta pública de la tienda se cachea por 5 minutos por integración.
• El caché se invalida al publicar — en el momento en que haces clic en Publicar (o Revertir), el caché se borra, así los clientes ven tus cambios en su próxima solicitud de página.
• Soporte de ETag — el shell usa If-None-Match de HTTP y obtiene un rápido 304 Not Modified si nada cambió, manteniendo bajo el uso de datos móviles.
• Las URLs de imágenes son válidas por 15 minutos; el shell vuelve a obtenerlas automáticamente antes de que expiren.

Lo que NO hace

• Sin pagos. Las order CTAs son transferencias de consulta, no checkouts de Stripe / WhatsApp Pay / Telegram Stars.
• Sin seguimiento de inventario. Las insignias de disponibilidad son etiquetas de texto libre que editas manualmente.
• Sin cálculos de envío / validación de direcciones. La dirección de entrega se recoge como texto libre.
• Sin cuentas de cliente. Los clientes se identifican por su ID de usuario de Telegram; no hay flujo de login o registro.
• Sin formularios más allá de Order Inquiry / Cart Checkout. El bloque de contacto es visualización estática; el bloque rich-text no renderiza formularios.
• Las rutas de “preguntar al bot” y de pedidos del Help Center rechazan lanzamientos desde grupos / canales con un error cortés.

Flujo end-to-end del cliente

1. El cliente abre tu bot en Telegram y toca el botón de menú — etiquetado como “Shop” (derivado automáticamente de los bloques de producto) o lo que hayas configurado como etiqueta personalizada.
2. La tienda carga dentro de Telegram. Ven tu primera página.
3. Deslizan a través de tu galería, ven tu video, tocan un producto.
4. El producto se abre en una hoja. Tocan “Ask a question” → se abre un chat de IA acotado a los documentos de ese producto. Obtienen una respuesta.
5. Tocan “Order this” → aparece un formulario → completan nombre + teléfono → envían.
6. Reciben instantáneamente un mensaje de “Recibimos tu pedido, te contactaremos” de vuelta en su DM de Telegram.
7. Tu equipo recibe una nueva transferencia en Inbox con los detalles del pedido. Cualquier respuesta que tu equipo envíe desde el inbox aterriza en el DM del cliente en tiempo real.

Resolución de problemas

El botón de menú no abre la tienda

1. Confirma que el toggle de encendido/apagado de la tienda está encendido (compositor → barra izquierda → Mini app settings).
2. Desconecta y reconecta la integración de Telegram — el botón de chat-menu se configura durante el paso de conexión, y un bot obsoleto puede no tenerlo.
3. Si configuraste un botón de menú personalizado vía BotFather, eso anula la auto-configuración de la plataforma — bórralo vía /setmenubutton de BotFather.

Los clientes ven “actualmente no disponible” al abrir la URL directamente

El toggle de encendido/apagado de la tienda está apagado — vuélvelo a encender desde la barra izquierda del compositor.

Las ediciones que acabo de guardar no aparecen para los clientes

Tus ediciones todavía están en Draft. Haz clic en Publish en la barra de herramientas del compositor — el caché del servidor se invalida inmediatamente. Si ya publicaste y los clientes siguen viendo contenido obsoleto, pídeles que arrastren para refrescar dentro de la tienda (Telegram cachea el WebView).

El chat de producto responde desde los docs de un producto diferente

Verifica de nuevo el gestor de Linked docs en el product card — solo los docs vinculados explícitamente ahí alimentan el chat. Si un doc no aparece, adjúntalo vía el selector Attach docs.

La etiqueta de menú personalizada no surtió efecto

El input de etiqueta tiene sus propios botones de Save / Reset (a diferencia del toggle de on/off, que se guarda automáticamente). Haz clic en Save después de escribir — las pulsaciones parciales nunca llegan a Telegram.

Desconexión

La tienda es parte de la integración de Telegram, por lo que desaparece cuando desconectas el bot:

• Integrations → tarjeta de Telegram → menú de tres puntos → Delete

Las páginas, bloques y entradas de ayuda de la tienda que redactaste se eliminan junto con la integración. Para mantener el bot conectado pero solo dejar la tienda fuera de línea, pon el toggle de encendido/apagado de la tienda en apagado en su lugar.

Relacionado

• Telegram — la integración padre; la tienda se monta sobre ella
• Saba on Telegram — bot Saba orientado al operador (función distinta, también basada en Telegram)
• Telegram Business — respuestas de IA en la cuenta personal de un usuario Premium (función distinta)