Recomendamos leer el artículo Botón.

Puedes usar tanto botones de respuesta (botones de teclado normales) como botones en línea (botones en el texto) en Telegram.

Importante: limitaciones de los botones

Ten en cuenta las siguientes restricciones de la plataforma al crear botones:

  • Botones de respuesta (teclado): máximo de 12 botones por fila.
  • Botones en línea: máximo de 8 botones por fila.
  • Texto del botón: limitado a 32 caracteres.
  • Color del botón: no se puede personalizar. Los botones usan el estilo predeterminado de la plataforma.

Cómo crear un botón en un bloque

Para crear cualquier botón en un chatbot, ve a la configuración del bloque y haz clic en la pestaña "Botones":

Luego se abrirá la configuración para agregar y editar el botón. A continuación, haz clic en Agregar:

Se abrirá una ventana de configuración que te permitirá definir la etiqueta, la acción y las opciones adicionales del botón.

Los siguientes tipos de botones solo están disponibles para el bot de Telegram:

  • Botón de compartir – permite a los usuarios compartir contenido.
  • Botón de callback – envía una consulta de callback silenciosa a tu bot.
  • WebApp de Telegram – abre una miniaplicación (por ejemplo, un widget o sitio web) dentro de Telegram.
  • Inicio de sesión de Telegram – autoriza a los usuarios mediante su cuenta de Telegram.

También hay otros botones disponibles en Telegram, como pago, solicitar un número de teléfono o geolocalización, y enviar un enlace.

Botón de compartir

Al crear el botón, selecciona "Compartir (solo Telegram)" y completa los campos (campo de texto adicional opcional):

Este botón te permite reenviar la información seleccionando un contacto de tu lista.

Ingresa la URL que deseas compartir en el campo "Enlace para compartir" del botón.

Una vez seleccionado un contacto, se enviará el contenido de los campos "Enlace para compartir" y "Texto adicional". Úsalo para compartir enlaces a publicaciones de canales de Telegram y otro contenido.

¡Atención! Puede no funcionar correctamente en algunos dispositivos iOS.

Botón de inicio de sesión en un sitio web

Para que el botón de inicio de sesión funcione, tu bot debe estar autorizado primero para el dominio de destino. Esta configuración se realiza a través de @BotFather.

Pasos para configurar:

  1. Abre un chat con @BotFather.
  2. Selecciona tu bot de la lista.
  3. Elige Bot Settings > Domain y agrega el dominio de tu sitio web.

A continuación, ve al botón Domain:

Nota: El botón mostrará Edit domain si ya existe un dominio, o Set domain si se necesita agregar uno.

Se te pedirá que configures el dominio para tu bot:

Formato correcto del dominio:

Ingresa tu dominio como mavibot.ai o como tudominio.com si tienes un sitio web conectado a MaviBot.

Siguiente paso:

Una vez que tu dominio esté verificado y configurado, puedes proceder a crear el botón de autorización.

En el campo Texto, ingresa la etiqueta que aparecerá en el botón.

Luego, proporciona la URL de la página en el campo Enlace donde se realizará la autorización.

Los campos restantes serán necesarios si se usa un bot separado para la autorización (necesitas obtener permiso para enviar mensajes para este bot): en particular, deberás especificar el nombre del bot.

Si necesitas poder enviar mensajes desde el bot especificado, asegúrate de marcar la casilla "Solicitar permiso al usuario para enviar mensajes desde el bot":

Botón de inicio de sesión de Telegram

Botón de callback

El botón de callback es un botón de retroalimentación donde el cliente ve una cosa, y en el bot obtenemos el callback necesario para lanzar cualquier bloque del embudo.

Es bastante simple de crear: en el campo Botones, haz clic en el botón Agregar. En el formulario que se abre, ingresa el texto, especifica el tipo - Botón de callback (Telegram) e ingresa el Texto de callback que debe devolverse al hacer clic en el botón:

Visualmente, el botón se ve como un botón en línea normal:

Después de hacer clic en el botón, verás el Callback configurado en la tarjeta del cliente:

¡Es importante!

Telegram no admite botones de teclado de callback.

¡Ten en cuenta!

Si se selecciona el tipo de botón "Callback", el botón se mostrará como un callback solo si el texto del botón difiere del texto del callback.

Botón de aplicación web de Telegram

Este botón te permite abrir el sitio web como una aplicación web en Telegram.

Al agregar el botón, especifica su etiqueta, selecciona el tipo de botón de aplicación web de Telegram y proporciona el enlace al sitio web que se abrirá como aplicación web:

  • Puedes especificar un enlace a través de una variable:

Usar una variable para un enlace es muy práctico cuando la página de destino o la dirección del sitio web cambian con frecuencia.

Cómo funciona:

  1. Define una variable (por ejemplo, landing_page_url) en la configuración de tu proyecto.
  2. Haz referencia a esta variable (por ejemplo, #{landing_page_url}) en todos los botones de aplicación web a lo largo de tus flujos.

Beneficio: en lugar de actualizar manualmente la URL en cada bloque de botón individual, solo necesitas cambiar el valor de la variable una vez en la configuración del proyecto, y todos los botones se actualizarán automáticamente.

Alternativa: por supuesto, también puedes especificar una URL directa y estática directamente en la configuración del botón.

Cómo crear botones para funciones de la API de Telegram

Si bien trabajar directamente con la API de Bot de Telegram puede ser un desafío, especialmente para principiantes, MaviBot ofrece una alternativa mucho más accesible.

Método: usar código generado

Puedes utilizar el código de botón pregenerado de la configuración avanzada, eliminando la necesidad de escribir llamadas a la API manualmente.

Pasos:

  1. Navega a la configuración de tu bloque y abre la sección Botones.
  2. Usa la interfaz para agregar y configurar todos los botones necesarios (texto, enlaces, funciones).
  3. El sistema generará automáticamente el código correcto de la API de Telegram en segundo plano.

Este enfoque te permite crear teclados complejos visualmente mientras la plataforma maneja la implementación técnica subyacente.

Haz clic en "Configuración avanzada" para ver el código generado de la API de Telegram para tus botones.

Prueba tus botones, luego copia el código generado desde Configuración avanzada en una variable como buttons.

Esta función envía un mensaje a través de la API de Telegram con los siguientes parámetros: tg_send_message (platform_id, text, client_message_id, reply_markup, sparse_mode, disable_web_page_preview, protect_content, disable_notification, message_thread_id, entities):

Pasa la variable de botones a la función en el parámetro reply_markup:

Tus botones aparecerán en el chat con el diseño y estilo que definiste.

Cómo eliminar botones de respuesta

Si bien los botones de teclado normalmente desaparecen automáticamente, a veces pueden permanecer visibles.

Para eliminar forzosamente los botones de respuesta persistentes, inserta el siguiente código en el campo Configuración avanzada:

[{"buttons":[],"one_time":true,"index_in_line":0,"line":0}]

Esta configuración de botón vacía indica a Telegram que oculte el teclado personalizado.

Botones de menú de teclado en Telegram

¡Recomendamos usar esta función solo para usuarios avanzados!

Botones de teclado

Para poder usar los botones de teclado (respuesta) como un menú permanente de Telegram, basta con asignar cualquier valor a la variable tg_permanent_reply_buttons (la variable se declara como constante del proyecto).

Variable: tg_permanent_reply_buttons

Configurar la variable tg_permanent_reply_buttons te da control manual completo sobre la visibilidad del teclado de respuesta (botones debajo del mensaje). Todo el comportamiento de ocultación automática por parte de la plataforma está deshabilitado.

Alcance: esta configuración se aplica a todos los botones de respuesta creados en el bot mientras la variable esté activa.

Revertir al comportamiento automático

Para restaurar el ocultamiento automático estándar del teclado:

  1. Elimina la variable tg_permanent_reply_buttons de la configuración de tu proyecto.
  2. Vuelve a crear cualquier botón de respuesta que se haya creado originalmente mientras la variable estaba activa. Los botones creados bajo la regla "permanente" conservan ese estado y deben recrearse para heredar el nuevo comportamiento automático.

Cómo crear un menú en Telegram

Quien creó el bot de Telegram puede hacer un menú como este.

Para ello, escribe a Botfather en Telegram.

Ingresa el comando /mybots, y se abre la lista de tus bots. Elige el que necesitas. Se te abre un menú. Aquí debes seleccionar Edit Bot, y luego Edit Commands.

Ingresa todos los comandos y sus descripciones en un solo mensaje, usando letras minúsculas para los nombres de los comandos. Recibirás una confirmación cuando la lista se actualice.

Ahora puedes ver y usar el menú en tu chat de Telegram con el bot.

Cuando haces clic en el botón de menú, se abrirá una lista de comandos que se registraron previamente en BotFather:

A continuación, ve a Mavibot, abre el proyecto al que está conectado este bot de Telegram.

Crea los bloques Inicio o Disparador, escribe comandos en las condiciones, y en el campo "Texto del mensaje" — los textos que se recibirán como respuesta.

Ejemplo:

Cómo combinar dos tipos de botones

Crea un bloque con un botón de respuesta (teclado), que necesitas visualizar.

Crea el siguiente bloque (un temporizador de 0 segundos) con botones en línea (botones en el texto), que deben colocarse sin eliminar los botones de respuesta. Por ejemplo: [{"type": "inline", "text": "NOMBRE DEL BOTÓN", "line": 0, "index_in_line": 0}]

Aquí está el resultado:

Importante: debes seguir este orden al agregar botones en el mismo bloque:

  1. Primero, agrega todos los botones de respuesta (teclado).
  2. Luego, agrega cualquier botón en línea.

Si se invierte esta secuencia, los botones de respuesta se eliminarán cuando se envíe el siguiente bloque de mensaje.