Las plantillas de mensajes de WhatsApp son una manera efectiva de enviar información valiosa a los clientes. Puedes usarlas para enviar recordatorios, notificaciones o novedades personalizadas.
WhatsApp te permite iniciar conversaciones directas con usuarios que hayan optado por recibir mensajes. Además, puedes responder cualquier mensaje que haya iniciado un usuario. Luego, estos usuarios pueden recibir mensajes basados en plantillas de WhatsApp.
Usar la Plataforma de WhatsApp Business para generar estas plantillas puede optimizar la comunicación con los clientes y mejorar notoriamente la experiencia del usuario.
Veamos un ejemplo. Una empresa de turismo hipotética, Viajes Fantásticos Ltd., ofrece servicios de reserva de transporte, alojamiento y actividades recreativas. La presencia mundial de WhatsApp la convierte en la plataforma ideal para que esta empresa se comunique con sus clientes. Mientras las confirmaciones por correo electrónico son excelentes para mantener un registro, poder interactuar con clientes en conversaciones bidireccionales es muy valioso para los turistas que están de viaje, y los SMS tradicionales no ofrecen lo mismo.
Además, las plantillas de mensajes de WhatsApp permiten a Viajes Fantásticos Ltd. comunicarse con la cantidad óptima de detalles personalizados. En este caso, con un mensaje de bienvenida personalizado, notificaciones oportunas y boletos electrónicos accesibles al instante, los clientes pueden estar tranquilos al saber que todo su viaje está resuelto y enfocarse en relajarse y disfrutar sus vacaciones.
Para que veas lo fácil que es aprovechar al máximo la API de WhatsApp Business y las plantillas de mensajes, este tutorial práctico te enseña a administrar plantillas, incluidas su creación, eliminación y personalización.
Administrar plantillas de mensajes con la Plataforma de WhatsApp Business
Requisitos previos
Este tutorial supone que tienes un conocimiento básico de las aplicaciones Node.js y Express.js. Antes de comenzar, completa los pasos de la introducción de la documentación de la Plataforma de WhatsApp Business. Si eres un proveedor de soluciones comerciales (BSP), sigue las instrucciones en Primeros pasos para proveedores de soluciones comerciales y asegúrate de que tu aplicación de Meta complete y apruebe el proceso de revisión.
Antes de continuar con el tutorial, asegúrate de tener un identificador de WhatsApp Business y un identificador del número de teléfono.
Además, los BSP necesitan un token de usuario del sistema con los permisos requeridos (whatsapp_business_management, whatsapp_business_messaging y business_management).
Si no tienes aplicaciones Node.js y Express.js, puedes usar esta aplicación de ejemplo desarrollada específicamente para el tutorial.
Además, este tutorial usará varios paquetes, incluido dotenv para almacenar el token y las solicitudes para realizar solicitudes HTTP con la API. También usaremos Postman para probar los puntos de conexión de la API.
Si quieres explorar más, el código completo está disponible aquí.
Una vez que hayas configurado la aplicación inicial y agregado el token con los permisos adecuados, podrás empezar.
Crear una nueva plantilla de mensaje
Supongamos que Viajes Fantásticos quiere crear varias plantillas de mensajes con fines específicos. Por ejemplo, quiere una plantilla de mensaje para saludar a los clientes y otra para enviar copias en PDF de documentos relevantes.
Antes de empezar a programar, piensa en cómo funciona el proceso de creación de plantillas y los tipos de parámetros que admite. Además, es clave tener en cuenta que Meta revisa las plantillas a diario y puede rechazarlas si no cumplen las normas especificadas.
La documentación indica que debes realizar una solicitud POST a message_templates con tu identificador de WhatsApp Business.
Se admiten los siguientes parámetros:
- «category» tipo ENUM
- «components» tipo matriz JSON
- idioma
- name
El parámetro «components» define el cuerpo de la plantilla de mensaje. Admite los siguientes subparámetros:
- «type» — tipo ENUM de HEADER, BODY, FOOTER y BUTTONS
- «format» — tipo ENUM de TEXT, IMAGE, DOCUMENT, VIDEO, LOCATION
- «text» — tipo cadena
- «buttons» — tipo matriz JSON
Ahora tienes una plantilla de mensaje basada en texto para saludar a los clientes y una basada en archivos multimedia para enviar un PDF. De acuerdo con nuestro ejemplo, estas serían perfectas para enviar boletos de viaje o confirmaciones de itinerarios.
Crear una plantilla de mensaje basada en texto
Primero, tienes que crear un nuevo router en routes/messageTemplates.js:
router.post("/messageTemplate", createMessageTemplate);Luego, usa el método de controlador createMessageTemplate, que crearemos en controllers/messageTemplate.js:
exports.createMessageTemplate = async (req, res) => {exports.createMessageTemplate = async (req, res) => { const { name, language, category, components } = req.body; if (!name || !language || !category || !components) { return res.status(400).json({ error: "Required Fields: name, language, category, and components", }); } request.post( { url: `https://graph.facebook.com/v13.0/${process.env.META_BUSINESS_ID}/message_templates`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: JSON.stringify({ name: name, language: language, category: category, components: components, }), }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Ahora, después de crear la ruta y el método, prueba la API en Postman. Esto se ve así:
Y esto es lo que devuelve:
A continuación se muestra un objeto Request de ejemplo que puedes pasar para crear la plantilla de mensaje. {{1}} se usa para pasar variables. Ten en cuenta que se usa {{X}} para definir las variables de la plantilla de mensaje y no las de Postman.
{ "name": "welcome_greetings", "language": "en_US", "category": "ALERT_UPDATE", "components": [ { "type": "HEADER", "format":"TEXT", "text": "Hola, {{1}}: ¿Cómo estás?" }, { "type": "BODY", "text": "Gracias por elegir Terrific Travel Ltd. como tu agente de viajes. Ponte en contacto con nosotros si tienes alguna pregunta o inquietud." }, { "type": "FOOTER", "text": "Terrific Travel Ltd." } ] }Una respuesta exitosa de la API devuelve el valor del identificador, que representa el identificador de la plantilla.
Crear una plantilla de mensaje basada en contenido multimedia
Después de finalizar la plantilla basada en texto, puedes crear plantillas basadas en archivos multimedia con la misma facilidad. Estas son maneras flexibles y eficientes de enviar documentos a los que el cliente puede acceder de inmediato.
La plantilla a continuación tendrá un componente HEADER (encabezado) que incluirá el documento adjunto, un componente BODY (cuerpo) y otro FOOTER (pie de página):
{ "name": "sample_ticket_confirmation", "language": "en_US", "category": "TICKET_UPDATE", "components": [ { "type": "HEADER", "format": "DOCUMENT" }, { "type": "BODY", "text": "This is your flight confirmation for {{1}}-{{2}} on {{3}}." }, { "type": "FOOTER", "text": "This message is from an unverified business." } ] }Nota: Antes de poder usar plantillas de mensajes para comunicarte con clientes, estas deben aprobarse y cumplir las normas para plantillas de mensajes.
Obtener una lista de plantillas de mensajes existentes
Ahora que creaste las plantillas de mensajes, puedes obtener una lista de ellas. Para ello, haz una llamada GET a:
https://graph.facebook.com/v13.0/whatsapp-business-account-ID/message_templates.Nota: La versión de la API puede cambiar. Asegúrate de actualizar la URL como corresponda.
Luego, crea una nueva ruta en routes/messageTemplates.js:
router.get("/messageTemplates", getMessageTemplates);Puedes crear el método de controlador getMessageTemplates anterior en controllers/messageTemplate.js de la siguiente manera:
exports.getMessageTemplates = async (req, res) => { request.get( { url: `https://graph.facebook.com/v13.0/${process.env.META_BUSINESS_ID}/message_templates`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Una respuesta exitosa incluye las plantillas que creaste y la plantilla de ejemplo de WhatsApp.
Eliminar una plantilla de mensaje
De forma similar a la ruta GET, también puedes crear una ruta DELETE en routes/messageTemplates.js:
router.delete("/messageTemplate", deleteMessageTemplate);Ahora, crea el método de controlador correspondiente en controllers/messageTemplates.js:
exports.deleteMessageTemplate = async (req, res) => { request.delete( { url: `https://graph.facebook.com/v13.0/${process.env.META_BUSINESS_ID}/message_templates`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: JSON.stringify({ name: req.body.name, }), }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Para eliminar una plantilla, debes pasar el nombre de la plantilla en un cuerpo JSON.
Por ejemplo, las siguientes capturas de pantalla muestran una solicitud y una respuesta exitosas de Postman para eliminar una plantilla llamada demo_template_user:
Enviar un mensaje usando la plantilla
Ahora, usemos una plantilla de mensaje para enviar mensajes.
Primero, crea un router y su controlador correspondiente. En routes/messageTemplates.js, agrega:
router.post("/sendMessage/:id", sendMessage);En el código anterior, el parámetro :id se usa para pasar el identificador del número de teléfono. Así se ve el controlador en controllers/messageTemplate.js.
exports.sendMessage = async (req, res) => { const { id, to, type,template } = req.body; if (!id || !to || !type || !template) { return res.status(400).json({ error: "Campos obligatorios: to, type, template e id", }); } request.post( { url: `https://graph.facebook.com/v13.0/${req.params.id}/messages`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: JSON.stringify({ messaging_product: process.env.MESSAGING_PRODUCT, to: to, type: type, template: template, }), }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Ahora puedes crear un objeto Request en Postman. Recuerda que pasarás — {{1}} — en el encabezado.
El cuerpo de la solicitud de Postman demuestra la plantilla basada en texto que creamos.
Presta atención a este fragmento de código en la captura de pantalla anterior:
"components": [ { "type": "HEADER", "parameters": [ { "type": "text", "text": "Name" } ] } ]Este fragmento se usa para pasar el valor al parámetro {{1}}. Una respuesta exitosa incluye el identificador del mensaje, como se muestra a continuación.
Así ven el mensaje los clientes en WhatsApp:
Luego, usarás un objeto Request JSON para otra plantilla en la que deberás pasar un documento en el encabezado y las variables {{1}}, {{2}} y {{3}} en el cuerpo.
Primero, veamos la siguiente captura de pantalla:
Observa que el fragmento a continuación pasa los parámetros del encabezado:
"parameters": [ { "type": "DOCUMENT", "document": { "id":"984786545564592" } } ] }, { Luego, el siguiente código hace lo mismo con el cuerpo: "parameters": [ { "type": "text", "text": "Toronto" }, { "type": "text", "text": "Dubai" }, { "type": "text", "text": "2022-05-03" } ] } ] } }El archivo multimedia adjunto podría ser un enlace o el identificador del archivo multimedia subido.
Por último, la imagen a continuación muestra cómo se ve una salida exitosa en WhatsApp.
Conclusión
Con este tutorial, recién empiezas a explorar las capacidades de la API de WhatsApp Business para crear plantillas de mensajes sencillas, pero efectivas. La sencillez y flexibilidad de la API de WhatsApp Business puede ayudar a cualquier empresa a mejorar sus sistemas de comunicación para convertir a un consumidor en un cliente a largo plazo. Es hora de aprovechar esta oportunidad.
