Intégrer Slack et SMS via Low-Code AI Studio

Introduction

Les petites et moyennes entreprises manquent souvent de ressources pour des solutions de soutien à la clientèle complètes (et coûteuses). Cependant, avec la plateforme low-code AI Studio de Vonage, vous pouvez créer une solution d'expérience client personnalisée et rentable, adaptée à vos besoins.

Ce tutoriel vous montrera comment intégrer SMS et Slack pour créer un puissant système de support client. En connectant les SMS à Slack et Slack aux SMS, vous pouvez permettre à votre équipe de répondre aux demandes des clients directement depuis Slack.

En utilisant votre personnel existant, vous pouvez vous connecter avec les clients par SMS, Voice (téléphone) ou WhatsApp et répondre directement depuis Slack. Le plus intéressant ? Vous n'êtes facturé que pour ce que vous utilisez ! Cette solution puissante est particulièrement avantageuse pour les startups qui utilisent déjà Slack pour les communications d'équipe.

Découvrez comment connecter SMS et Slack pour un basculement du support client en direct. Si vos clients ne reçoivent pas de réponse satisfaisante de la part de l'agent virtuel, la conversation sera transférée de manière transparente sur Slack, où n'importe quel membre de l'équipe pourra les aider !

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

Intégrer les SMS à Slack pour l'assistance à la clientèle Vue d'ensemble

Au départ, j'ai cherché à obtenir un flux similaire à la célèbre commande "slash" de commande slash de Giphy pour cette intégration de SMS à Slack. Cependant, les commandes slash personnalisées ne sont pas autorisées dans les fils de discussion par Slack (Giphy est un cas particulier). L'utilisation d'une commande slash dans une réponse de canal ordinaire n'associe pas la réponse à une conversation spécifique. Avec des conversations simultanées, cette approche créerait un véritable désordre ! Pour que les conversations restent liées à un fil de discussion, nous avons mis en place la solution de contournement suivante :

1. Un nouveau message s'affiche dans le canal d'assistance à la clientèle avec le numéro de téléphone d'une nouvelle conversation SMS. conversation_id d'une nouvelle conversation SMS.

2. Un membre de l'équipe clique sur un raccourci Slack sur le message, ce qui indique à notre application de lier cette conversation au fil Slack actuel.

3. Le membre de l'équipe utilise la commande /reply suivie de la commande session_id et de sa réponse.

4. Notre application traite la réponse, l'envoie à AI Studio et l'ajoute en tant que réponse dans le fil de discussion.

5. Notre application traite également les réponses des clients et les ajoute au bon fil de discussion.

6. La conversation se poursuit jusqu'à ce que l'agent utilise la commande /close_ticket ce qui met fin à la session dans AI Studio et ajoute une réponse "conversation résolue" dans le fil de discussion Slack.

En suivant cette approche, vous pouvez intégrer de manière transparente les SMS et Slack pour le support client, ce qui permet à votre équipe de gérer les conversations directement depuis Slack tout en maintenant un fil de discussion et un contexte appropriés.

Conditions préalables

• Numéro virtuel Vonage

• Compte Slack et autorisation d'installer des apps dans votre espace de travail.

• Nœud

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.

Mise en place

Comment mettre en place une application Node avec Express

1. Créez un nouveau répertoire pour votre projet et naviguez-y à l'aide de votre terminal.

mkdir sms-to-slack
cd sms-to-slack

2. Initialiser un nouveau projet Node.js et installer les dépendances

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

3. Créer vos fichiers de projet

touch server.js .env .gitignore 

4. Ouvrez le projet dans l'éditeur de code de votre choix.

Dans le fichier .gitignore, nous devons ajouter une ligne pour que git ne partage pas accidentellement nos informations d'identification .env :

.env

Dans notre fichier .env, nous devrons ajouter nos valeurs sécurisées à la fois de Slack et d'AI Studio. Nous les remplirons dans les prochaines étapes. Pour l'instant, ajoutez :

SLACK_WEBHOOK_URL=""
AI_STUDIO_KEY=""

Dans le fichier server.js ajoutez le modèle suivant :

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

Dans notre modèle, nous faisons quatre choses principales :

1. Importer nos dépendances.

• Express gère notre serveur.

• Axios nous permet de faire des requêtes HTTP. Les requêtes HTTP nous permettent de transmettre des informations entre Slack et AI Studio.

• bodyParser nous aide à analyser ou à nettoyer les données que nous recevons de Slack.

2. Configurer le serveur de notre application, le middleware et les variables env.

3. Créer des points de terminaison pour chacune des fonctionnalités de notre application.

4. Démarrez notre serveur.

Comment exposer notre application à travers localtunnel

Notre application nécessite de faire transiter des données à plusieurs reprises entre AI Studio et Slack. Nous utiliserons localtunnel pour exposer notre localhost et créer des tunnels accessibles au public. Dans votre terminal, exécutez la commande suivante :

npx localtunnel --port 3000

Cela créera une URL de tunnel qui devrait ressembler à ceci :

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

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

L'url qui commence par https et se termine par loca.lt est l'url de votre tunnel. Dans le reste de l'article, chaque fois que l'on parle de TUNNEL_URL est mentionné, cette valeur doit être utilisée.

Ouvrez un deuxième onglet dans votre terminal pour plus tard.

Comment configurer une application Slack

1. Connectez-vous à votre espace de travail Slack et ouvrez vos Applications.

2. Cliquez sur "Créer une nouvelle application". Sélectionnez l'option "From Scratch".

3. Donnez un nom à votre application et sélectionnez l'espace de travail dans lequel vous souhaitez l'utiliser.

4. Cliquez sur "Créer une application".

Ta-da ! Vous avez maintenant votre première application Slack ! Il vous reste une dernière chose à faire. Vous devez activer les Webhooks entrants. Une fois que vous avez activé les webhooks entrants, faites défiler la page jusqu'en bas et cliquez sur "Add New Webhook to Workspace" (Ajouter un nouveau webhook à l'espace de travail). Il vous sera demandé de sélectionner le canal souhaité et de cliquer sur "autoriser". Vous serez alors redirigé vers la page Incoming Webhooks de votre application, sauf que si vous faites défiler la page jusqu'en bas, vous verrez l'URL du Webhook pour le canal souhaité.

Copiez l'URL et ajoutez-la comme valeur pour votre SLACK_WEBHOOK_URL dans votre fichier .env. Il devrait ressembler à ceci :

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

Comment créer un chatbot SMS entrant ?

Pour créer votre agent, suivez les instructions figurant dans la documentation d'AI Studio ici. Il y a trois options importantes pour notre agent, sélectionnez :

• Type: SMS

• Modèle: Partir de zéro

• Événement: Inbound

Le flux de notre agent sera relativement simple.

1. Lorsque l'utilisateur envoie un message à l'agent, nous utilisons un nœud nœud de collecte d'informations pour lui demander ce pour quoi il a besoin d'aide. La réponse sera stockée dans un paramètre appelé "inquiry".

2. Nous utiliserons ensuite un nœud conditionnel pour vérifier si inquiry est égal à "escalade".

3. Si c'est le cas, nous enverrons à l'utilisateur un message disant "Veuillez patienter pendant que nous vous mettons en relation avec un agent en direct". S'il s'agit d'une autre demande, nous imiterons tous les autres flux possibles en envoyant simplement un message "Merci d'avoir utilisé notre service !" (nœud de remerciement).

4. Le nœud "Please Hold" se connectera à un nœud de routage "Live Agent". nœud de routage d'agent en direct.

5. Enfin, le Nœud d'acheminement des agents en direct et nœud d'envoi de remerciements se connecteront à un nœud de nœud de fin de conversation.

Overview of AI Studio SMS Agent

Comment configurer un nœud de routage pour les agents en direct ?

Dans le nœud de routage de l'agent en direct, nous devons faire trois choses :

1. Ajoutez votre ‘TUNNEL_URL/start’ dans le champ Start Connection EP

2. Ajoutez votre ‘TUNNEL_URL/inbound’ dans le champ Transfert entrant EP

3. Sélectionner l'enquête dans les paramètres de transfert

Puis cliquez sur "Enregistrer et quitter".

Example of Live Agent Routing Node in AI Studio

Ensuite, ajoutez votre clé API AI Studio à votre fichier .env. Vous trouverez la clé X-Vgai en haut à droite de votre AI Studio. Cliquez sur l'icône "user", puis sur "Generate API Key".

Copiez la clé X-Vgai-Key et ajoutez-la comme valeur pour votre AI_STUDIO_KEY dans votre fichier .env. Cela devrait ressembler à ceci :

AI_STUDIO_KEY="YOUR_KEY_VALUE"

Enfin, vous devrez attribuer votre numéro Vonage à l'agent. Suivez les instructions de publication de la documentation.

Comment initier une conversation Slack à l'aide de Webhooks entrants

La première action que nous devons créer consiste à connecter AI Studio à Slack. Nous utiliserons le point final de connexion de démarrage de Live Agent et les Webhooks entrants de Slack. Nous les avons déjà configurés dans l'installation, mais nous devons maintenant ajouter la logique nécessaire pour les connecter.

Le point de terminaison Start Connection de notre agent est configuré pour envoyer une demande à notre point de terminaison. /start point de terminaison. Nous y enverrons deux informations à Slack : l'identifiant de la session et la transcription de notre conversation jusqu'à présent. Nous allons regrouper ces informations dans l'objet de données en fonction de ce que Slack attend, avec un peu de formatage. Nous utiliserons la bibliothèque axios pour envoyer toutes nos requêtes POST.

Voici à quoi ressemble maintenant notre /start a maintenant l'air :

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

Vous remarquerez que nous appelons la fonction handleTranscription. Cette fonction formate notre transcription brute en quelque chose d'agréable pour Slack. Vous pouvez l'ajouter à la fin de notre fichier.

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

Comment tester votre connexion SMS vers Slack

Vous pouvez maintenant tester que votre agent est connecté à votre canal Slack ! Dans le deuxième onglet du terminal que vous avez ouvert précédemment, lancez votre application :

node server.js

Votre transcription est-elle apparue dans Slack ? C'est génial !

Comme nous n'avons pas encore mis en œuvre un moyen de mettre fin aux conversations dans AI Studio, vous devrez, à chaque test, mettre fin manuellement à la conversation. Vous pouvez le faire en envoyant une requête POST à l'EP Stop Connection EP avec un outil comme Postman. Vous pouvez trouver vos sessions actives sous l'onglet onglet Rapports.

En outre, chaque fois que vous souhaitez tester une nouvelle modification dans votre application node, vous devrez redémarrer le serveur.

Comment créer un raccourci pour un message Slack

Maintenant que nous avons lancé notre conversation dans Slack, vous pourriez penser 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 d'une manière ou d'une autre 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 procéder ci-dessous. Pour l'URL de la 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 interactivity in your Slack App

Cliquez ensuite sur "Créer un nouveau raccourci" et remplissez-le :

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

Create Slack Shortcut

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 (horodatage) 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 s'appelle extractSessionId qui recherche dans notre payload de Slack la valeur actuelle de 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 lui permettre de répondre réellement à nos clients. Pour ce faire, nous allons créer notre première commande slash.

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 :

Commandement : répondre URL de la demande : TUNNEL_URL/slack/message Courte description : Répondre aux demandes de renseignements entrantes Conseil d'utilisation : [session_id]

Et cliquez sur "Enregistrer".

Create Slack Slash Command

Nous 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 de 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 maintenant tester l'envoi de réponses aux messages depuis Slack ! C'est cool de le recevoir du côté SMS !

Comment envoyer des réponses par SMS à Slack ?

Nous avons donc presque réussi à faire fonctionner notre scénario complet. Mais il nous manque une chose ! Nous devons permettre à nos utilisateurs d'envoyer des messages continus dans Slack pour répondre à nos agents humains. 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) => {
  // 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');
});

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 indiquer à AI Studio quand mettre fin à la conversation et quitter le nœud de routage de l'agent en direct.

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 Close acceptera à nouveau l'identifiant de session 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".

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

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 SMS à Slack et de Slack à SMS 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 les SMS de votre téléphone et Slack. N'est-ce pas extraordinaire ?

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 WhatsApp 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 !

L'intégration des SMS et de Slack pour le support client n'est qu'un exemple de la façon dont les plateformes low-code comme AI Studio peuvent rationaliser les processus métier et améliorer l'expérience client. Explorez d'autres possibilités et tenez-vous au courant des derniers développements dans les espaces "low-code" et "no-code".

Ressources complémentaires

• Stimuler le ROI du Chatbot : Déviation des demandes des agents humains

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

• Comment construire une hiérarchie de classification des intentions

• La nouvelle frontière des opportunités de freelance : Les agents conversationnels de l'IA