有人エージェントにバトンタッチしてみる！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d4328672-4309-1f01-e2a0-269adbec7e78.png)

お客様からの問い合わせだけでなく、社内からの問い合わせについても、バーチャル・アシスタントで答えられるように構成すれば、問い合わせ業務の自動化が可能になり、ワークロード削減が期待できます。
特に、FAQ や典型的な問合せ、定型的な処理で対応できる問合せは、比較的、バーチャル・アシスタントに対応させることは容易でしょう。

一方、バーチャル・アシスタントがまだ答えられない質問、込み入った内容の質問、人間による確認や判断が前提となる質問となると、バーチャル・アシスタントでの対応は困難で、人間での対応が必要になります。

人間 (有人エージェント) での対応が必要な場合、新たに、バーチャル・アシスタントとは別の窓口を用意しなければいけないのでしょうか。顧客体験やお客様満足度の向上を目指してバーチャル・アシスタントを立ち上げたはずが、いつの間にか、「窓口のたらい回しになった」、とあれば、それは不本意な結果と言えます。

すぐに思いつく、シンプルな解は、バーチャルアシスタントと有人エージェントとのシームレスな連携ですが、特別な仕掛けが必要でしょうか。
実は、Watson Assistant は、有人エージェントとの連携機能を持っています。

# バーチャル・アシスタントと有人エージェントをシームレスにつなぐ

Watson Assistant は、さまざまなサービス・デスク・ツールをサポートしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/b2f81ba0-a796-0d9a-b6bf-f1082d1598ed.png)
現時点 (2022/12/10) でサポートするサービス・デスク・ツールは 5 つあります。
* Genesys
* NICE CXone
* Salesforce
* Twilio Flex
* Zendesk

この記事では、セットアップが容易で無償でトライアルが可能な Zendesk を取り上げます。
Zendesk 社の[ホームページ](https://www.zendesk.co.jp/service/messaging/live-chat/#georedirect)にアクセスすると、[無料で試す] というリンクがありますので、そこでサインアップできます。
Zendesk側のセットアップはオンライン・マニュアル [Zendesk との統合](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-deploy-zendesk)に記載があります。
この後の記事では、Watson Assistant 側の構成方法を詳しくみていきますので、実際に試してみたい方は、事前に、Zendesk 側の設定を行なっておいてください。

# Zendesk に接続する

Zendesk への接続は、Web Chat の中で構成します。Web Chat の構成方法については、[Web Chat で高速デプロイ](https://qiita.com/yanagih/items/4ab4bbf5077f90ef73bf)で紹介していますので、合わせてご参照をお願いします。
それでは、Web Chat での構成手順を詳しく見ていきます。

**Live agent** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/9e79e661-4c75-ea0d-18d8-a543745b3ac5.png)
**Zendesk** をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/253b0a05-f100-8d58-5385-95e4c5aed7e1.png)
**Transfers enabled**を有効化し、[ここで入手](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-deploy-zendesk#deploy-zendesk-task)した Zendesk の Account Key を入力してください。
**Connect account** をクリックして、接続テストを実施します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c09d2cd4-0ea9-f8a5-0a0e-9f3ba8ee3330.png)
接続が確認できたら次の画面に移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/807d6377-51ef-20e5-c347-27181d0d7485.png)
必須ではありませんが、有人エージェントへ転送した後に、ユーザーとバーチャル・アシスタントのやり取りが見れるウィジェット・アプリをダウンロードできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/35dbb62c-b20e-97c9-4f09-0ea3d78b3e5e.png)
ダウンロードしたファイルのアップロード方法は[こちら](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-deploy-zendesk#deploy-zendesk-task)を参照してください。
Zendesk 社のサイトには[詳細な解説](https://developer.zendesk.com/documentation/apps/getting-started/uploading-and-installing-a-private-app/)がありますので、併せて参照いただければと思います。

右上の **Save and exit** をクリックして、設定内容を保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/62661eb9-c950-d2c2-d30b-b31fd6f65a84.png)
構成手順は以上です。

# 対話シナリオに組み込んでみる
有人エージェントにバトンタッチするアクションを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/45163b95-ec68-de08-a356-c94c0a2376cb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/74f941df-8fe1-80cf-e2a3-6a76309a563d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/69b0bc14-f86e-c45a-0ab0-8f2f5b94fa92.png)
日本語メッセージに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/1742c9c8-7f50-621a-4d24-ee69eaa2dd59.png)

:::note info
『④入力』の **test** は、Zendesk 側で転送先エージェントの振り分けに使用するのですが、今回の記事では利用しません。入力必須パラメーターの扱いなので、test を仮入力しています。
:::
有人エージェントにバトンタッチするアクションができました。

ここで、ピザの注文内容を変更したい場合、**有人エージェント・アクション**がアクティベーションされるように修正してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/4a53a0d4-cb94-cfb7-d2f8-c6a9755ccaa6.png)
今回は、
* 注文内容を変更したい
* 追加注文があります
* 配達時刻を変更したい

と入力し、このような入力があった場合、**有人エージェント・アクションがアクティベート**されるように更新します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/2746d968-4b49-a201-11e2-8d03ce13e754.png)
入力が終わりましたら、アクションを閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/3f9a9cb1-f356-9541-13db-54fef228599a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/5a4490ca-5ffa-05a6-01b3-b419bcb995b0.png)
これで準備ができました。

# 動作確認テスト
テストをするために、index.html と webchat.js を用意します。
```HTML:index.html
<html>
<head>
    <script type="text/javascript" src="webchat.js"></script>
</head>
<body>
    <title>ピザ屋</title>
    <h1>ピザの注文に関するテストページ</h1>
    </body>
</html>

```
```javascript:webchat.js
window.watsonAssistantChatOptions = {
  integrationID: "***", // The ID of this integration.
  region: "***", // The region your integration is hosted in.
  serviceInstanceID: "***", // The ID of your service instance.
  onLoad: async (instance) => {
    instance.updateCSSVariables({
      'BASE-width': '50%',
    });
    instance.updateHomeScreenConfig({
      greeting: 'こんにちは！ ピザに関するお問い合わせについてお答えできます',
      starters: {
        buttons: [
          {label: 'ピザの注文'},
          {label: '割引条件'},
          {label: '注文のキャンセル'},
          {label: '注文内容を変更したい'},
          {label: '配達時刻を変更したい'},
        ],
      },
    });
    await instance.updateLocale('ja');
    instance.render();
  }
};
setTimeout(function(){
  const t=document.createElement('script');
  t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";
  document.head.appendChild(t);
});
```
:::note info
Preview の [Copy link to share] からもテストできますが、いくつかの英語メッセージが表示されてしまうので、[Web Chat カスタマイジング](https://qiita.com/yanagih/items/286d077a81d71a254f77#%E3%83%AD%E3%82%B1%E3%83%BC%E3%83%AB%E3%81%AE%E5%A4%89%E6%9B%B4)で紹介した**ロケールの変更**を行い、日本語メッセージでやり取りできるように簡単なWeb アプリを作成しました。
:::
index.html にアクセスし、**ピザの注文**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/bb767aac-5202-d72d-9e7b-4adbe6543934.png)
注文が終わったら、「配達時刻を変更したい」と入力します。**有人エージェント・アクション**がアクティベートされるので、上部に表示される [リクエストボタン] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/2081341f-b628-4ed2-8c7c-6da92e1d2d78.png)
Web Chat 側で**エージェント・リクエストの送信**が確認できます。
Zendesk 側で**エージェント・リクエストを受信**しますので、クリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/efd11189-0f23-0c50-86f9-4093e5117c2b.png)
有人エージェント側にチャット・ウィンドウが開きます。バーチャル・アシスタントとのチャット履歴から配達時刻を特定し、ユーザーと会話のやり取りをし、無事、配達時刻の変更ができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e1c384c4-34da-3020-bed5-e044c19d9953.png)
有人チャットの終了をクリックすると、確認画面が表示されるので、[はい] をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/4ac97bdd-52fd-544e-d17f-b4a1377c0734.png)
有人エージェントとの対話が終了し、「他に御用はありませんか」というバーチャル・アシスタントからのメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a901d3ff-c29e-b9eb-77f9-d939deaeabba.png)

# いかがでしたでしょうか
簡単な設定で、画面が切り替わることなく、有人エージェントとシームレスな連携ができました。
まだ、用意できていない質問等が入ってきた場合、有人エージェントと連携することで、顧客満足度を落とさずに対応することが可能ですね。

過去に有人エージェントへの切り替えの様子を収めた[デモ動画](https://video.ibm.com/recorded/131207559)を作成しました。
New Watson Assistant の1つ前の Classic Watson Assitant で作成した内容となっており、若干、動作が異なるのですが、切り替えの様子を動画で確認することが可能です。

また、今回使用したコードは [GitHub](https://github.com/Watson-bx-04/human-agent) にアップロードしてありますので、必要な方はご利用いただければと思います。
# 独り言

昨日 (2022/12/9) までは、New Watson Assistant のオンラインマニュアルをどの言語に切り替えても英語でしか表示されませんでしたが、ついに本日 (2022/12/10) から、日本語を含め、各種言語表示に対応しています。ただし、若干の違いも。。。

Watson APIs のオンライン・マニュアルは、**機械翻訳に移行した**と聞いていたのですが、何故か、New Watson Assistant だけ言語切り替えができない状況が続いていました。
晴れて日本語対応してくれたのは嬉しいのですが、全ページが機械翻訳に移行したわけではないようです。
一部、このような注意書きが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/4b9b5067-2746-1a13-f667-8a01a929991b.png)
この注意書きは、機械翻訳に移行する前のオンライン・マニュアルに表示された注意書きと同じです。

もし、このような注意書きが表示された場合は、必要に応じて英語版の確認もお願いします。

# 参考情報

## 公式オンライン・ドキュメント: ライブ・エージェントへの接続

https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-human-agent

## 公式オンライン・ドキュメント: Zendesk との統合

https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-deploy-zendesk

## Zendesk: Uploading and installing a private app
https://developer.zendesk.com/documentation/apps/getting-started/uploading-and-installing-a-private-app/

## IBM Video: 有人エージェントへ引き継いで解決
https://video.ibm.com/recorded/131207559

## 関連記事 / ソース・コード

https://qiita.com/yanagih/items/4ab4bbf5077f90ef73bf

https://github.com/Watson-bx-04/human-agent