https://a.storyblok.com/f/270183/1368x665/45979cb5de/integrate-slack-whatsapp_pt2_1368.png

Benjamin Aronovデベロッパー・アドボケイト

Benjamin AronovはVonageの開発者支援者です。彼はRuby on Railsのバックグラウンドを持つ実績のあるコミュニティ・ビルダーです。Benjaminは故郷であるテルアビブのビーチを楽しんでいる。テルアビブを拠点に、世界最高のスタートアップの創設者たちと出会い、学ぶことができる。技術以外では、完璧なパン・オ・ショコラを求めて世界中を旅するのが好き。

SlackとWhatsAppをローコードで統合する（後編）

最終更新日 July 11, 2024

#ai-studio

#slack

#whatsapp

所要時間：1 分

新興企業や中小企業では、本格的な（そして高価な）カスタマーサポート・ソリューションを提供するためのリソースが不足していることが多い。しかし VonageのAI Studioのローコードプラットフォームを使えば、ニーズに合わせたカスタムで費用対効果の高いカスタマーエクスペリエンスソリューションを構築できます。一つの選択肢として、WhatsAppとSlackの統合を構築することができます。

このチュートリアルではWhatsAppとSlackを統合し、強力なカスタマーサポートシステムを構築する方法を2回に分けてご紹介します。そのローコードでSlackとWhatsAppを統合する(前編),ではプロジェクトのセットアップ方法と、WhatsAppメッセージをSlackに送信する最初の接続方法について説明しました。この後編ではより高度なロジックを扱い、Slackから直接顧客からの問い合わせに対応できるようにします。

TL;DR：リファクタリングされたサーバーコードををGithubにあるリファクタリングされたサーバーコードを見つけてください。

Preview of Slack-WhatsApp Integration

Slackメッセージのショートカットを作成する方法

前編では、プロジェクトをセットアップし、Slackで会話を開始しました。さて、次のステップはSlackのチームメイトに返信させることだと思うかもしれません。まず、SlackのスレッドとAI Studioの会話をリンクさせ、前後のメッセージをどのように整理するかという問題を解決する必要があります！そのために Slackメッセージのショートカット.このメッセージショートカットは、エージェントが新しい会話のボタンをクリックして "チケットを開く "ことを要求します。これは、私たちのアプリケーションにリクエストを送信します。 conversation_id.

Slackアプリのインタラクティブ性を有効にする方法

ショートカットを作成するには、Slackアプリでインタラクティブ機能を有効にする必要があります。以下にその方法を示します。リクエストURLには、TUNNEL_URLの後に /slack/start.これがアプリケーションのエンドポイントとなり、ショートカットがトリガーされるたびにSlackがリクエストを送信します。

Enable Slack Interactivity次に「新しいショートカットを作成」をクリックし、必要事項を記入する：

このショートカットはどこに表示されますか？メッセージ

名前チケットを開始する

簡単な説明顧客からの問い合わせに対して会話を作成する

コールバックID：begin_response

セッションとSlackスレッドをリンクする方法

それでは、Slackから戻ってきた情報を使用し、AI Studioセッションにリンクするようにアプリケーションを更新します。まず、グローバルオブジェクトとして SESSIONS.これをエンドポイントのすぐ上に追加します：

const SESSIONS = {};

エンドポイントの内部で4つのことを行う：

Slackから受け取ったレスポンスを処理し、thread_ts（タイムスタンプ）とsession_idを抽出する。
SESSIONSに現在のセッション／スレッドの新しいエントリーを作成する。
Slackに送信するデータを準備する。これには、Slackスレッド用の初期化メッセージのフォーマットも含まれる。
初期化メッセージを正しいスレッドに投稿するようSlackにリクエストを送る

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

このエンドポイントでは、2つの新しい関数に依存しています。他の関数と一緒にファイルの一番下に追加してください。最初の extractSessionIdはSlackからのペイロードを検索し、現在の 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;
};

番目の関数 newSessionは、グローバル変数 SESSIONS変数に新しいエントリを作成します。

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

メッセージ返信用のSlackスラッシュコマンドの作成方法

エージェントがアプリケーションの会話を初期化したので、SlackをWhatsappに接続し、顧客に対応させたいと思います。最初のスラッシュコマンドを作りましょう。

Slackアプリケーションのダッシュボードで「Slash Commands」タブを開きます。そして "Create New Command "をクリックします。

以下のコマンドを作成する：

コマンド/返信

リクエストURLTUNNEL_URL/slack/message

簡単な説明お問い合わせへの返信

使い方のヒント[セッションID］

そして「保存」をクリックする。

Create a Slack Slash Commandここで /slack/message エンドポイントを更新する必要があります。2つのことを行う必要がある：

メッセージを取得し、Slackの適切なスレッドにコメントとして追加する。
AI Studioでメッセージを取得し、正しいセッションに送信します。

それは次のコードでできる：

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

Slackからデータをクリーンアップするために、最後にparseMessageという関数に頼っていることに気づくだろう。この関数をファイルの最後に追加してください：

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

Slackからメッセージ返信の送信テストが可能に！WhatsApp側で受信できたらどんなにクールでしょうか？

WhatsAppの返信をSlackに送る方法

これでシナリオはほぼ完成した。しかし、一つ足りないものがある！ユーザがSlackに継続的にメッセージを送信し、人間のエージェントに返信できるようにする必要があります。これは /inboundエンドポイントを更新します。

ここでは、AI Studioからデータを扱い、メッセージと session_id.を使用します。 session_idを使うことで thread_ts.を手に入れたら thread_tsを手に入れたら、SlackへのPOSTリクエストで正しいスレッドにメッセージを送ることができる。

コードを次のように更新してください：

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

Slackのスラッシュコマンドで会話を終わらせる方法

と思うかもしれない！と思うかもしれない。まあ、ほとんどですが！私たちのLive Agent NodeはAI Studioと他のインターフェースの間で行ったり来たりする会話がどのくらい続くかわかりません。そのため、会話を終了してLive Agent Routingノードを終了するタイミングをAI Studoに知らせる必要があります。これで現在の顧客に対するWhatsAppとSlackの統合が終了します。

スラッシュ・コマンドをもうひとつ作成する。 /reply.今回は /close_ticket.Closeチケットは再び session_idを受け取ります。

以下のコマンドを作成する：

コマンド/close_ticket

リクエストURLTUNNEL_URL/slack/end

簡単な説明お客様の問題は解決されました

使い方のヒント[セッションID］

そして「保存」をクリックする。

Slack Slash Command Details

私たちの /slack/endエンドポイントの内部で、Slack からのリクエストを処理する必要があります。本当に必要なことは3つだけだ：

をつかむ session_idを取得します。 parseMessage関数を使用して
AI StudioのStop Connectionエンドポイントにリクエストを送信し、正しい会話の停止を指示する。 session_id
正しいスレッドにメッセージを投稿することで、会話が終了したことをSlackの人間のエージェントに報告する。

そのためには /slack/endコードを次のように更新する：

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

結論

これで完了です！VonageのAI Studioローコードプラットフォームを使い、カスタマーサポートのためのWhatsAppからSlack、SlackからWhatsAppへのシームレスな統合が完了しました。ターミナルでnode server.jsを実行してNode.jsサーバーを再起動し、携帯電話のWhatsAppとSlack間でメッセージをやり取りして完全なフローをテストしてください。すごいでしょ？

あるいは、リファクタリングしたサーバー・コードををGithubにあります。

このアプリケーションをさらに強化するには、Slackの堅牢なWeb APIを活用することを検討してください。さらに、AI StudioのSMSやVoiceエージェントを組み込むことで、顧客に新たなコミュニケーションチャネルを提供することができます。

顧客エンゲージメントに他のローコード・ソリューションやノーコード・ソリューションを使用していますか？参加する Vonage開発者コミュニティSlackに参加するか X（旧 Twitterに参加して、エキサイティングなプロジェクトや洞察を共有してください！

その他のリソース