Integrar Slack y WhatsApp con Low-Code (Parte 1)

Las startups y las pequeñas empresas suelen carecer de recursos para soluciones de atención al cliente completas (y caras). Sin embargo, con AI Studio de Vonage de Vonage, puedes crear una solución de experiencia del cliente personalizada y rentable adaptada a tus necesidades. Una opción es crear una integración de WhatsApp con Slack.

Este tutorial en dos partes te mostrará cómo integrar WhatsApp y Slack para crear un potente sistema de atención al cliente. En este primer artículo, configurará el proyecto y realizará su primera conexión para enviar mensajes de WhatsApp a Slack. En la segunda parte, manejarás la lógica más avanzada para que tu equipo pueda responder a las consultas de los clientes directamente desde Slack.

TL;DR: Encuentra el código del servidor refactorizado en Github para seguir la configuración de AI Studio y Slack sin preocuparse de programar en JavaScript.

Preview of Slack-WhatsApp Integration

Integración de WhatsApp con Slack para la atención al cliente Descripción general

Inicialmente, mi objetivo era conseguir un flujo similar al del famoso comando comando de barra de Giphy. Sin embargo, los comandos de barra personalizados no están permitidos en los hilos por Slack (Giphy es un caso especial). El uso de un comando slash en una respuesta de canal regular no asocia la respuesta con una conversación específica. ¡Con conversaciones simultáneas, este enfoque crearía un lío! Para mantener las conversaciones en hilos, hemos implementado la siguiente solución:

1. Aparece un nuevo mensaje en el canal de atención al cliente con el conversation_id de una nueva conversación de WhatsApp.

2. Un miembro del equipo hace clic en un acceso directo de Slack en el mensaje, lo que indica a nuestra aplicación que vincule esa conversación al hilo de Slack actual.

3. El miembro del equipo utiliza el comando /reply slash seguido del session_id y su respuesta.

4. Nuestra aplicación gestiona la respuesta, la envía a AI Studio y la añade como respuesta en el hilo.

5. Nuestra aplicación también gestiona las respuestas de los clientes y las añade al hilo correcto.

6. La conversación continúa hasta que el agente utiliza el comando de barra /close_ticket, lo que finaliza la sesión en AI Studio y añade una respuesta de "conversación resuelta" en el hilo de Slack.

Siguiendo este enfoque, puedes integrar a la perfección WhatsApp y Slack para la atención al cliente, lo que permite a tu equipo gestionar las conversaciones directamente desde Slack manteniendo el hilo y el contexto adecuados.

Requisitos previos

• Número virtual de Vonage

• Slack Account y permiso para instalar aplicaciones en su espacio de trabajo

• Nodo

  Vonage API Account

  To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

  

  Ready to start building?

  Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Configurar

Cómo configurar una aplicación de nodo con Express

1. Crea un nuevo directorio para tu proyecto y navega en él utilizando tu terminal.

   • mkdir whatsapp-a-slack

   • cd whatsapp-to-slack

2. Inicializa un nuevo proyecto Node.js:

   • npm init -y

3. Instalar dependencias

   • npm install express axios body-parser dotenv

4. Cree sus archivos de proyecto

   • toque server.js .env .gitignore

   • código .

En el .gitignore, tendremos que añadir una sola línea para que git no comparta accidentalmente nuestras credenciales .env:

.env

En nuestro .env tendremos que añadir nuestros valores seguros de Slack y AI Studio. Los completaremos en los próximos pasos. Por ahora añade:

// Inside our ENV file 
SLACK_WEBHOOK_URL=""
AI_STUDIO_KEY=""

En el server.js añade el siguiente boilerplate:

// Import required modules
require('dotenv').config();
const express = require('express');
const axios = require('axios');
const bodyParser = require('body-parser');

// Create an Express application
const app = express();
const PORT = process.env.PORT || 3000;

// Import our secure ENV variables
const SLACK_WEBHOOK_URL = process.env.SLACK_WEBHOOK_URL;
const AI_STUDIO_KEY = process.env.AI_STUDIO_KEY;

// Middleware to parse JSON requests
app.use(express.json());

// Middleware to parse requests from Slack
const urlencodedParser = bodyParser.urlencoded({ extended: false })

// Global Variables

// Define the /start endpoint
app.post('/start', (req, res) => {
    // Handle POST request to /start
    res.send('Start endpoint reached');
});

// Define the /inbound endpoint
app.post('/inbound', (req, res) => {
    // Handle POST request to /inbound
    res.send('Inbound endpoint reached');
});

// Define the /slack/start endpoint 
app.post('/slack/start', urlencodedParser, function (req, res){
res.send("Begin initiated");
});

// Define the /slack/message endpoint
app.post('/slack/message', urlencodedParser, function (req, res) {
  res.send("Response sent to user")
});

app.post('/slack/end', urlencodedParser, function (req, res) {
res.send("Conversation ended")
});

// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

// We'll add our function declarations below here 

En nuestro boilerplate, hacemos 4 cosas principales:

1. Importa nuestras dependencias.

   • Express ejecuta nuestro servidor.

   • Axios nos permite hacer peticiones HTTP. Las peticiones HTTP son las que nos permiten enviar y recibir información de Slack & AI Studio.

   • bodyParser nos ayuda a analizar o limpiar los datos que recibimos de Slack.

2. Configurar el servidor de nuestra aplicación, el middleware y las variables env.

3. Crear endpoints para cada una de las funcionalidades de nuestra aplicación

4. Iniciar nuestro servidor

Cómo exponer nuestra aplicación a través de localtunnel

Nuestra aplicación requiere pasar datos varias veces entre AI Studio y Slack. Utilizaremos localtunnel para exponer nuestro localhost y crear túneles de acceso público. En tu terminal ejecuta el siguiente comando: npx localtunnel --port 3000 Esto creará un túnel url que debe ser algo como esto:

➜  whatsapp-to-slack npx localtunnel --port 3000
your url is: https://some-parks-beg.loca.lt

La url que comienza con https y termina en loca.lt es la url de tu túnel. En el resto del artículo, cada vez que se mencione TUNNEL_URL, se utilizará este valor.

Abre una segunda pestaña en tu terminal para más tarde.

Cómo configurar una aplicación Slack

1. Inicie sesión en su espacio de trabajo de Slack y abra sus aplicaciones.

2. Haga clic en "Crear una nueva aplicación". Selecciona la opción "Desde cero".

3. Asigne un nombre a su aplicación y seleccione el espacio de trabajo en el que desea utilizarla.

4. Haga clic en "Crear aplicación".

¡Listo! ¡Ya tienes tu primera Slack App! Hay una última cosa que tendrás que hacer. Necesitarás habilitar Incoming Webhooks. Una vez que hayas activado los webhooks entrantes, desplázate hasta la parte inferior de la página y haz clic en "Añadir nuevo webhook al espacio de trabajo". Se le pedirá que seleccione el canal deseado y que haga clic en "Permitir". Esto te redirigirá a la página de Webhooks Entrantes de tu aplicación, excepto que ahora si te desplazas hasta el final verás una URL de Webhook para tu canal deseado. Copie la URL y añádala como valor para su SLACK_WEBHOOK_URL en tu archivo .env. Debería ser algo como esto:

SLACK_WEBHOOK_URL="https://hooks.slack.com/services/..."

Cómo crear un chatbot de WhatsApp entrante

Para crear su agente, siga las instrucciones de la documentación de AI Studio aquí. Hay tres opciones importantes para nuestro agente, seleccione:

• Tipo: WhatsApp

• Plantilla: Empezar de cero

• Evento: Entrada

El flujo de nuestro agente será relativamente simple. Cuando el usuario envíe un mensaje al agente, utilizaremos un nodo Collect Input para preguntarle en qué necesita ayuda. La respuesta se almacenará en un parámetro llamado inquiry. Luego usaremos una condicional para comprobar si inquiry es igual a "escalar". Si lo es, enviaremos al usuario un mensaje diciendo "Por favor espere mientras le conectamos con un agente en vivo".

Si la consulta es otra cosa, imitaremos todos los demás flujos posibles enviando simplemente un mensaje "¡Gracias por utilizar nuestro servicio!". (nodo Enviar Gracias). El nodo Please Hold se conectará a un nodo Live Agent Routing. Por último, tanto el Nodo de Enrutamiento de Agente en Directo como el Nodo de Envío de Agradecimiento se conectarán a un nodo de Fin de Conversación.

AI Studio Flow Overview

Cómo configurar un nodo de enrutamiento de agentes en directo

El Live Agent Routing Node es como AI Studio crea tu integración de Whatsapp a Slack. En el Live Agent Routing Node tenemos que hacer 3 cosas:

1. Añada su 'TUNNEL_URL/start' en el campo Iniciar conexión EP

2. Añada su "TUNNEL_URL/inbound" en el campo EP de transferencia entrante

3. Seleccione inquiry en los Parámetros de transferencia

Y pulsa "Guardar y Salir".

Live Agent Routing Node

A continuación, tendremos que añadir la clave de la API de AI Studio al archivo .env. Encontrarás la clave X-Vgai-Key en la parte superior derecha del lienzo de AI Studio. Haz clic en el icono "usuario" y, a continuación, en "Generar clave de API".

Copie el X-Vgai-Key y ahora añádalo como el valor para su AI_STUDIO_KEY en su archivo .env. Debe ser algo como esto:

SLACK_WEBHOOK_URL="https://hooks.slack.com/services/..."
AI_STUDIO_KEY="YOUR_KEY_VALUE"

Por último, deberás asignar tu número de Vonage al agente. Sigue las instrucciones de publicación de la documentación.

Cómo iniciar una conversación en Slack mediante Webhooks entrantes

La primera acción que debemos realizar es conectar AI Studio a Slack. Utilizaremos el punto final de conexión de inicio de Live Agent y los Webhooks entrantes de Slack. Ya hemos configurado estos en la configuración, pero ahora tenemos que añadir la lógica para conectarlos realmente. El Start Connection Endpoint de nuestro agente está configurado para enviar una petición a nuestro /start endpoint. Allí enviaremos 2 piezas de información a Slack: el sessionId y la transcripción de nuestra conversación hasta el momento. Vamos a empaquetar esto en el objeto de datos de acuerdo a lo que Slack está esperando con un poco de formato. Usaremos la librería axios para enviar todas nuestras peticiones POST. Así es como nuestro /start endpoint:

app.post('/start', (req, res) => {
  const sessionId = req.body.sessionId;
  const transcription =  handleTranscription(req.body.history.transcription);
  const data = { text: `Session: \`${sessionId}\`\nTranscription:${transcription}`, }
  axios.post(SLACK_WEBHOOK_URL, data)
  res.send('Start endpoint reached');
});

Observará que llamamos a la función handleTranscription. Esta función formatea nuestra transcripción en bruto en algo agradable para Slack. Usted puede agregar esto en la parte inferior de nuestro archivo.

const handleTranscription = (transcription = []) => {
  if (!transcription.length) return null;

  let strTrans = '```';

  for (const message of transcription) {
    for (const key in message) {
      strTrans += `\n${key}: ${message[key]}`;
    }
  }

  strTrans += '```';
  return strTrans;
};

Cómo probar la conexión entre WhatsApp y Slack

Ahora puedes probar que tu agente está conectado a tu canal de Slack. En su segunda pestaña de terminal, ejecute su aplicación:

node server.js

¿Apareció tu transcripción en Slack? ¡Qué guay! Como aún no hemos implementado una forma de finalizar las conversaciones en AI Studio, cada vez que hagas una prueba tendrás que finalizar la conversación manualmente. Puedes hacerlo enviando una solicitud POST a la función Detener conexión PE con una herramienta como Postman. Puedes encontrar tus sesiones activas en la pestaña Informes.

End Conversation with Postman

Además, cada vez que quieras probar un nuevo cambio en tu aplicación de nodo tendrás que reiniciar el servidor.

Conclusión

Hasta aquí la primera parte. En Integrar Slack y WhatsApp con Low-Code (Parte 2)completarás la funcionalidad de nuestro flujo de atención al cliente. Aprenderás a crear accesos directos a mensajes de Slack, a crear comandos de Slack Slash y a mantener una conversación completa de ida y vuelta entre WhatsApp y Slack.

Si tienes problemas con este tutorial o alguna pregunta, asegúrate de unirte a la Comunidad de desarrolladores de Vonage en Slack. También puedes seguirnos en X, antes conocido como Twitter para estar al tanto de las últimas noticias para desarrolladores de Vonage.

Recursos adicionales

• Creación de un agente de voz resistente: Guía de sistemas de conmutación por error

• Cómo construir una jerarquía de clasificación de intenciones

• Integración de Slack y SMS a través de Low-Code AI Studio