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

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 Integrar Slack y WhatsApp con Low-Code (Parte 1), viste cómo configurar el proyecto y hacer tu primera conexión para enviar mensajes de WhatsApp a Slack. En esta 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

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

En la primera parte, configuramos nuestro proyecto e iniciamos la conversación en Slack. Ahora usted podría pensar que el siguiente paso sería dejar que nuestros compañeros de equipo Slack responder ¿verdad? ¡Bueno, primero tenemos que resolver el problema de vincular de alguna manera nuestro hilo Slack a nuestra conversación AI Studio para que sepamos 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 haciendo clic en 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 Slack InteractivityA continuación, haz clic en "Crear nuevo acceso directo" y rellénalo:

¿Dónde debería aparecer este acceso directo? En los mensajes.

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

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. Manejamos la respuesta que recibimos de Slack y extraemos thread_ts (timestamp) 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 llamada extractSessionId busca en nuestro payload de Slack la función 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 conectar Slack a Whatsapp y dejar que respondan a nuestros clientes. Hagámoslo creando nuestro primer comando de Slack.

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: /respuesta

Solicitar URL: TUNNEL_URL/slack/mensaje

Breve descripción: Responder a las consultas entrantes

Sugerencia de uso: [session_id]

Y haz clic en "Guardar".

Create a Slack Slash CommandAhora 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 WhatsApp!

Cómo enviar respuestas de WhatsApp a Slack

Así que ya casi tenemos nuestro escenario completo funcionando. Pero nos falta una cosa. Necesitamos permitir a nuestro usuario enviar mensajes continuos a Slack para responder a nuestro agente humano. 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) => {
  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 Live Agent no sabe cuánto puede durar una conversación de ida y vuelta entre AI Studio y alguna otra interfaz. Para eso debemos dejar que AI Studo sepa cuando terminar la conversación y salir del nodo Live Agent Routing. Esto terminará la integración de Slack con WhatsApp para el cliente actual.

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 comando session_id para saber qué sesión terminar.

Crea el siguiente comando:

Comando: /cerrar_ticket

Solicitar URL: TUNNEL_URL/slack/end

Breve descripción: Se ha resuelto el problema del cliente

Sugerencia de uso: [session_id]

Y haz clic en "Guardar".

Slack Slash Command Details

Dentro de nuestro /slack/end endpoint necesitamos manejar la solicitud de Slack. Realmente 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 WhatApp a Slack y de Slack a WhatsApp para atención 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 WhatsApp y Slack de tu teléfono. ¿No es increíble?

También puedes encontrar el código del servidor refactorizado en Github con instrucciones de configuración

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ía incorporar los agentes de SMS o Voice de AI Studio, lo que proporcionaría 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.

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

• Envía mensajes de WhatsApp desde Google Sheets con AI Studio