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

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 ce premier article, vous configurerez le projet et établirez votre première connexion pour envoyer des messages WhatsApp à Slack. Dans la 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

Intégrer WhatsApp à 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. 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 apparaît dans le canal d'assistance clientèle avec l'identifiant de conversation d'une nouvelle conversation WhatsApp.

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 slash suivie de l'identifiant de session 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 slash /close_ticket, ce qui met fin à la session dans AI Studio et ajoute une réponse " conversation résolue " dans le fil Slack.

En suivant cette approche, vous pouvez intégrer de manière transparente WhatsApp et Slack pour le support client, ce qui permet à votre équipe de gérer les conversations directement à partir de 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 accédez-y à l'aide de votre terminal.

   • mkdir whatsapp-to-slack

   • cd whatsapp-to-slack

2. Initialiser un nouveau projet Node.js :

   • npm init -y

3. Installer les dépendances

   • npm install express axios body-parser dotenv

4. Créez vos fichiers de projet

   • toucher server.js .env .gitignore

   • code .

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 :

// Inside our ENV file 
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 })

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

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 sont ce qui nous permet d'envoyer et de recevoir des informations de Slack & 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émarrer 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 :

➜  whatsapp-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 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é, puis 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 une URL de Webhook pour le canal souhaité. Copiez l'URL et ajoutez-la comme valeur pour votre SLACK_WEBHOOK_URL dans votre fichier .env. Cela devrait ressembler à ceci :

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

Comment créer un chatbot WhatsApp 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 : WhatsApp

• Modèle : Partir de zéro

• Événement : Inbound

Le flux de notre agent sera relativement simple. Lorsque l'utilisateur enverra un message à l'agent, nous utiliserons un nœud Collect Input pour lui demander ce pour quoi il a besoin d'aide. La réponse sera stockée dans un paramètre appelé inquiry. Ensuite, nous utiliserons une condition pour vérifier si inquiry est égal à "escalade". Si c'est le cas, nous enverrons à l'utilisateur un message disant "Veuillez patienter pendant que nous vous connectons à 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 Send Thank You). Le nœud Please Hold se connectera à un nœud d'acheminement d'agent en direct. Enfin, le nœud d'acheminement de l'agent en direct et le nœud d'envoi de remerciements se connecteront tous deux à un nœud de fin de conversation.

AI Studio Flow Overview

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

Le nœud de routage de l'agent en direct permet à AI Studio de créer votre intégration de Whatsapp à Slack. 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 Inbound Transfer EP

3. Sélectionnez inquiry dans les paramètres de transfert

Puis cliquez sur "Enregistrer et quitter".

Live Agent Routing Node

Ensuite, nous devons ajouter la clé API d'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. Il devrait ressembler à ceci :

SLACK_WEBHOOK_URL="https://hooks.slack.com/services/..."
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 mesure que nous devons prendre consiste à connecter AI Studio à Slack. Nous utiliserons le point final de connexion de démarrage de l'agent Live 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 requête à notre point de terminaison /start point de terminaison. Là, nous 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 notre point d'arrivée /start ressemble maintenant à notre point de terminaison :

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 la connexion entre WhatsApp et Slack

Vous pouvez maintenant tester que votre agent est connecté à votre canal Slack ! Dans votre deuxième onglet de terminal, 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.

End Conversation with Postman

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

Conclusion

C'est tout pour la première partie ! En Intégrer Slack et WhatsApp avec Low-Code (Partie 2)vous compléterez la fonctionnalité de notre flux d'assistance à la clientèle. Vous apprendrez à créer des raccourcis pour les messages Slack, à créer des commandes Slack Slash et à établir une conversation en va-et-vient entre WhatsApp et Slack.

Si vous avez des problèmes avec ce tutoriel ou si vous avez des questions, n'oubliez pas de vous joindre à la communauté Slack des développeurs de Vonage. Communauté des développeurs de Vonage sur Slack. Vous pouvez également nous suivre sur X, anciennement connu sous le nom de Twitter pour rester au courant des dernières nouvelles pour les développeurs de Vonage !

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

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