Guiar al usuario dentro de un bot de WhatsApp marca la diferencia entre una conversación útil y una llena de errores. Crear un menú de botones interactivos en WhatsApp te permite ofrecer opciones claras, evitar respuestas inesperadas y mantener el flujo bajo control desde el primer mensaje.

¿Por qué guiar al usuario con un menú de opciones?

Cuando dejas al usuario escribir libremente, abres la puerta a flujos no deseados. Al mostrar un menú con botones, le das un camino concreto y reduces la fricción de la interacción.

Piensa en un conmutador telefónico que dice opción uno, opción dos, opción tres. Ese mismo principio aplica a tu bot: cada selección desbloquea el siguiente paso del flujo.

En el caso de la veterinaria del ejemplo, el menú ofrece tres caminos claros: agendar una cita, consultar algo abierto o ver la ubicación del lugar [02:14].

¿Cuántos botones permite WhatsApp en un menú interactivo? Solo tres botones por mensaje. Esta limitación existe por carga de UI y para que el usuario no se sature con demasiadas opciones.

¿Cómo se estructura la petición de botones en la API de WhatsApp?

Antes de tocar código, conviene validar la estructura desde Postman para entender qué espera la API. En la colección de WhatsApp puedes filtrar por la palabra clave button y revisar el body de la solicitud [03:05].

La estructura clave introduce un nuevo campo llamado interactive, que contiene:

• El type con valor button.
• Un body con el texto que verá el usuario.
• Una action con el arreglo de botones.

Al ejecutar la prueba en Postman, la respuesta devuelve el input y el WAP ID, confirmando que el mensaje llegó. En el WhatsApp del cliente aparece el botón listo para ser presionado.

¿Qué pasa después de que el usuario presiona un botón?

Cada botón puede desencadenar otros tres botones, y así sucesivamente. Esto te permite construir flujos jerárquicos sin abrumar al usuario en una sola pantalla.

¿Cómo implementar sendInteractiveButtons en el servicio de WhatsApp?

Dentro de WhatsAppService ya existen funciones como sendMessage y la de marcar mensajes como leídos. Ahora se suma una nueva función asíncrona llamada sendInteractiveButtons [05:32].

Esta función recibe tres parámetros:

• to: a quién se envía el mensaje.
• bodyText: el texto principal que verá el usuario.
• buttons: el arreglo de botones que se controla desde el messageHandler.

La idea de pasar los botones desde fuera es clave: así puedes reutilizar la misma función para distintos menús sin duplicar código.

Dentro del try/catch, la solicitud usa Axios con método POST hacia la misma URL de la API de WhatsApp. Lo que cambia es el contenido del data:

• messaging_product: WhatsApp.
• to: el destinatario.
• type: interactive.
• interactive: un objeto con type: button, un body con text, y una action con buttons.

Se elimina el campo context que antes servía para responder sobre el mensaje del usuario, ya que aquí no aplica esa réplica.

¿Qué es el campo interactive en la API de WhatsApp? Es el factor que indica que el mensaje espera una interacción del usuario, como presionar un botón o seleccionar una opción de lista.

¿Cómo construir el menú de bienvenida desde el messageHandler?

En el messageHandler se crea una nueva función async llamada sendWelcomeMenu que recibe el destinatario [08:45]. Dentro defines:

• Una constante menuMessage con el texto Elige una opción.
• Una constante buttons con un arreglo de tres objetos.

Cada botón sigue una estructura específica de tipo reply, que contiene un id interno y un title visible para el usuario.

¿Cómo se define cada botón del menú?

Los tres botones del ejemplo quedan así:

• type: reply, id: option1, title: Agendar.
• type: reply, id: option2, title: Consultar.
• type: reply, id: option3, title: Ubicación.

El id es interno y te sirve para capturar la acción del usuario y ejecutar lógica específica. El title es lo único que el usuario verá en pantalla.

Después de definir el arreglo, llamas a await whatsappService.sendInteractiveButtons(to, menuMessage, buttons) para disparar el envío.

¿Cómo encadenar el menú con el mensaje de bienvenida?

Para que el menú aparezca después del saludo, agregas otra llamada en la parte superior donde se envía el welcomeMessage. Justo después escribes await this.sendWelcomeMenu(msg.from) para que el usuario reciba primero la bienvenida y luego las opciones [11:20].

Al probar con un Hola desde WhatsApp, el bot responde con el mensaje personalizado y enseguida muestra los tres botones: agendar, consultar y ubicación.

Reutilizar funciones como sendInteractiveButtons y separar la definición de botones del envío te da flexibilidad para crear distintos menús sin repetir lógica HTTP.

¿Qué consideraciones de diseño debes tener al crear flujos con botones?

Tres botones por mensaje no es mucho, así que cada opción debe contar. Piensa el flujo como un árbol:

• Dentro de Agendar, ¿qué nuevas opciones aparecen?
• Dentro de Consultar, ¿conviene seguir con botones o pedir texto libre?
• ¿La Ubicación cierra el flujo o lleva a otra acción?

No todos los flujos necesitan botones. A veces una entrada por texto funciona mejor, sobre todo cuando esperas información variable como un nombre, una fecha o una descripción del problema.

¿Cómo idearías tu propio flujo con múltiples niveles de menú? Cuéntamelo en los comentarios y comparte qué opciones tendría tu primer nivel.