Intégrer Slack et WhatsApp avec Low-Code (Partie 2)

Les startups et les petites entreprises manquent souvent de ressources pour des solutions de support client complètes (et coûteuses). Cependant, avec l'AI Studio de AI Studio de Vonage de Vonage, vous pouvez créer une solution d'expérience client personnalisée et rentable, adaptée à vos besoins. L'une des options consiste à intégrer WhatsApp à Slack.

Ce tutoriel en deux parties vous montrera comment intégrer WhatsApp et Slack pour créer un puissant système d'assistance à la clientèle. Dans Intégrer Slack et WhatsApp avec Low-Code (Partie 1), vous avez vu comment configurer le projet et établir votre première connexion pour envoyer des messages WhatsApp à Slack. Dans cette deuxième partie, vous vous occuperez de la logique plus avancée afin que votre équipe puisse répondre aux demandes des clients directement à partir de Slack.

TL;DR : Trouver le code serveur refactoré sur Github pour suivre l'installation d'AI Studio et de Slack sans se soucier de la programmation JavaScript.

Preview of Slack-WhatsApp Integration

Comment créer un raccourci pour un message Slack

Dans la première partie, nous avons configuré notre projet et lancé la conversation dans Slack. Vous pensez peut-être que la prochaine étape consistera à laisser nos coéquipiers Slack répondre, n'est-ce pas ? Eh bien, nous devons d'abord résoudre le problème de lier notre fil de discussion Slack à notre conversation AI Studio afin de savoir comment organiser nos messages dans les deux sens ! Pour ce faire, nous allons créer un raccourci de message Slack. Ce raccourci de message demandera à notre agent d'"ouvrir un ticket" en cliquant simplement sur un bouton dans la nouvelle conversation. Cela enverra une requête à notre application où nous stockerons les informations du fil de conversation dans un nouvel objet en relation avec l'objet conversation_id.

Comment activer l'interactivité de l'application Slack

Pour créer des raccourcis, vous devez activer l'interactivité dans votre application Slack. Vous pouvez voir comment le faire ci-dessous. Pour l'URL de demande, vous devez ajouter votre TUNNEL_URL suivi de /slack/start. Ce sera le point de terminaison dans notre application où Slack enverra une demande chaque fois que le raccourci est déclenché.

Enable Slack InteractivityCliquez ensuite sur "Créer un nouveau raccourci" et remplissez-le :

Où ce raccourci doit-il apparaître ? Sur les messages.

Nom : Démarrer un ticket

Description succincte : Créer une conversation pour une demande de renseignements de la part d'un client

ID du rappel : begin_response

Comment lier des sessions avec des fils de discussion Slack

Nous allons maintenant mettre à jour notre application pour utiliser les informations que nous recevons en retour de Slack et les lier à nos sessions AI Studio. Tout d'abord, nous allons créer un objet global appelé SESSIONS. Vous pouvez l'ajouter juste au-dessus de nos points d'extrémité :

const SESSIONS = {};

À l'intérieur de nos points d'extrémité, nous allons faire 4 choses :

1. Traiter la réponse que nous recevons de Slack et extraire thread_ts (timestamp) et session_id

2. Créer une nouvelle entrée dans SESSIONS pour la session/le fil de discussion en cours

3. Préparer les données à envoyer à Slack, ce qui inclut le formatage de notre message d'initialisation pour notre thread Slack.

4. Envoi de notre demande à Slack pour poster le message d'initialisation dans le bon fil de discussion

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

Dans notre point final, nous nous appuyons sur deux nouvelles fonctions. Vous pouvez les ajouter au bas de votre fichier avec les autres fonctions. La première, appelée extractSessionId recherche dans notre charge utile de Slack la valeur courante 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 seconde fonction newSessioncrée une nouvelle entrée dans notre variable globale SESSIONS globale.

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

Comment créer une commande Slack Slash pour les réponses aux messages ?

Maintenant que notre agent a initialisé la conversation dans notre application, nous voulons connecter Slack à Whatsapp et les laisser répondre à nos clients. Pour ce faire, nous allons créer notre première commande Slack.

Dans le tableau de bord de notre application Slack, ouvrez l'onglet " Slash Commands ". Cliquez ensuite sur "Créer une nouvelle commande".

Créez la commande suivante :

Commande : /réponse

URL de la requête : TUNNEL_URL/slack/message

Description succincte : Répondre aux demandes de renseignements entrantes

Conseil d'utilisation : [session_id]

Et cliquez sur "Enregistrer".

Create a Slack Slash CommandNous devons maintenant mettre à jour notre /slack/message pour gérer les données envoyées par Slack. Nous devons faire deux choses :

1. Saisissez le message et ajoutez-le en tant que commentaire dans le bon fil de discussion dans Slack, avec un peu de formatage.

2. Saisir le message et l'envoyer à la bonne session dans AI Studio

Nous pouvons le faire avec le code suivant :

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

Vous remarquerez que nous nous appuyons sur une dernière fonction appelée parseMessage pour nettoyer nos données depuis Slack. Vous pouvez l'ajouter à la fin de notre fichier :

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

Vous pouvez désormais tester l'envoi de réponses aux messages depuis Slack ! C'est génial de recevoir des réponses du côté de WhatsApp !

Comment envoyer des réponses WhatsApp à Slack

Nous avons donc presque réussi à faire fonctionner notre scénario complet. Mais il nous manque une chose ! Nous devons permettre à notre utilisateur d'envoyer des messages continus dans Slack pour répondre à notre agent humain. Nous pouvons le faire en mettant à jour notre /inbound endpoint.

Ici, nous traitons les données d'AI Studio et en extrayons le message et les session_id. En utilisant les session_id nous pouvons consulter notre thread_ts. Une fois que nous avons le thread_tsnous pouvons envoyer notre message au bon fil de discussion en envoyant une requête POST à Slack.

Vous pouvez mettre à jour votre code comme suit :

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

Comment créer une commande Slack Slash pour mettre fin à une conversation ?

Vous vous dites peut-être : "C'est tout ! J'ai terminé !". Enfin, presque ! Notre nœud Live Agent ne sait pas combien de temps peut durer une conversation entre AI Studio et une autre interface. Pour cela, nous devons laisser AI Studo savoir quand mettre fin à la conversation et quitter le nœud de routage Live Agent. Cela mettra fin à l'intégration de Slack avec WhatsApp pour le client actuel.

Nous allons créer une autre commande slash, de la même manière que nous avons créé /reply. Cette fois, nous allons créer une commande pour /close_ticket. Le ticket de fermeture acceptera à nouveau la commande session_id pour savoir à quelle session mettre fin.

Créez la commande suivante :

Commande : /close_ticket

URL de la requête : TUNNEL_URL/slack/end

Brève description : Le problème du client a été résolu

Conseil d'utilisation : [session_id]

Et cliquez sur "Enregistrer".

Slack Slash Command Details

A l'intérieur de notre /slack/end nous devons gérer la demande de Slack. Nous n'avons besoin de faire que trois choses :

1. Attrapez le session_id en utilisant à nouveau notre fonction parseMessage encore une fois

2. Envoyez une demande au point de terminaison Stop Connection dans AI Studio pour lui demander d'arrêter la conversation pour la bonne raison. session_id

3. Informer l'agent humain dans Slack que la conversation a pris fin en publiant un message dans le bon fil de discussion.

Pour ce faire, mettez à jour votre code /slack/end pour qu'il ressemble à ceci :

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

Conclusion

Et c'est terminé ! Vous avez réussi à mettre en œuvre une intégration transparente de WhatApp à Slack et de Slack à WhatsApp pour le support client à l'aide de la plateforme low-code AI Studio de Vonage. Redémarrez votre serveur Node.js en exécutant node server.js dans votre terminal, et testez le flux complet en envoyant des messages dans les deux sens entre WhatsApp et Slack de votre téléphone. N'est-ce pas extraordinaire ?

Vous pouvez également trouver le code du serveur remanié sur Github avec les instructions d'installation

Pour améliorer encore cette application, envisagez de tirer parti de la robuste API Web de Slack, qui permet une interactivité basée sur les réactions des emoji. En outre, vous pourriez intégrer les agents SMS ou Voice d'AI Studio, offrant ainsi aux clients un canal de communication supplémentaire.

Utilisez-vous d'autres solutions "low-code" ou "no-code" pour l'engagement des clients ? Rejoignez la Communauté des développeurs de Vonage sur Slack ou suivez-nous sur X, anciennement connu sous le nom de Twitter pour partager vos projets passionnants et vos idées !

Ressources complémentaires

• Construire un agent Voice résilient : Un guide pour les systèmes de basculement

• Comment construire une hiérarchie de classification des intentions

• Envoyer des messages WhatsApp depuis Google Sheets avec AI Studio