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

Introducción

Las pequeñas y medianas empresas a menudo carecen de recursos para soluciones de atención al cliente completas (y costosas). Sin embargo, con la plataforma de bajo código AI Studio de Vonage, puedes crear una solución de experiencia del cliente personalizada y rentable adaptada a tus necesidades.

Este tutorial le mostrará cómo integrar SMS y Slack para crear un potente sistema de atención al cliente. Al conectar SMS a Slack y Slack a SMS, puede permitir que su equipo responda a las consultas de los clientes directamente desde Slack.

Utilizando su personal existente, puede conectarse con los clientes a través de SMS, Voice (teléfono) o WhatsApp y responder directamente desde Slack. ¿Y lo mejor? Sólo se te cobrará por lo que utilices. Esta potente solución es especialmente beneficiosa para las startups que ya utilizan Slack para las comunicaciones en equipo.

Aprenda a conectar SMS y Slack para una conmutación por error de la atención al cliente en directo. Si sus clientes no reciben una respuesta satisfactoria del agente virtual, la conversación se transferirá sin problemas a Slack, donde cualquier miembro del equipo podrá ayudarle.

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

Integración de SMS 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 para esta integración de SMS a Slack. 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 de barra en una respuesta de canal normal no asocia la respuesta a 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 SMS.

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 seguido del comando 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 /close_ticket slash, 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 perfectamente SMS 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 sms-to-slack
cd sms-to-slack

2. Inicializar un nuevo proyecto Node.js e instalar dependencias.

npm init -y
npm install express axios body-parser dotenv

3. Cree sus archivos de proyecto

touch server.js .env .gitignore 

4. Abra el proyecto en el editor de código que prefiera.

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

.env

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

SLACK_WEBHOOK_URL=""
AI_STUDIO_KEY=""

En el archivo servidor.js añada el siguiente texto:

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

// 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 solicitudes HTTP nos permiten pasar información entre Slack y 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. Inicie 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á una URL de túnel que debería parecerse a esto:

➜  sms-to-slack npx localtunnel --port 3000

your url is: https://some-parks-beg.loca.lt

La url que empieza por https y termina en loca.lt es la url de tu túnel. En el resto del artículo siempre que TUNNEL_URL se mencione, se debe 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 haga clic en "Permitir". Esto le redirigirá a la página de Webhooks entrantes de su aplicación, excepto que ahora si se desplaza hasta la parte inferior verá una URL de Webhook para el canal deseado.

Copie la URL y añádala como valor para su SLACK_WEBHOOK_URL en su archivo .env. Debería ser algo como esto:

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

Cómo crear un chatbot para SMS entrantes

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

• Tipo: SMS

• Plantilla: Empezar de cero

• Evento: Entrada

El flujo de nuestro agente será relativamente sencillo.

1. Cuando el usuario envíe un mensaje al agente, utilizaremos un nodo Nodo Recoger Entrada para preguntar con qué necesitan ayuda. La respuesta se almacenará en un parámetro llamado inquiry.

2. Entonces utilizaremos un nodo condicional para comprobar si inquiry es igual a "escalar".

3. Si lo es, enviaremos al usuario un mensaje que diga "Por favor espere mientras le conectamos con un agente en directo". 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).

4. El nodo Please Hold se conectará a un Nodo de Enrutamiento de Agente en Directo.

5. Por último, el Nodo de Enrutamiento de Agentes en Directo y Nodo de envío de agradecimientos se conectarán a un nodo Nodo de Fin de Conversación.

Overview of AI Studio SMS Agent

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

En el Nodo de Enrutamiento de Agente en Vivo, necesitamos 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 Transferencia entrante EP

3. Seleccione consulta en Parámetros de transferencia

Y pulsa "Guardar y Salir".

Example of Live Agent Routing Node in AI Studio

A continuación, añade 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 API".

Copia el X-Vgai-Key y ahora añádelo como valor para tu AI_STUDIO_KEY en tu archivo .env. Debería ser algo como esto:

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 necesitamos crear 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.

Nuestro agente Start Connection Endpoint 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 punto final:

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 de SMS a Slack

Ahora puedes probar que tu agente está conectado a tu canal de Slack. En la segunda pestaña de terminal que has abierto antes, ejecuta tu aplicación:

node server.js

¿Apareció tu transcripción en Slack? ¡Qué guay!

Dado que aún no hemos implementado una forma de finalizar las conversaciones en AI Studio, cada vez que realices una prueba tendrás que finalizar la conversación manualmente. Para ello, envía una solicitud POST al campo Detener conexión PE con una herramienta como Postman. Puedes encontrar tus sesiones activas en la pestaña Informes.

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

Cómo crear un acceso directo a un mensaje de Slack

Ahora que hemos iniciado nuestra conversación en Slack, se podría pensar que el siguiente paso sería dejar que nuestros compañeros de equipo de Slack respondan ¿verdad? Bueno, primero tenemos que resolver el problema de vincular de alguna manera nuestro hilo de Slack a nuestra conversación de AI Studio para saber cómo organizar nuestros mensajes de ida y vuelta.

Para ello, crearemos un acceso directo a mensajes de Slack. Este acceso directo de mensaje requerirá que nuestro agente "abra un ticket" simplemente pulsando un botón en la nueva conversación. Esto enviará una petición a nuestra aplicación donde almacenaremos la información del hilo de conversación en un nuevo objeto en relación con el objeto conversation_id.

Cómo activar la interactividad de la aplicación Slack

Para crear accesos directos, tendrás que habilitar la interactividad en tu aplicación Slack. Puedes ver cómo hacerlo a continuación. Para la URL de solicitud añadirás tu TUNNEL_URL seguido de /slack/start. Este será el punto final en nuestra aplicación donde Slack enviará una solicitud cada vez que se active el acceso directo.

Enable interactivity in your Slack App

A continuación, haz clic en "Crear nuevo acceso directo" y rellénalo:

Nombre: Iniciar un ticket

Breve descripción: Crea una conversación para una consulta de un cliente

ID de devolución de llamada: begin_response

Create Slack Shortcut

Cómo vincular sesiones con hilos de Slack

Ahora actualizaremos nuestra aplicación para utilizar la información que recibimos de Slack y vincularla a nuestras sesiones de AI Studio. Primero, crearemos un objeto global llamado SESSIONS. Puedes añadirlo justo encima de nuestros endpoints:

const SESSIONS = {};

Dentro de nuestros puntos finales vamos a hacer 4 cosas:

1. Manejar la respuesta que recibimos de Slack y extraer thread_ts (marca de tiempo) y session_id

2. Crear una nueva entrada en SESSIONS para la sesión/hilo actual

3. Preparar los datos que se enviarán a Slack, lo que incluye dar formato a nuestro mensaje de inicialización para nuestro hilo de Slack.

4. Envío de nuestra solicitud a Slack para que publique el mensaje de inicialización en el hilo correcto

app.post('/slack/start', urlencodedParser, function (req, res){
  const response = JSON.parse(req.body.payload);
  const thread_ts = response.message.ts;
  const session_id = extractSessionId(response.message.text);
  newSession(session_id, thread_ts);

  const data = {
    "thread_ts": thread_ts,
    "text": `Session seen by <@${response.user.id}>`
  }

  axios.post(SLACK_WEBHOOK_URL, data);
  res.send("Begin initiated");

})

En nuestro endpoint, dependemos de dos nuevas funciones. Puedes añadirlas al final de tu archivo con las otras funciones. La primera se llama extractSessionId que busca en nuestro payload de Slack la corriente sessionId:

const extractSessionId = (input) => {
  const sessionIdPattern = /Session: `([0-9a-f-]{36})`/i;
  const match = input.match(sessionIdPattern);
  if (match && match[1]) {
    return match[1];
  }
  return null;
};

La segunda función newSessioncrea una nueva entrada en nuestra variable global SESSIONS global.

const newSession = (session_id, message_ts) => {
  SESSIONS[session_id] = {
    "session_id" : session_id,
    "thread_ts" : message_ts
  }
}

Cómo crear un comando Slack Slash para responder mensajes

Ahora que nuestro agente ha inicializado la conversación en nuestra aplicación, queremos dejar que realmente responda a nuestros clientes. Vamos a hacer eso mediante la creación de nuestro primer comando de barra.

En el panel de control de nuestra aplicación Slack, abra la pestaña Comandos Slash. A continuación, haga clic en "Crear nuevo comando".

Crea el siguiente comando:

Comando: responder URL de solicitud: TUNNEL_URL/slack/mensaje Descripción breve: Responder a las consultas entrantes Sugerencia de uso: [session_id]

Y haz clic en "Guardar".

Create Slack Slash Command

Ahora necesitamos actualizar nuestro endpoint ‘/slack/message’ endpoint para manejar los datos que se envían desde Slack. Tenemos que hacer dos cosas:

1. Coge el mensaje y añádelo como comentario en el hilo correcto en Slack, junto con algo de formato

2. Coge el mensaje y envíalo a la sesión correcta en AI Studio

Podemos hacerlo con el siguiente código:

app.post('/slack/message', urlencodedParser, function (req, res) {
  const response = req.body;
  const agentResponse = parseMessage(req.body.text);
  const session_id = agentResponse['sessionId'];
  const message = agentResponse['message'];
  const studio_data = { message_type: 'text', text: message };
  const thread_ts = SESSIONS[session_id].thread_ts;
  const slack_data = {
    "thread_ts": thread_ts,
    "text": `Response sent by <@${response.user_id}> \`\`\`${message}\`\`\``,
  }
  axios.post(`https://studio-api-eu.ai.vonage.com/live-agent/outbound/${session_id}`, studio_data, {
    headers: { 'X-Vgai-Key': AI_STUDIO_KEY }
  })
  axios.post(SLACK_WEBHOOK_URL, slack_data);
  res.send("Response sent to user")
})

Notarás que dependemos de una última función llamada parseMessage para limpiar nuestros datos de Slack. Puedes añadirla al final de nuestro archivo:

const parseMessage = (input) => {
  const [sessionId, ...messageParts] = input.split(' ');
  const message = messageParts.join(' ');

  // Check if the first part is a valid session ID format
  const sessionIdPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

  if (sessionIdPattern.test(sessionId)) {
    return { sessionId, message };
  }

  // If the first part is not a valid session ID, treat the entire input as a message
  return { message: input };
};

¡Ya puedes probar a enviar respuestas a mensajes desde Slack! ¡Cómo mola recibirlo por SMS!

Cómo enviar respuestas por SMS a Slack

Así que ya casi tenemos nuestro escenario completo funcionando. Pero nos falta una cosa. Necesitamos permitir a nuestros usuarios enviar mensajes continuos a Slack para responder a nuestros agentes humanos. Podemos hacerlo actualizando nuestro /inbound endpoint.

Aquí, manejamos los datos de AI Studio y extraemos el mensaje y el session_id. Usando el session_id podemos buscar nuestro thread_ts. Una vez que tenemos el thread_tspodemos enviar nuestro mensaje al hilo correcto con una solicitud POST a Slack.

Puede actualizar su código de la siguiente manera:

app.post('/inbound', (req, res) => {
  // console.log("inbound endpoint", req.body)
  const message = req.body.text
  const session_id = req.body.sessionId;
  const thread_ts = SESSIONS[session_id].thread_ts;
  const data = {
    "thread_ts": thread_ts,
    "text": `Customer respsonse: \`\`\`${message}\`\`\``
  }
  axios.post(SLACK_WEBHOOK_URL, data );
  res.send('Inbound endpoint reached');
});

Cómo crear un comando Slack Slash para terminar una conversación

Puede que pienses: "¡Ya está! Ya he terminado!". ¡Pues casi! Nuestro Nodo Agente en Directo no sabe cuánto puede durar una conversación de ida y vuelta entre AI Studio y alguna otra interfaz. Para ello debemos hacer saber a AI Studio cuándo terminar la conversación y salir del Nodo de Enrutamiento de Agente en Directo.

Vamos a crear otro comando slash, similar a como creamos /reply. Esta vez crearemos un comando para /close_ticket. Cerrar ticket aceptará de nuevo el session_id para saber qué sesión terminar.

Crea el siguiente comando:

Comando: /cerrar_ticket URL de solicitud: TUNNEL_URL/slack/end Descripción breve: El problema del cliente se ha resuelto Sugerencia de uso: [session_id]

Y haz clic en "Guardar".

Dentro de nuestro /slack/end endpoint tenemos que manejar la solicitud de Slack. Sólo tenemos que hacer tres cosas:

1. Agarra el session_id utilizando nuestra función parseMessage función de nuevo

2. Envíe una solicitud al punto final de Detener conexión en AI Studio para indicarle que detenga la conversación para la conexión correcta. session_id

3. Informar al agente humano en Slack de que la conversación ha finalizado publicando un mensaje en el hilo correcto.

Para ello, actualice su código /slack/end para que tenga este aspecto:

app.post('/slack/end', urlencodedParser, function (req, res) {
  const agentResponse = parseMessage(req.body.text);
  const session_id = agentResponse['sessionId'];
  const data = {};
  axios.post(`https://studio-api-eu.ai.vonage.com/live-agent/disconnect/${session_id}`, data, {
    headers: { 'X-Vgai-Key': AI_STUDIO_KEY }
  })
  const thread_ts = SESSIONS[session_id].thread_ts;
  const slack_data = {
    "thread_ts": thread_ts,
    "text": `This conversation has been marked as resolved.`,
  }
  axios.post(SLACK_WEBHOOK_URL, slack_data);
  res.send("Conversation ended")
})

Conclusión

¡Y eso es todo! Has implementado con éxito una integración perfecta de SMS a Slack y de Slack a SMS para soporte al cliente usando la plataforma de código bajo AI Studio de Vonage. Reinicia tu servidor Node.js ejecutando node server.js en tu terminal y prueba el flujo completo enviando mensajes de ida y vuelta entre el SMS de tu teléfono y Slack. ¿No es increíble?

Para mejorar aún más esta aplicación, considere la posibilidad de aprovechar la sólida API web de Slack, que permite la interactividad basada en reacciones emoji. Además, podrías incorporar los agentes de WhatsApp de AI Studio, proporcionando a los clientes un canal de comunicación adicional.

¿Utiliza otras soluciones low-code o no-code para captar clientes? Únete a la Comunidad de desarrolladores de Vonage en Slack o síguenos en X, antes conocido como Twitter para compartir tus interesantes proyectos y opiniones.

La integración de SMS y Slack para la atención al cliente es solo un ejemplo de cómo las plataformas de bajo código como AI Studio pueden agilizar los procesos empresariales y mejorar las experiencias de los clientes. Explora más posibilidades y mantente al día de los últimos avances en los espacios low-code y no-code.

Recursos adicionales

• Aumentar el ROI de Chatbot: Desvío de solicitudes de agentes humanos

• 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

• La nueva frontera de las oportunidades para autónomos: Agentes conversacionales de IA