Integración de WhatsApp en Shopify

Como desarrollador de Shopify para medianas y grandes empresas, sabes lo importante que es mantener una comunicación fluida con los clientes. Para conseguirlo, puedes aprovechar la Plataforma de WhatsApp Business, que te ayuda a enviar mensajes automatizados a miles de clientes y escalar el proceso de manera eficaz a medida que crece tu base de clientes.

En este tutorial se describe el proceso para conectar WhatsApp a Shopify y enviar mensajes de notificación de WhatsApp a los clientes en función de los eventos que activan en la tienda, como añadir un producto al carrito o realizar un pedido. Para ello, usaremos la API de nube, que se aloja en Meta.

Requisitos previos

Para seguir este tutorial, necesitarás lo siguiente:

• Instalar Node.js y npm
• Una tienda en Shopify con productos y procesamiento de pagos configurados
• Registrarte para crear una cuenta de desarrollador en Meta for Developers, configurar una aplicación empresarial y seleccionar una cuenta de WhatsApp Business.

Al completar el último paso, se te proporcionará un identificador de acceso temporal. Lo necesitarás para el resto del tutorial, así que tenlo a mano.

Una vez que hayas cumplido estos requisitos, puedes seguir con el resto del tutorial.

Crear una plantilla de mensaje en WhatsApp

Las plantillas de mensajes de WhatsApp te ayudan a crear varios formatos de mensaje que puedes usar más de una vez para enviar mensajes a los clientes después de que hayan concedido permiso para ello a la aplicación.

Sigue estos pasos a fin de crear una plantilla para un mensaje de notificación de pedido:

• Inicia sesión en Business Manager y elige tu cuenta empresarial.
• Haz clic en el icono de las tres líneas en la esquina superior izquierda de la página y haz clic en Administrador de WhatsApp.
• En la barra de navegación lateral, pasa el cursor sobre el icono de Herramientas de la cuenta y haz clic en Plantillas de mensajes.
• Haz clic en Crear plantilla en la esquina superior derecha de la página.
• En la siguiente página, elige la opción Transaccional para la categoría, nombra la plantilla (en este caso, “order_confirmation”) y selecciona el idioma.

• Haz clic en Continuar para pasar al editor de plantillas.

Ahora que la plantilla “order_confirmation” está configurada, es hora de definir el formato. A continuación, se muestra cómo debería aparecerle el mensaje al cliente:

• Hemos recibido tu pedido.

• Hola, [nombre del cliente]:

• Gracias por comprar en nuestra tienda.

• Estamos procesando tu pedido (23190). El paquete se enviará en los próximos 2 o 3 días laborables (se excluyen los festivos y fines de semana).

• Cuando esto ocurra, te enviaremos otro mensaje de correo electrónico.

En el editor de plantillas, elige Texto para la sección del encabezado. El párrafo que dice “Hemos recibido…” será el encabezado y el resto del mensaje se copiará en la sección del cuerpo.

Después, haz clic dos veces en Añadir variable debajo del cuadro de texto del cuerpo para añadir dos variables. Copia y pega la primera variable, {{1}}, en el lugar del nombre del cliente. Después, copia y pega la segunda variable, {{2}}, en el lugar del número de pedido dentro de los paréntesis.

Cuando hayas terminado, el mensaje debería parecerse a esto. Puedes consultar el área de vista previa en la misma página.

Haz clic en Enviar para guardar la plantilla de mensaje.

Ahora que la plantilla está lista, puedes usar la Plataforma de WhatsApp Business para crear un webhook en el administrador de Shopify y asignar una aplicación que envíe automáticamente el mensaje al cliente cuando realice un pedido.

Usar webhooks para enviar notificaciones a un servidor Express

Supón que quieres enviar un mensaje automatizado a los clientes cuando realizan un pedido en tu tienda de Shopify. Podrías comprobar los nuevos pedidos en la tienda cada cinco minutos o así. Sin embargo, enviar solicitudes de API a la tienda de forma constante no es nada eficiente, sobre todo si no se han recibido pedidos nuevos.

Es mucho más eficiente que un webhook escuche el evento de “creación de pedido” en la tienda y te envíe una notificación cada vez que un cliente realice un pedido.

A continuación, se detallan los pasos básicos para crear un webhook de “creación de pedido” y asignarlo a un servidor Express.

Configurar un proyecto Node.js

Empieza creando una carpeta llamada “whatsapp-demo” para el proyecto.

A continuación, inicia el cd del terminal de comandos en “whatsapp-demo” y ejecuta el siguiente comando para inicializar un proyecto Node.js:

npm init -y

Ejecuta el siguiente comando para instalar express, la biblioteca usada para crear un servidor web en Node.js:

npm i express

Ahora que el entorno de desarrollo está configurado, crea un servidor express.

Crear un servidor Express

Crea un archivo llamado “test.js” en la carpeta “whatsapp-demo”. Ábrelo con el editor de código fuente que prefieras y copia y pega el siguiente código en el archivo:

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

Usando el código anterior has configurado un servidor express básico que muestra un mensaje en el terminal del servidor cuando el webhook envía una notificación de “creación de pedido”.

Antes de asignarlo al webhook de Shopify, debes configurar un túnel.

Configurar un túnel de tráfico HTTPS

Al configurar un webhook, Shopify exige que proporciones una URL pública a la que enviará la notificación.

Si estás siguiendo este tutorial en un servidor público, utiliza su URL. En cambio, si lo estás siguiendo en tu máquina local, necesitarás crear un túnel con una URL con HTTPS a la que se pueda acceder públicamente.

Primero, ejecuta el siguiente comando para instalar ngrok:

npm install -g ngrok

Después, inicia una ventana distinta del terminal y ejecuta el siguiente comando para obtener la URL tunelizada para tu servidor local:

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

Toma nota de la URL, porque la necesitarás en el siguiente paso. Ten en cuenta que si reinicias el cliente, obtendrás una nueva URL y deberás actualizar todas las referencias a la misma.

Crear un webhook en Shopify

Ve al administrador de tu tienda de Shopify y navega a Configuración > Notificaciones. Luego, desplázate hacia abajo hasta Webhooks y haz clic en Crear webhook.

Añade un webhook para la “creación de pedido” y especifica la URL tunelizada o la URL pública que has creado en el paso anterior.

Ejecuta el servidor local en un terminal diferente con el nodo index.js y, después, haz clic en Enviar notificación de prueba.

Si la operación se realiza correctamente, recibirás este mensaje en el terminal del servidor: “Sí, hemos recibido un pedido”.

Ahora tienes una conexión funcional entre tu tienda de Shopify y el servidor Express. A continuación, envía la plantilla de mensaje de WhatsApp al cliente cuando realice un pedido.

Enviar un mensaje personalizado con la plantilla “order_notification”

Primero, ejecuta el siguiente comando en el terminal para instalar Axios:

npm i axios

Utilizarás Axios para que la solicitud POST se encargue de enviar el mensaje de WhatsApp al cliente.

Tras instalar Axios, crea un archivo llamado “customMessage.js” en la carpeta del proyecto e importa Axios y express al archivo con el siguiente código:

const axios = require('axios').default
const express = require('express')
const app = express()

Después, ejecuta el siguiente código a fin de crear una ruta para gestionar la notificación de creación de pedido desde Shopify:

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

Cuando Shopify realiza una llamada con un pedido a /webhooks/orders/create, la información de dicho pedido se enviará a la ruta dentro del objeto de JavaScript “res”, el segundo argumento de la función de devolución de llamada asíncrona.

A continuación, toma nota del número de teléfono y el nombre del cliente, y del identificador de los detalles de dicho pedido y úsalos para construir los parámetros de la solicitud a la API:

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
} 

El objeto anterior contiene todos los parámetros necesarios para completar la solicitud. Asegúrate de que el nombre de la plantilla especificado en el objeto coincide con el que has creado antes en la cuenta de Business Manager de WhatsApp.

Después, crea un objeto de configuración con un objeto “headers” anidado. En “headers”, establece el identificador de acceso de WhatsApp como el valor de “Authorization” (sustituye ACCESS_TOKEN por el identificador) y establece “application/json” como “Content-Type”:

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

A continuación, crea una solicitud POST con Axios y pasa el objeto de configuración y el de datos como argumentos. Anida los métodos “then” y “catch” para mostrar el resultado (o el mensaje de error si se produce un error en la promesa):

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

Sustituye YOUR_WABA_ID por el identificador de WhatsApp Business del panel de aplicaciones de WhatsApp y sustituye API_VERSION por una versión compatible de la API de nube (la predeterminada es la v15.0).

La aplicación está configurada.

Para probarla, el túnel de ngrok debería seguir ejecutándose y deberás iniciar el servidor express en un terminal diferente:

node customMessages.js

Otros eventos de Shopify

Además de los relacionados con la realización de pedidos, Shopify ofrece más de 50 webhooks para diferentes eventos. Puedes suscribirte a webhooks de creación y actualización del carrito, creación y actualización de colecciones de productos, intentos de facturación llevados a cabo con o sin éxito, y muchos otros.

Para utilizar cualesquiera de estos webhooks, sigue un patrón similar al descrito anteriormente y crea un nuevo webhook en el administrador de Shopify y registra el tema como una ruta en el servidor express.

Como has visto, la Plataforma de WhatsApp Business te ayuda a comunicarte de manera fluida con tus clientes ya sea manualmente o mediante programación en función de los eventos en tu tienda de Shopify.

La integración de WhatsApp en Shopify permite enviar mensajes de forma masiva a los clientes en tiempo real. Los mensajes se pueden enviar de forma automática (por ejemplo, en función de un evento) o manual. No solo es sencillo de configurar, sino que, además, es escalable. La asociación de WhatsApp y Shopify hace posible una comunicación coherente, efectiva y eficaz con los clientes.

Para obtener más información sobre cómo integrar WhatsApp en tus aplicaciones y proyectos, consulta nuestros otros tutoriales para desarrolladores.