[Amazon Connect]「アプリ内、ウェブ、ビデオ通話」で問い合わせしてきた顧客情報を表示するソリューションがあったのでやってみた

こんにちは、洲崎です。
Amazon Connectでは電話・チャット以外に「アプリ内・ウェブ・ビデオ通話」も利用することができます。

この機能は電話回線を使わずに音声通話・ビデオ通話が可能です。
また、料金については、「料金無料通話」と比較すると「アプリ内通話/ウェブ通話」の方が安く利用ができます。

一方、「アプリ内、ウェブ、ビデオ通話」をそのままの機能で利用すると、電話対応するのと比較して、発信元の電話番号などの情報がないため、問い合わせをしてきた顧客をすぐに特定することは困難です。
今回は「アプリ内、ウェブ、ビデオ通話」で顧客情報を表示させるソリューションがAWSより紹介されてましたのでやってみました。

ソリューションの概要

CloudFront + S3でサンプルのWebサイトを用意します。
Webサイトにあるフォームに顧客の情報を送信すると、API Gateway経由でLambdaに渡されます。
LambdaでJSON Webトークンを発行し、System Manager Parameter Storeから認証情報を取得し、Amazon Connectに渡します。
その情報をAmazon Connectのステップバイステップガイドと連係し、Amazon ConnectのAgent WorkSpaces上に表示させます。

(参考)Securely pass the customer information to agent using Amazon Connect in-app, web, and video calling

前提：AWS CDKのインストール

本ソリューションはAWS CDKでデプロイをするので、AWS CDKを利用できることが前提です。
事前にターミナルでcdk --verisonと入力し、自身の端末にインストールされているか確認します。
もしインストールされていない場合は、以下のコマンドを叩いてインストールします。

npm -g install typescript
npm -g install aws-cdk

また、AWS環境にデプロイするためにcdk bootstrapを実施していなければ、実行します。
CloudFormationのスタック一覧に、「CDKToolkit」があればOKです。

AWS CDKのインストール方法の詳細については、こちらの記事も参照してください。

やってみる

AWS CDKのデプロイ

Githubから自分の端末にリポジトリのクローンを作成します。

git clone https://github.com/aws-samples/web-voice-video-calling-blog.git

クローンしたフォルダを、任意のエディタで開きます。（私はVisual Studio Codeで開きました）
Lambda関数のレイヤーをインストールします。

mkdir -p lambda-layers/jwt-layer/nodejs
npm install jsonwebtoken --prefix lambda-layers/jwt-layer/nodejs
npm install

AWS CLIでCDKプロジェクトをデプロイします。

cdk deploy

コマンドを実行すると、Do you wish to deploy these changes (y/n)?と表示されるので、yと入力します。

約4〜5分で、デプロイが完了しました。
Outputsの部分（API GatewayのエンドポイントとCloudFrontのURL）は控えておきます。

Deployment time: 265.82s
Outputs:
AcWebCallingStack.Endpointxxxxxxxx = https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/
AcWebCallingStack.websiteURL = https://xxxxxxxxxx.cloudfront.net
Stack ARN:
arn:aws:cloudformation:ap-northeast-1:xxxxxxxxxxxx:stack/AcWebCallingStack/xxxxxxxxx-f6dd-11ee-80f4-0eaa6d8266f1
Total time: 280.3s

マネジメントコンソールのCloudFormationのスタック一覧で、デプロイ済みであることを確認することができます。

Amazon Connect コミュニケーションウィジェット

Amazon Connect コンソールにログインし、「コミュニケーションウィジェット」を開きます。

ウィジェットの詳細で以下を入力します。
名前：ac_widget_webcalling
説明：Webおよびビデオ通話用のウィジェット

コミュニケーションのオプションで、「ウェブ通話を追加」と「動画を追加」にチェックを入れます。
ウェブ通話コンタクトフローは、一旦仮で指定するため、どれでも大丈夫です。（Sample inbound flowにしました）

「ウィジェットをカスタマイズする」ところでは、すべてデフォルトのままで次に進みます。

「ドメインとセキュリティ」のところで、ドメインはCDKデプロイ時に控えたCloudFrontのURLを入力します。
また、「新しいコミュニケーションウィジェットリクエストのためにセキュリティを追加する」のところで、「はい」を指定します。

スクリプトとセキュリティキーをそれぞれコピーして、控えておきます。

index.htmlの修正

git cloneしたフォルダにあるindex.htmlを開きます。
127行目にあるconst apiEndpointのパラメーターを、CDKデプロイの時に控えたAPIエンドポイントを入力します。

115行目と123行目の間に、コミュニケーションウィジェットで控えたスクリプトを貼り付けます。
その際、コピーしたスクリプトから「」は削除します。

ターミナルを起動し、cdk deployを実行します。
2回目は90秒ほどでデプロイが完了しました。

AcWebCallingStack
Deployment time: 80.51s
Outputs:
AcWebCallingStack.Endpointxxxxxxxx = https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/
AcWebCallingStack.websiteURL = https://xxxxxxxxxx.cloudfront.net
Stack ARN:
arn:aws:cloudformation:ap-northeast-1:xxxxxxxxxxxx:stack/AcWebCallingStack/xxxxxxxxx-f6dd-11ee-80f4-0eaa6d8266f1
Total time: 90.76s

System Manager Parameter Storeの更新

マネジメントコンソールからSystem Managerを開き、パラメーターストアを開きます。
「/Blog/AcWebCalling/AmazonConnect/ConnectSecret」を開き、編集をクリックします。

直のフィールドに、コミュニケーションウィジェットの作成時に控えたセキュリティーキーを入力します。

「/Blog/AcWebCalling/AmazonConnect/WidgetId」を開き、編集をクリックします。

直のところに、コミュニケーションウィジェットで控えたスクリプトにある、Widget IDを入力します。

※Widget IDはスクリプトにある9行目の/* Widget ID */とコメントを入れているところにあります。

<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://xxxxxxxxxxxxxxx.cloudfront.net/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '/* Widget ID */');
  amazon_connect('styles', { iconType: 'VOICE', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', 'xxxxxxxxxxxxxxxxxx=');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
</script>

Amazon Connect ステップバイステップガイド

Webサイトから渡された属性を確認するために、Amazon Connectのステップバイステップガイド機能を利用します。
Githubにあるac_webcalling_SBSguide_view フローをダウンロードします。
Amazon Connectコンソールで、ルーティング→フロー→フローの作成をクリックします。
右上にある矢印ボタンから、「インポート（ベータ）」をクリックし、ダウンロードしたフローをインポートします。

「保存」を押して、「公開」をクリックします。

Githubにあるac_webcalling_SBSguide_handler フローをダウンロードし、同じくフローをインポートします。

「保存」を押して、「公開」をクリックします。

ac_webcalling_SBSguide_view フローを開き、フローエディターの左下にあるARNからcontact-flow/の後ろにあるフローIDを控えます。

ac_webcalling_SBSguide_handler フローを開き、「コンタクト属性の設定」ブロックを開きます。
「DefaultFlowForAgentUI」の直を、控えたフローIDに置き換えます。

「WorkingQueue」の直に、動作確認で利用する用のキューのARNを入力します。

Amazon Connect ウィジェットフローの更新

作成したコミュニケーションウィジェットのコンタクトフローを、「ac_webcalling_SBSguide_handler」に変更します。

残りの設定はそのままで、「保存して続行」をクリックし、保存します。

Amazon Connect セキュリティプロファイル

動作確認を行うユーザーのセキュリティプロファイルを更新します。

コントロールパネル（CCP）のところで、「ビデオ通話」を有効にします。

数字とフローのところで、「ビュー」を有効にします。

エージェントアプリケーションのところで、「カスタムビュー」と「ビュー」を有効にします。

これで、設定完了です！

テスト

Amazon Connectでテストを行うユーザーで、Agent Workspacesを開いておきます。
CloudFrontのURLを叩くと、以下の画面が表示されます。
Name、Email、Messageに問い合わせ主の情報を入力します。
また、Contact Reasonはドロップダウンで指定できますので、「Open a new account」を指定します。（どれでもOKです）

Submitをクリックすると、右下にビデオ通話のアイコンが表示されるので、クリックします。

Active Call（発信状態）になります。オペレーター側で着信をとると通話可能になります。

オペレーターが通話をとると、ウェブ通話やビデオ通話を行うことが可能になります。

オペレーター側の画面には、顧客側の情報が表示されました！

清掃

git cloneしたweb-voice-video-calling-blog に移動し、「cdk destroy」を実行します。
インポートした問い合わせフロー（ac_webcalling_SBSguide_handler、ac_webcalling_SBSguide_view）をdelete-contact-flowコマンドで削除します。

最後に

「アプリ内・ウェブ・ビデオ通話」でオペレーターに顧客情報を表示させるソリューションを試してみました。
作り込めば、ウェブ通話でもパラメーターをオペレーターの画面に表示させることが可能です。
また、個人的に、属性を表示させるのに「ステップバイステップガイド」を使うのも参考になりました。

ではまた！コンサルティング部の洲崎でした。

参考