Integration von Slack und WhatsApp mit Low-Code (Teil 1)

Startups und kleinen Unternehmen fehlen oft die Ressourcen für vollwertige (und teure) Kundensupport-Lösungen. Doch mit AI Studio von Vonage Low-Code-Plattform von Vonage können Sie jedoch eine maßgeschneiderte, kosteneffiziente Lösung für die Kundenbetreuung erstellen, die auf Ihre Bedürfnisse zugeschnitten ist. Eine Option ist die Integration von WhatsApp mit Slack.

Dieses zweiteilige Tutorial zeigt Ihnen, wie Sie WhatsApp und Slack integrieren, um ein leistungsfähiges Kundensupportsystem zu erstellen. In diesem ersten Artikel werden Sie das Projekt einrichten und Ihre erste Verbindung herstellen, um WhatsApp-Nachrichten an Slack zu senden. Im zweiten Teil werden Sie die fortgeschrittene Logik behandeln, damit Ihr Team auf Kundenanfragen direkt von Slack aus antworten kann.

TL;DR: Finden Sie den überarbeiteten Server-Code auf Github um der Einrichtung von AI Studio und Slack zu folgen, ohne sich um die JavaScript-Programmierung kümmern zu müssen.

Preview of Slack-WhatsApp Integration

Integration von WhatsApp mit Slack für den Kundensupport Übersicht

Ursprünglich wollte ich einen ähnlichen Ablauf wie bei dem berühmten Giphy-Schrägstrich-Befehl. Allerdings sind benutzerdefinierte Schrägstrichbefehle in Threads von Slack nicht erlaubt (Giphy ist ein Sonderfall). Die Verwendung eines Slash-Befehls in einer normalen Channel-Antwort verknüpft die Antwort nicht mit einer bestimmten Unterhaltung. Bei gleichzeitigen Unterhaltungen würde dieser Ansatz ein Chaos verursachen! Um Unterhaltungen in Threads zu halten, haben wir den folgenden Workaround implementiert:

1. Im Kundensupport-Kanal erscheint eine neue Nachricht mit der conversation_id einer neuen WhatsApp-Konversation.

2. Ein Teammitglied klickt auf eine Slack-Verknüpfung in der Nachricht, wodurch unsere Anwendung angewiesen wird, diese Unterhaltung mit dem aktuellen Slack-Thread zu verknüpfen.

3. Das Teammitglied verwendet den Schrägstrich-Befehl /reply, gefolgt von der Sitzungsnummer und seiner Antwort.

4. Unsere Anwendung verarbeitet die Antwort, sendet sie an AI Studio und fügt sie als Antwort in den Thread ein.

5. Unsere Anwendung verarbeitet auch Kundenantworten und fügt sie dem richtigen Thread zu.

6. Die Konversation wird fortgesetzt, bis der Agent den Slash-Befehl /close_ticket verwendet, die Sitzung in AI Studio beendet und eine Antwort "Konversation beendet" in den Slack-Thread einfügt.

Mit diesem Ansatz können Sie WhatsApp und Slack für den Kundensupport nahtlos integrieren, so dass Ihr Team Konversationen direkt von Slack aus verwalten kann und dabei die korrekte Strukturierung und den Kontext beibehält.

Voraussetzungen

• Virtuelle Nummer von Vonage

• Slack Account und Erlaubnis zur Installation von Apps in Ihrem Arbeitsbereich

• Knotenpunkt

  Vonage API-Konto

  Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

  

  Sind Sie bereit, mit dem Bau zu beginnen?

  Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Einrichtung

Einrichten einer Node-Anwendung mit Express

1. Erstellen Sie ein neues Verzeichnis für Ihr Projekt und navigieren Sie mit Ihrem Terminal dorthin.

   • mkdir whatsapp-to-slack

   • cd whatsapp-to-slack

2. Initialisieren Sie ein neues Node.js-Projekt:

   • npm init -y

3. Abhängigkeiten installieren

   • npm install express axios body-parser dotenv

4. Erstellen Sie Ihre Projektdateien

   • berühren. server.js .env .gitignore

   • Code.

In der .gitignore müssen wir eine einzelne Zeile hinzufügen, damit Git nicht versehentlich unsere .env-Anmeldedaten weitergibt:

.env

In unserer .env Datei müssen wir unsere sicheren Werte aus Slack und AI Studio hinzufügen. Wir werden diese in den nächsten Schritten ausfüllen. Fügen Sie zunächst hinzu:

// Inside our ENV file 
SLACK_WEBHOOK_URL=""
AI_STUDIO_KEY=""

Fügen Sie in der Datei server.js folgenden Textbaustein hinzu:

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

In unserem Kesselstein tun wir vor allem 4 Dinge:

1. Importieren Sie unsere Abhängigkeiten.

   • Express betreibt unseren Server.

   • Axios ermöglicht es uns, HTTP-Anfragen zu stellen. Mit HTTP-Anfragen können wir Informationen von Slack und AI Studio senden und empfangen.

   • bodyParser hilft uns beim Parsen oder Bereinigen der Daten, die wir von Slack zurückbekommen.

2. Konfigurieren Sie den Server, die Middleware und die Umgebungsvariablen unserer Anwendung

3. Erstellen Sie Endpunkte für jede Funktion unserer Anwendung

4. Starten Sie unseren Server

Wie wir unsere Anwendung über localtunnel zugänglich machen

Für unsere Anwendung müssen Daten mehrmals zwischen AI Studio und Slack ausgetauscht werden. Wir verwenden localtunnel um unseren localhost freizulegen und öffentlich zugängliche Tunnel zu erstellen. Führen Sie in Ihrem Terminal den folgenden Befehl aus: npx localtunnel --port 3000 Dadurch wird eine Tunnel-Url erstellt, die in etwa so aussehen sollte:

➜  whatsapp-to-slack npx localtunnel --port 3000
your url is: https://some-parks-beg.loca.lt

Die URL, die mit https beginnt und mit loca.lt endet, ist Ihre Tunnel-URL. Immer wenn im weiteren Verlauf des Artikels TUNNEL_URL erwähnt wird, sollte dieser Wert verwendet werden.

Öffnen Sie für später eine zweite Registerkarte in Ihrem Terminal.

Wie man eine Slack-App einrichtet

1. Melden Sie sich bei Ihrem Slack-Arbeitsbereich an und öffnen Sie Ihre Applications.

2. Klicken Sie auf "Eine neue App erstellen". Wählen Sie die Option "Von Grund auf neu".

3. Geben Sie Ihrer Anwendung einen Namen und wählen Sie den Arbeitsbereich, in dem Sie sie verwenden möchten.

4. Klicken Sie auf "App erstellen".

Ta-da! Sie haben jetzt Ihre erste Slack-App! Es gibt noch eine letzte Sache, die Sie tun müssen. Du musst Eingehende Webhooks aktivieren. Sobald Sie die eingehenden Webhooks aktiviert haben, scrollen Sie zum Ende der Seite und klicken Sie auf "Add New Webhook to Workspace". Sie werden aufgefordert, den gewünschten Kanal auszuwählen, und klicken dann auf "Zulassen". Sie werden nun zur Seite Eingehende Webhooks" Ihrer App weitergeleitet. Wenn Sie nun ganz nach unten scrollen, sehen Sie eine Webhook-URL für den gewünschten Kanal. Kopieren Sie die URL und fügen Sie sie als Wert für Ihren SLACK_WEBHOOK_URL in Ihrer .env-Datei ein. Sie sollte etwa so aussehen:

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

Wie man einen Inbound WhatsApp Chatbot erstellt

Um Ihren Agenten zu erstellen, folgen Sie den Anweisungen in der AI Studio Dokumentation hier. Es gibt drei wichtige Optionen für unseren Agenten, wählen Sie:

• Typ: WhatsApp

• Vorlage: Von Grund auf neu beginnen

• Veranstaltung: Inbound

Der Ablauf unseres Agenten wird relativ einfach sein. Wenn der Benutzer eine Nachricht an den Agenten sendet, verwenden wir einen Collect Input-Knoten, um zu fragen, wozu er Hilfe benötigt. Die Antwort wird in einem Parameter namens inquiry. Dann verwenden wir eine Bedingung, um zu prüfen, ob inquiry gleich "eskalieren" ist. Ist dies der Fall, wird dem Benutzer eine Nachricht mit dem Inhalt "Bitte warten Sie, während wir Sie mit einem Live-Agenten verbinden" gesendet.

Wenn es sich um eine andere Anfrage handelt, werden wir alle anderen möglichen Abläufe nachahmen, indem wir einfach eine Nachricht "Vielen Dank für die Nutzung unseres Dienstes!" (Knoten Dankeschön senden). Der Please Hold-Knoten wird mit einem Live Agent Routing-Knoten verbunden. Schließlich werden sowohl der Live Agent Routing Node als auch der Send Thank You Node mit einem End Conversation Node verbunden.

AI Studio Flow Overview

So richten Sie einen Live-Agent-Routing-Knoten ein

Der Live Agent Routing Node ist die Art und Weise, wie AI Studio Ihre Whatsapp zu Slack Integration erstellt. Im Live Agent Routing Node müssen wir 3 Dinge tun:

1. Fügen Sie Ihre 'TUNNEL_URL/start' in das Feld Start Connection EP ein

2. Fügen Sie Ihre 'TUNNEL_URL/inbound' in das Feld Inbound Transfer EP ein

3. Wählen Sie inquiry in den Übertragungsparametern

Und klicken Sie auf "Speichern und Beenden".

Live Agent Routing Node

Als Nächstes müssen wir Ihren AI Studio API Schlüssel zu Ihrer .env Datei hinzufügen. Sie finden den X-Vgai-Key oben rechts in Ihrem AI Studio Canvas. Klicken Sie auf das Symbol "Benutzer" und dann auf "API-Schlüssel generieren".

Kopieren Sie den X-Vgai-Key und fügen Sie ihn als Wert für Ihre AI_STUDIO_KEY in Ihrer .env-Datei ein. Sie sollte in etwa so aussehen:

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

Schließlich müssen Sie dem Agenten noch Ihre Vonage-Nummer zuweisen. Befolgen Sie die Anweisungen zur Veröffentlichung aus der Dokumentation.

So initiieren Sie eine Slack-Konversation mit eingehenden Webhooks

Die erste Aktion, die wir durchführen müssen, ist die Verbindung von AI Studio mit Slack. Wir werden den Start Connection Endpoint des Live Agent und die Incoming Webhooks von Slack verwenden. Wir haben diese bereits im Setup konfiguriert, aber jetzt müssen wir die Logik hinzufügen, um sie tatsächlich zu verbinden. Der Start Connection Endpoint unseres Agenten ist so konfiguriert, dass er eine Anfrage an unseren /start Endpunkt zu senden. Dort werden wir 2 Informationen an Slack senden: die SessionId und die Transkription unserer bisherigen Konversation. Wir verpacken diese Informationen in ein Datenobjekt, das den Erwartungen von Slack entspricht und ein wenig formatiert ist. Wir verwenden die axios-Bibliothek, um alle unsere POST-Anfragen zu senden. So sieht unser /start Endpunkt jetzt so aus:

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

Sie werden feststellen, dass wir die Funktion handleTranscription. Diese Funktion formatiert unsere Rohtranskription in etwas Nettes für Slack. Sie können dies am Ende unserer Datei hinzufügen.

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

So testen Sie Ihre WhatsApp-zu-Slack-Verbindung

Sie können nun testen, ob Ihr Agent mit Ihrem Slack-Kanal verbunden ist! Führen Sie auf der zweiten Registerkarte des Terminals Ihre Anwendung aus:

node server.js

Ist deine Transkription in Slack erschienen? Wie cool! Da wir noch keine Möglichkeit zum Beenden von Unterhaltungen in AI Studio implementiert haben, müssen Sie bei jedem Test die Unterhaltung manuell beenden. Sie können dies tun, indem Sie eine POST-Anfrage an die Verbindung beenden EP mit einem Tool wie Postman senden. Sie finden Ihre aktiven Sitzungen unter der Registerkarte Registerkarte Berichte.

End Conversation with Postman

Außerdem müssen Sie jedes Mal, wenn Sie eine neue Änderung in Ihrer Node-Anwendung testen möchten, den Server neu starten.

Schlussfolgerung

Das war's mit dem ersten Teil! Unter Integration von Slack und WhatsApp mit Low-Code (Teil 2)vervollständigen Sie die Funktionalität unseres Kundensupport-Flows. Sie werden lernen, wie Sie Slack Messages Shortcuts erstellen, wie Sie Slack Slash Commands erstellen und wie Sie eine vollständige Back-and-Forward-Konversation zwischen WhatsApp und Slack erstellen können.

Wenn Sie Probleme mit diesem Tutorial haben oder Fragen stellen möchten, sollten Sie sich in der Vonage Entwickler-Community Slack. Sie können uns auch auf X, früher bekannt als Twitter um über die neuesten Nachrichten für Vonage-Entwickler auf dem Laufenden zu bleiben!

Zusätzliche Ressourcen

• Aufbau eines ausfallsicheren Voice-Agenten: Ein Leitfaden für Failover-Systeme

• Aufbau einer Hierarchie zur Klassifizierung von Absichten

• Integration von Slack und SMS über Low-Code AI Studio