Validar opciones de menú por texto es frágil: una mayúscula o un acento puede romper tu flujo. Cambiar a validación por IDs y enviar la ubicación con mapa interactivo en WhatsApp transforma la experiencia del usuario y hace tu bot más robusto, especialmente si construyes asistentes para negocios como veterinarias o clínicas.

Por qué validar el menú por id en lugar de texto

Cuando tu bot valida un botón comparando el texto visible (por ejemplo, Emergencia), cualquier cambio menor rompe la lógica. Un acento, una mayúscula o una edición del copy y tu else if deja de funcionar.

La solución está en la línea 30 del message handler: en vez de leer el nombre del elemento, lee su id. Cambias option por option.id y validas contra un identificador estable que tú controlas [01:05].

¿Por qué usar id y no el texto del botón? Porque el texto puede cambiar con cada iteración de copy, mientras que el id permanece fijo. Validar por id evita bugs silenciosos cuando alguien edita una palabra del menú.

Cómo estructurar los ids del menú

Los ids pueden ser numéricos, pero lo ideal es que sean descriptivos sobre la acción. Una buena convención sería:

• option_schedule para agendar.
• option_consult para realizar consulta.
• option_location para enviar ubicación.

En la clase se usaron ids numéricos provisionales: opción uno para agendar, opción dos para consulta, opción tres para ubicación [02:10]. Tú decides el estándar, lo importante es que sea consistente en todo el proyecto.

Cómo enviar una ubicación con mapa en WhatsApp

La API de WhatsApp permite mandar un componente visual de ubicación con mapa interactivo. El usuario puede tocarlo, abrirlo en su app de mapas y ver cómo llegar. Para lograrlo necesitas cuatro datos: latitud, longitud, nombre y dirección.

Crear la función sendLocation en el message handler

En la parte inferior del message handler añades una función asíncrona sendLocation que recibe el destinatario y arma las constantes con los datos del lugar [03:20]:

javascript async sendLocation(to) { const latitude = 6.2071694; const longitude = -75.574607; const name = 'Platzi Medellín'; const address = 'Carrera 43A #5A-113, El Poblado, Medellín, Antioquia';

await whatsappService.sendLocationMessage( to, latitude, longitude, name, address ); }

Esos valores corresponden a la ubicación real usada en el ejemplo de MedPet en Medellín.

Crear el método sendLocationMessage en el servicio

Dentro de whatsappService agregas el método que hace la solicitud HTTP con Axios, siguiendo la misma estructura que ya usan los demás envíos [05:30]. El payload tiene tres claves clave: el destinatario, el type: 'location' y el objeto location con latitud, longitud, nombre y dirección.

Envuelves la llamada en un try/catch para manejar errores con console.error. Esta repetición de estructura entre métodos es una señal de que más adelante vale la pena refactorizar la lógica de Axios en una sola función reutilizable. Si cambia la URL de la API, hoy tendrías que tocar varios archivos.

¿Qué pasa si la URL de la API cambia? Con la estructura actual tendrías que editar cada servicio. Por eso conviene centralizar la llamada HTTP en un helper único que reciba endpoint y payload.

Cómo conectar la opción del menú con el envío de ubicación

El último paso es enlazar la opción tres del menú con la nueva función. En el handleMenu, cuando el id coincida con la opción de ubicación, llamas:

javascript await this.sendLocation(to); // Mensaje complementario 'Te esperamos en nuestra sucursal'

Así, sin importar si el usuario tocó el botón con mayúscula, minúscula o con acento en ubicación, el flujo se ejecuta porque la validación ya no depende del texto sino del id [07:45].

Cómo se ve el resultado en WhatsApp

Al probar el bot escribiendo Hola, recibes el mensaje de bienvenida y el menú. Tocas la opción de ubicación y aparece un mapa embebido. Al darle clic se abre la vista completa: puedes moverte por el mapa, ver dónde estás y calcular la ruta hasta la veterinaria.

Funciona igual desde WhatsApp Web y desde el teléfono, lo que confirma que la API entrega el mismo componente nativo en ambas plataformas [09:10].

Habilidades y conceptos que se trabajan en este flujo

• Validación por id sobre validación por texto: práctica que evita bugs cuando el copy del botón cambia o tiene variaciones de formato.
• Estructura asíncrona con async/await: tanto la función del handler como la del servicio usan async para esperar la respuesta de la API.
• Manejo de errores con try/catch: imprimir el error con console.error te permite depurar fallos en la solicitud HTTP.
• Solicitudes HTTP con Axios: la librería que envía el payload a la API de WhatsApp con el type: 'location'.
• Payload de location en WhatsApp Cloud API: estructura que requiere latitud, longitud, name y address para renderizar el mapa interactivo.
• Refactor anticipado: identificar código repetido entre servicios como señal para extraer una función común.

¿Cómo refactorizarías el envío de location para mandar un solo objeto en lugar de cuatro parámetros sueltos? Déjame tu propuesta en los comentarios.