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

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 können, um ein leistungsfähiges Kundensupportsystem zu schaffen. Unter Integration von Slack und WhatsApp mit Low-Code (Teil 1), haben Sie gesehen, wie Sie das Projekt einrichten und Ihre erste Verbindung herstellen, um WhatsApp-Nachrichten an Slack zu senden. In diesem 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

Wie man eine Slack-Nachrichtenverknüpfung erstellt

Im ersten Teil haben wir unser Projekt eingerichtet und die Konversation in Slack gestartet. Jetzt könnte man meinen, der nächste Schritt wäre, unsere Slack-Kollegen antworten zu lassen, richtig? Nun, wir müssen zuerst das Problem lösen, unseren Slack-Thread irgendwie mit unserer AI Studio-Konversation zu verknüpfen, damit wir wissen, wie wir unsere Nachrichten hin und her organisieren können! Dazu erstellen wir eine Slack-Nachrichten-Verknüpfung. Diese Nachrichtenverknüpfung verlangt von unserem Agenten, ein Ticket zu öffnen", indem er einfach auf eine Schaltfläche in der neuen Konversation klickt. Dies sendet eine Anfrage an unsere Anwendung, in der wir die Informationen zum Konversations-Thread in einem neuen Objekt in Bezug auf die conversation_id.

Interaktivität der Slack-App aktivieren

Um Verknüpfungen erstellen zu können, müssen Sie die Interaktivität in Ihrer Slack-App aktivieren. Wie Sie das tun, sehen Sie unten. Für die Anfrage-URL fügen Sie Ihre TUNNEL_URL ein, gefolgt von /slack/start. Dies wird der Endpunkt in unserer Anwendung sein, an den Slack eine Anfrage sendet, wenn die Verknüpfung ausgelöst wird.

Enable Slack InteractivityKlicken Sie dann auf "Neue Verknüpfung erstellen" und geben Sie sie ein:

Wo soll diese Verknüpfung erscheinen? In Nachrichten.

Name: Ein Ticket starten

Kurze Beschreibung: Erzeugt eine Konversation für eine Kundenanfrage

Rückruf-ID: begin_response

Verknüpfung von Sitzungen mit Slack-Threads

Jetzt werden wir unsere Anwendung aktualisieren, um die Informationen, die wir von Slack erhalten, zu nutzen und sie mit unseren AI Studio-Sitzungen zu verknüpfen. Zuerst erstellen wir ein globales Objekt namens SESSIONS. Sie können dieses direkt über unseren Endpunkten hinzufügen:

const SESSIONS = {};

Innerhalb unserer Endpunkte werden wir 4 Dinge tun:

1. Verarbeiten Sie die Antwort, die wir von Slack erhalten, und extrahieren Sie thread_ts (Zeitstempel) und session_id

2. Erstellen eines neuen Eintrags in SESSIONS für die aktuelle Sitzung/den aktuellen Thread

3. Bereiten Sie die Daten vor, die an Slack gesendet werden sollen. Dazu gehört auch die Formatierung unserer Initialisierungsnachricht für unseren Slack-Thread.

4. Senden unserer Anfrage an Slack, um die Initialisierungsnachricht im richtigen Thread zu posten

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

In unserem Endpunkt stützen wir uns auf zwei neue Funktionen. Sie können diese am Ende Ihrer Datei zusammen mit den anderen Funktionen hinzufügen. Die erste namens extractSessionId sucht in unserer Nutzlast von Slack nach dem aktuellen 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;
};

Die zweite Funktion newSessionerzeugt einen neuen Eintrag in unserer globalen SESSIONS Variable.

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

Wie man einen Slack Slash-Befehl für Nachrichtenantworten erstellt

Nun, da unser Agent die Konversation in unserer Anwendung initialisiert hat, wollen wir Slack mit Whatsapp verbinden und sie auf unsere Kunden antworten lassen. Dazu erstellen wir unseren ersten Slash-Befehl.

Öffnen Sie im Dashboard unserer Slack-Anwendung die Registerkarte "Slash Commands". Klicken Sie dann auf "Neuen Befehl erstellen".

Erstellen Sie den folgenden Befehl:

Befehl: /Antwort

URL anfordern: TUNNEL_URL/slack/message

Kurzbeschreibung: Beantworten Sie eingehende Anfragen

Hinweis zur Verwendung: [session_id]

Und klicken Sie auf "Speichern".

Create a Slack Slash CommandJetzt müssen wir unseren /slack/message Endpunkt aktualisieren, um die von Slack gesendeten Daten zu verarbeiten. Wir müssen zwei Dinge tun:

1. Erfassen Sie die Nachricht und fügen Sie sie als Kommentar in den richtigen Thread in Slack ein, zusammen mit einigen Formatierungen

2. Erfassen Sie die Nachricht und senden Sie sie an die richtige Sitzung in AI Studio

Wir können dies mit dem folgenden Code tun:

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

Sie werden feststellen, dass wir auf eine letzte Funktion namens parseMessage angewiesen sind, um unsere Daten aus Slack zu bereinigen. Sie können sie am Ende unserer Datei hinzufügen:

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

Sie können jetzt testen, ob Sie Antworten auf Nachrichten von Slack aus senden können! Wie cool ist es, sie auf der WhatsApp-Seite zu empfangen?!

Wie man WhatsApp-Antworten an Slack sendet

Wir haben jetzt also fast unser komplettes Szenario zum Laufen gebracht. Aber eine Sache fehlt uns noch! Wir müssen unserem Benutzer erlauben, fortlaufend Nachrichten an Slack zu senden, um unserem menschlichen Agenten zu antworten. Wir können dies tun, indem wir unseren /inbound Endpunkts.

Hier verarbeiten wir die Daten aus AI Studio und ziehen die Nachricht und session_id. Mit Hilfe der session_id können wir unsere thread_ts. Sobald wir die thread_tshaben, können wir unsere Nachricht an den richtigen Thread mit einer POST-Anfrage an Slack senden.

Sie können Ihren Code wie folgt aktualisieren:

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

So erstellen Sie einen Slack Slash-Befehl zum Beenden einer Konversation

Sie denken vielleicht: "Das war's! Ich bin fertig!". Nun, fast! Unser Live Agent Node weiß nicht, wie lange ein Gespräch zwischen AI Studio und einer anderen Schnittstelle dauern kann. Deshalb müssen wir AI Studo wissen lassen, wann es die Konversation beenden und den Live Agent Routing Node verlassen soll. Dadurch wird die Slack-Integration mit WhatsApp für den aktuellen Kunden beendet.

Wir werden einen weiteren Slash-Befehl erstellen, ähnlich wie bei der Erstellung von /reply. Diesmal erstellen wir einen Befehl für /close_ticket. Das Ticket schließen wird wieder das session_id um zu wissen, welche Sitzung beendet werden soll.

Erstellen Sie den folgenden Befehl:

Befehl: /close_ticket

URL anfordern: TUNNEL_URL/slack/end

Kurze Beschreibung: Kundenproblem wurde behoben

Hinweis zur Verwendung: [session_id]

Und klicken Sie auf "Speichern".

Slack Slash Command Details

Innerhalb unseres /slack/end Endpunkts müssen wir die Anfrage von Slack bearbeiten. Wir müssen eigentlich nur drei Dinge tun:

1. Ergreifen Sie die session_id mit Hilfe unserer parseMessage Funktion wieder

2. Senden Sie eine Anfrage an den Endpunkt "Stop Connection" in AI Studio, um die Konversation für die richtige session_id

3. Aktualisieren Sie den menschlichen Agenten in Slack, dass die Unterhaltung beendet wurde, indem Sie eine Nachricht im richtigen Thread posten

Aktualisieren Sie dazu Ihren /slack/end Code so, dass er wie folgt aussieht:

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

Schlussfolgerung

Und das war's schon! Sie haben erfolgreich eine nahtlose WhatApp-zu-Slack- und Slack-zu-WhatsApp-Integration für den Kundensupport mithilfe der AI Studio Low-Code-Plattform von Vonage implementiert. Starten Sie Ihren Node.js-Server neu, indem Sie node server.js in Ihrem Terminal ausführen, und testen Sie den kompletten Ablauf, indem Sie Nachrichten zwischen WhatsApp und Slack auf Ihrem Telefon hin und her senden. Ist das nicht erstaunlich?

Alternativ können Sie den überarbeiteten Servercode auch auf Github mit Installationsanweisungen

Um diese Anwendung weiter zu verbessern, sollten Sie die robuste Web-API von Slack nutzen, die Interaktivität auf Basis von Emoji-Reaktionen ermöglicht. Außerdem könnten Sie die SMS- oder Voice-Agenten von AI Studio einbinden, um Kunden einen zusätzlichen Kommunikationskanal zu bieten.

Verwenden Sie andere Low-Code- oder No-Code-Lösungen zur Kundenbindung? Werden Sie Mitglied der Vonage Entwickler-Community Slack oder folgen Sie uns auf X, früher bekannt als Twitter um Ihre spannenden Projekte und Erkenntnisse zu teilen!

Zusätzliche Ressourcen

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

• Aufbau einer Hierarchie zur Klassifizierung von Absichten

• Senden von WhatsApp-Nachrichten aus Google Sheets mit AI Studio