Integrar WhatsApp en Shopify

Como desarrollador de Shopify que trabaja con negocios de gran escala o de escala media, sabes lo importante que es poder comunicarse de manera óptima con los clientes. Para lograr este objetivo, puedes usar la Plataforma de WhatsApp Business para enviar mensajes automáticos a miles de clientes y ajustar el proceso de manera eficaz a medida que se expande tu base de clientes.

En este tutorial, se explica el proceso que permite conectar WhatsApp a Shopify y enviar mensajes de notificación de WhatsApp a los clientes en función de los eventos que activan en el negocio, como agregar un producto al carrito o hacer un pedido. Para ello, usaremos la API de la nube alojada por Meta.

Requisitos previos

Para seguir este tutorial, deberás hacer lo siguiente:

• Instala Node.js y npm.
• Configura un negocio en Shopify con productos y un proceso de pago.
• Registra una cuenta de desarrollador en Meta for Developers, configura una app de negocios y selecciona una cuenta de WhatsApp Business.

Una vez completado el último paso, recibirás un token de acceso temporario, que necesitarás para el resto del tutorial, por lo que te recomendamos tenerlo a mano.

Cuando hayas completado estos requisitos, puedes continuar con el resto del tutorial.

Crear una plantilla de mensaje en WhatsApp

Las plantillas de mensaje de WhatsApp te ayudan a crear formatos de mensajes múltiples que puedes utilizar más de una vez para enviar mensajes a los clientes después de que le concedieron a tu app el permiso para hacerlo.

Sigue estos pasos para crear una plantilla relacionada con un mensaje de notificación de un pedido:

• Inicia sesión en tu administrador comercial y selecciona tu cuenta de empresa.
• Haz clic en el icono de las tres líneas que se encuentra en la parte superior izquierda de la página y, luego, en el administrador de WhatsApp.
• Usando la barra de navegación lateral, pasa el mouse sobre el icono de Herramientas de la cuenta y haz clic en Plantillas de mensajes.
• Haz clic en Crear plantilla, que se ubica en la esquina superior derecha de la página.
• En la siguiente página, selecciona la opción Transaccional de la categoría. Luego, proporciona un nombre a la plantilla (en este caso, "order_confirmation") y selecciona el idioma.

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

Ahora que la plantilla "order_confirmation" está configurada, es hora de definir su descripción. Aquí ves como se mostrará el mensaje al cliente:

• ¡Recibimos tu pedido!

• Hola, [nombre del cliente]:

• Gracias por tu compra.

• Estamos procesando tu pedido (23190). En los siguientes 2 o 3 días hábiles (se excluyen los días festivos y los fines de semana), te enviaremos tu paquete.

• Una vez que lo despachemos, recibirás otro correo electrónico.

En el editor de plantilla, selecciona Texto para modificar la sección del encabezado. El párrafo "¡Recibimos tu..." será el encabezado. El resto del mensaje se copiará en la sección del cuerpo.

Luego, haz doble clic en Agregar variable, que se encuentra debajo del texto del cuerpo, y agrega dos variables. Copia y pega la primara variable {{1}} en el lugar del nombre del cliente. A continuación, copia y pega la segunda variable ({{2}}) en el lugar del número de pedido, que se ubica dentro de la llave.

Cuando termines, tu mensaje tendrá el siguiente aspecto: Puedes revisar 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 app para que envíe automáticamente el mensaje al cliente cuando este haga un pedido.

Usar webhooks para enviar notificaciones a un servidor express

Digamos que deseas enviar un mensaje automático a tus clientes cada vez que hacen un pedido en tu negocio de Shopify. Revisas tu negocio aproximadamente cada cinco minutos para ver si ingresó algún pedido. Sin embargo, enviar solicitudes a la API de manera constante resulta ineficaz para tu negocio, en especial si no se hizo ningún pedido nuevo.

Es mucho más eficaz si un webhook captura el evento de "creación de pedidos" de tu negocio y te avisa cuando un cliente hace un pedido.

Aquí te mostramos los pasos básicos que debes seguir para crear un webhook de "creación de pedido" y asignarlo a un servidor express.

Configurar un proyecto de Node.js

Comienza creando un carpeta con el nombre "whatsapp-demo" para tu proyecto.

Luego, inicia la terminal de comandos, usa el comando "cd" para cambiar al directorio "whatsapp-demo" y ejecuta el siguiente comando para iniciar un proyecto de Node.js:

npm init -y

Instala express, la biblioteca que se usa para crear un servidor web en Node.js, ejecutando el siguiente comando:

npm i express

Ahora que está configurado tu entorno de desarrollo, debes crear el servidor express.

Crear un servidor express

Crea un archivo con el nombre "test.js" dentro de la carpeta "whatsapp-demo". Ábrelo con tu editor de código fuente preferido, y copia y pega el siguiente código en el editor:

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!'))

Al usar el código anterior, configuras un servidor express básico que muestra un mensaje en la terminal del servidor cuando un webhook envía una notificación de "creación de pedido".

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

Configurar un túnel de tráfico HTTPS

Cuando configuras un webhook, Shopify necesita que proporciones una URL pública a la que enviará la notificación.

Si sigues este tutorial para un servidor público, usa su URL. No obstante, si lo sigues para tu máquina local, es necesario que crees un túnel con una URL HTTPS de acceso público.

Primero, instala ngrok ejecutando el siguiente comando:

npm install -g ngrok

Luego, lanza una ventana de terminal diferente y ejecuta el siguiente comando, con el fin de vincular la URL con el túnel al servidor local:

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

Anota la URL, porque la necesitarás en el próximo paso. Ten en cuenta que, si reinicias este cliente, obtendrás una nueva URL y será necesario que actualices todas las referencias vinculadas a ella.

Crear un webhook en Shopify

Ve al administrador del negocio de Shopify y desplázate a Configuración > Notificaciones. Una vez allí, ve a Webhooks y haz clic en Crear webhook.

Agrega un webhook de "creación de pedido" y especifica la URL del túnel o la URL pública que creaste en la sección anterior.

Ejecuta el servidor local en una terminal diferente con el nodo index.js. Luego, haz clic en Enviar notificación de prueba.

Si todo está bien, recibirás este mensaje en la terminal de tu servidor: "Tienes un pedido".

Ahora cuentas con una conexión que funciona entre el negocio de Shopify y el servidor express. Luego, enviarás la plantilla de mensaje de WhatsApp al cliente después de que haga un pedido.

Envía un mensaje personalizado con la plantilla "order_notification".

En primer lugar, instala Axios ejecutando el siguiente comando en tu terminal:

npm i axios

Usa Axios para realizar la solicitud POST que se encargará de enviar el mensaje de WhatsApp al cliente.

Después de instalar Axios, crea otro archivo en la carpeta del proyecto con el nombre "customMessage.js". Luego, importa "axios" y "express" al archivo con el siguiente código:

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

A continuación, crea una ruta para administrar la notificación de creación de pedidos de Shopify ejecutando lo siguiente:

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 llame al webhook "crear pedido" con un pedido, los detalles del pedido se enviarán a la ruta dentro de "res", el segundo argumento de la función de devolución de llamada asincrónica y un objeto JavaScript.

Luego, obtén el número de teléfono del cliente, su nombre y el identificador del pedido a partir de los detalles del pedido, y úsalos para establecer 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 que se indicó con anterioridad contiene todos los parámetros que se necesitan para completar la solicitud. Asegúrate de que el nombre de la plantilla que especificaste en el objecto coincida con el que creaste anteriormente en el administrador de WhatsApp Business.

A continuación, crea un objeto de configuración con un objeto de encabezado anidado. Dentro de los encabezados, configura el token de acceso de WhatsApp como valor de autorización (reemplaza ACCESS_TOKEN con el token) y "application/json" como tipo de contenido:

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

Luego, crea una solicitud POST con Axios y pasa el objeto de configuración y el de datos como argumentos. Anida métodos then y catch que muestren el resultado (o el mensaje de error, si no se completa el proceso):

  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);
}

Reemplaza YOUR_WABA_ID por el identificador de WhatsApp Business que se obtiene en el panel de apps de WhatsApp y API_VERSION por una versión de la API de la nube compatible (de forma predeterminada, es la versión 15.0).

¡La app está configurada!

Para probarla, el túnel ngrok debe estar en ejecución y es necesario que inicies el servidor express en una terminal separada:

node customMessages.js

Otros eventos de Shopify

Además de hacer el pedido, Shopify ofrece más de 50 webhooks relacionados con eventos diferentes. Puedes suscribirte para recibir notificaciones cuando se crean y actualizan carritos, cuando se crean y actualizan colecciones de productos, cuando se procesan intentos de facturación (tengan éxito o no) y en muchas situaciones más.

Si deseas usar alguno de estos webhooks, sigue un patrón similar al que se describió con anterioridad. Para hacerlo, crea un nuevo webhook en tu administrador de Shopify y registra el tema como ruta en el servidor express.

Como ya viste, la Plataforma de WhatsApp Business te ayuda a que te comuniques de manera óptima con tus clientes, tanto de manera manual como programática, utilizando eventos en tu negocio de Shopify.

La integración con WhatsApp de Shopify te permite enviar mensajes de forma masiva a tus clientes en tiempo real. Se pueden enviar los mensajes de manera automática (por ejemplo, según si se produce algún evento) o manual. Esta función no solo resulta fácil de configurar, sino que también es muy escalable. Combinar WhatsApp con Shopify hace que la comunicación con los clientes sea coherente y efectiva y que tenga un gran impacto.

Para obtener más información sobre cómo puedes integrar WhatsApp en tus apps o proyectos, consulta nuestros tutoriales para desarrolladores.