Amazon Connect アプリ内通話、ウェブ通話、ビデオ通話を使用した安全な顧客情報の連携

企業は、よくある質問 (FAQ) やナレッジ記事などのセルフサービス機能をウェブサイトやモバイルアプリに公開し、顧客の疑問の解決を支援しています。このとき、解決しなかった疑問について顧客がエージェントに問い合わせると、ウェブサイトやアプリで入力または閲覧した内容を、再度尋ねられることがよくあります。

このため、企業はサードパーティのウェブ通話、画面共有、またはビデオ通話アプリケーションを導入し、顧客がウェブサイトやモバイル機器から電話をかけられるようにしています。その結果、エージェントは従来の電話とウェブベースの通話をサポートするために、さまざまなアプリケーション間を行き来しなければなりません。さらに企業は、平均処理時間などの基本的なカスタマーサービス指標を把握するために、さまざまなデータソースを集計する必要があります。

Amazon Connect では、ウェブサイトやモバイルアプリケーションからパーソナライズされた音声およびビデオエクスペリエンスを提供できるアプリ内通話、ウェブ通話、ビデオ通話の機能が提供されました。この機能は、マネージド通信ウィジェットまたはソフトウェア開発キット (SDK) を使って簡単に実装できます。顧客は、ウェブサイトやモバイルアプリを切り替えることなく、エージェントと通話を開始できます。また、コンテキスト情報をエージェントのソフトフォンに渡すこともできます。これを利用し、顧客の情報、認証ステータス、アプリ内の過去のアクションなどの属性に基づいて、顧客体験をカスタマイズできます。この結果、エージェントの処理時間の短縮と顧客満足度の向上が期待できます。

このブログ記事では、お客様がウェブページからウェブ通話とビデオ通話を開始する場合のサンプルユースケースを順に説明します。また、Amazon Connect のアプリ内通話、ウェブ通話、ビデオ通話を使用して、顧客情報をエージェントに転送する方法を示します。

ソリューションの概要

図 1. フォームを備えたウェブサイトとAmazon Connect のアプリ内通話、ウェブ通話、ビデオ通話を統合したソリューションのアーキテクチャ

このソリューションでは、サンプルウェブサイトを Amazon CloudFront でホストし、静的なウェブサイトのコンテンツを Amazon S3 に格納します。顧客がウェブサイトのフォームを送信すると、属性が Amazon API Gateway 経由で AWS Lambda に送信されます。その後、AWS Lambda は新しいリクエストに対して JSON Web トークン (JWT) を発行し、認証資格情報を AWS Systems Manager パラメータから取得します。コミュニケーションウィジェットの JavaScript がウェブサイトに読み込まれ、Amazon Connect へ通話を開始します。これにより、顧客とエージェントが音声とビデオでシームレスにつながります。

前提条件

このハンズオンチュートリアルでは、読者が次のリソースについて理解し、アクセスできることを前提としています。

Amazon Connect、Amazon API Gateway、AWS Lambda、AWS CloudFormation、Amazon CloudFront に管理者権限のある AWS アカウントを利用できること
Amazon Connect インスタンスが構築済みであること
ローカル環境に AWS CLI がインストールされ設定済みであること
AWS Cloud Development Kit (CDK) 環境がインストール済みであること。インストールされていない場合は Step 1の構築手順を実行してください。また、AWS Cloud9 を利用することもできます。

ウォークスルー

Step 1: 準備

AWS CDK をインストール (すでにインストール済みの場合はスキップ) し、CDK 環境を構築してください。
npm -g install typescript
npm -g install aws-cdk
cdk bootstrap aws://ACCOUNT_ID/AWS_REGION
Git を利用して、GitHub からリポジトリをクローンしてください。
git clone https://github.com/aws-samples/web-voice-video-calling-blog
CDK プロジェクトと AWS Lambda 関数の依存関係をインストールします。
cd web-voice-video-calling-blog
mkdir -p lambda-layers/jwt-layer/nodejs
npm install jsonwebtoken --prefix lambda-layers/jwt-layer/nodejs
npm install
AWS CLI プロファイルを使って CDK プロジェクトをデプロイします。これにより、プロジェクトに必要な Amazon CloudFront、Amazon API Gateway、AWS Lambda、AWS Systems Manager のリソースがデプロイされます。
cdk deploy
Do you wish to deploy these changes (y/n)? には y を入力します。
(このプロジェクトでは cdk バージョン 2.127.0 を使用しています。アップグレードが必要な場合は、npm install -g aws-cdk —force を実行してください)
CDK のデプロイが完了したら、このスタックの `出力` タブを開き、Amazon API Gateway エンドポイントと Amazon CloudFront ウェブサイトの URL の値を書き留めてください。
AcWebCallingStack.Endpoint8024A810 = https://aaaaaaaa.execute-api..amazonaws.com/prod/ (あなたの Amazon API Gateway)
AcWebCallingStack.websiteURL = https://aaaaaa.cloudfront.net (あなたの Amazon CloudFront ウェブサイトの URL)

Step 2: コミュニケーションウィジェットの設定

Amazon Connect インスタンスを開き、チャネル > コミュニケーションウィジェットに移動します。
ウィジェットを追加をクリックします。
名前に「ac_widget_webcalling」と入力し、説明フィールドに「Widget for web and video calling」と入力してください。
コミュニケーションのオプションの「チャットを追加」のチェックを外します。

図 2. Amazon Connect コミュニケーションウィジェット作成画面

ウェブ通話コンタクトフローで、「Sample inbound flow (first contact experience)」を選択します。
保存して続行をクリックします。
次の画面のオプションはすべてデフォルトのまま下までスクロールして、保存して続行をクリックしてください。
コミュニケーションウィジェットに必要なドメインを追加するにおいて、Step 1.5 でメモしておいた Amazon CloudFront ウェブサイトの URL のドメインを記入します。
新しいコミュニケーションウィジェットのリクエストにセキュリティを追加するは「はい」を選択してから、保存して続行をクリックしてください。
次の画面のウィジェットのスクリプトでスクリプトをコピーをクリックして、テキストエディタにコピーしてください。
コピーされたスクリプトから widgetId を控えておいてください。この widgetId は後のStep 4.5 で使用します。widgetId を見つけるには、コミュニケーションウィジェットスクリプトの例（リンク先のアンダーライン部分）を参照してください。
キーをコピーをクリックし、テキストエディタに保存します。これは後のStep 4.3 で使用します。

Step 3: index.html の API エンドポイントとウィジェットスクリプトの値を編集

Step 1.2 でクローンしたフォルダ内の「website」フォルダにある index.html ファイルを編集します。
127 行目の apiEndpoint を自分の環境の Amazon API Gateway Endpoint の値で更新します (Step 1.5 を参照)

図 3. index.html の更新

index.html の 115 行と 123 行の間に、手順 2.10 (コミュニケーションウィジェット設定) でコピーしたスクリプトを追加し、ファイルを保存します。重要:コピーしたスクリプトから最初の行の</script>および最後の行の<script>を削除してください。
AWS CLI から、CDK プロジェクトを再デプロイしてください。これにより、リソースの変更が反映されます。
cdk ..
cdk deploy

Step 4: AWS Systems Manager のセキュリティキーと Widget ID の更新

AWS マネジメントコンソールにログインし、AWS Systems Manager に移動して、メニューからアプリケーション管理の下にあるパラメータストアをクリックしてください。
一覧から /Blog/AcWebCalling/AmazonConnect/ConnectSecret をクリックし、編集をクリックしてください。
値フィールドに、Step 2.12 (コミュニケーションウィジェットの設定) で保存したセキュリティキーを入力し、変更を保存をクリックします。

図 4. パラメータストア内のセキュリティキーの更新

/Blog/AcWebCalling/AmazonConnect/WidgetId をクリックし、編集をクリックしてください。
値フィールドに、Step 2.11 で保存した widgetId を入力し、変更を保存をクリックしてください。

Step 5: Amazon Connect ステップバイステップガイドの設定

Amazon Connect ステップバイステップガイドを使用すると、ウェブサイトから渡された属性をエージェントワークスペースで確認できます。今回は、以下に記載する 2 種類のフローをインポートして設定します。

5.1 ステップバイステップガイドのビューフローの作成:

ac_webcalling_SBSguide_view フローをダウンロードします。リンク先の git ページから raw ファイルをダウンロードしてください。
Amazon Connect インスタンスを開き、ルーティング > フローを選択し、フローを作成を選択してください。
右上のドロップダウンの矢印を押してインポート (ベータ)を選択し、Step 5.1.1 でダウンロードしたフローをインポートします。
公開をクリックします。

5.2 着信コールフローの作成

ac_webcalling_SBSguide_handler フローをダウンロードしてください。リンク先の git ページから raw ファイルをダウンロードしてください。
Amazon Connect インスタンスを開き、ルーティング > フローを選択し、フローを作成を選択してください。
右上のドロップダウンの矢印を押して インポート (ベータ)を選択し、Step 5.2.1 でダウンロードしたフローをインポートします。
公開をクリックします。

5.3 着信コールフローとステップバイステップフローの更新

Step 5.1 で作成した ac_webcalling_SBSguide_view フローを開きます。
フローエディタの左下にある追加のフロー情報を表示をクリックして展開します。
作成した ac_webcalling_SBSguide_view フローのフロー ID をコピーします。
Step 5.2 で作成した ac_webcalling_SBSguide_handler フローを開きます。
コンタクト属性の設定ブロックを開きます。

図 5. 着信コールフローの更新

Step 5.3.3 でコピーしたフロー ID を DefaultFlowForAgentUI の値に設定します。この属性は、通話がエージェントにルーティングされたときに、エージェントに表示されるステップバイステップのガイドを指定します。注: 「ENTER ac_webcalling_SBSguide_view FLOW ID HERE」を ac_webcalling_SBSguide_view のフロー ID に置き換えてください。
コンタクト属性の設定ブロックを保存して閉じます。
作業キューの設定ブロックを開きます。
このブロックでは、ソリューションのテスト中に使用するキューを設定します。既存のコンタクトセンターの運用に影響を与えないキューを選択することをお勧めします。
作業キューの設定ブロックを保存して閉じ、公開をクリックして更新したフローを発行します。

Step 6: コミュニケーションウィジェットの更新

Amazon Connect インスタンスを開き、チャネル > コミュニケーションウィジェットを選択します。
ac_widget_webcalling をクリックし、詳細セクションで編集をクリックしてください。
ウェブ通話コンタクトフローで、フローを ac_webcalling_SBSguide_handler に変更し、保存して続行をクリックしてください。

図 6. Amazon Connect のコミュニケーションウィジェットの更新

保存して続行をクリックします。
保存して続行をクリックします。

Step 7: Amazon Connect セキュリティプロファイルの更新

エージェントがビデオ通話とステップバイステップのガイドを利用できるようにするには、セキュリティプロファイルにコンタクトコントロールパネル (CCP) とエージェントワークスペースの権限を追加する必要があります。権限の追加には次の手順を実行します。

Amazon Connect インスタンスを開き、ユーザー > セキュリティプロファイルを選択します
ステップバイステップガイドの作成とアクセスを許可するセキュリティプロファイルをクリックします。
数字とフローをクリックして展開します。
ビューの横にある「すべて」のチェックボックスをクリックします。
エージェントアプリケーションをクリックして展開します。
カスタムビューの横にある「すべて」のチェックボックスをクリックします。
コンタクトコントロールパネル (CCP) をクリックします。
ビデオ通話の横にある「アクセス」のチェックボックスをクリックします。

図 8. セキュリティプロファイルのコンタクトコントロールパネル設定

右上の保存をクリックします。

テスト

上記のステップで設定したセキュリティプロファイルを使用したエージェントとして Amazon Connect エージェントワークスペースにログインします。
ブラウザで Amazon CloudFront の URL (Step 1.5 参照) を開き、Contact Us フォームに任意の情報を入力・選択します。Submit をクリックしてください。

図 9. Amazon Connect in-app, web, and video callingの通話開始デモ画面

画面右下の電話アイコンをクリックするとエージェントとの通話が開始します。ビデオ通話を開始するには、Start Video アイコンをクリックしてください。
通話がエージェントワークスペースに着信したら、通話を受信をクリックします。エージェント側でもビデオを有効にします。ウェブサイトで入力・選択した値がエージェントワークスペースにビデオや音声通話とともに表示されます。

図 10. Amazon Connect in-app, web, and video callingのエージェント側画面

ウェブサイト上では、顧客はエージェントとビデオや音声で対話ができます。

図 11. Amazon Connect in-app, web, and video calling の顧客側デモ画面

クリーンアップ

AWS CLI から、web-voice-video-calling-blog ディレクトリに移動してください。
cd web-voice-video-calling-blog
「cdk destroy」を実行すると、Amazon CloudFront、Amazon API Gateway、AWS Lambda、AWS Systems Manager にインストールされたリソースが削除されます。
cdk destroy
[ オプション ] ac_webcalling_SBSguide_handler フローと ac_webcalling_SBSguide_view フローの両方について、delete-contact-flow コマンドを実行します。

結論

このブログ記事では、新しい Amazon Connect のアプリ内通話、ウェブ通話、ビデオ通話機能について説明しました。完全にマネージドされたコミュニケーションウィジェットを使用することで、企業はウェブサイトやモバイルアプリケーションにこの機能を数クリックで実装できます。顧客が接続されると、顧客情報 (VIP 会員など) や他の情報 (ウェブサイトのページなど) に基づいて顧客体験をパーソナライズできるようになります。これにより、コンタクトに優先順位を付けたり、可能な場合は自動的に解決したり、必要な場合は最適なエージェントにルーティングすることができます。

著者について

Pavan Dusanapudi は、イギリスのマンチェスターを拠点とするアマゾンウェブサービスの AWS アプリケーションセールスに所属するスペシャリストソリューションアーキテクトです。彼は、カスタマーエクスペリエンスソリューションとデジタルトランスフォーメーションを通じて、顧客がビジネス成果を達成できるよう支援しています。余暇には、家族でのハイキング、クロスフィットワークアウトを楽しみ、心の平穏を見つけています。

Prabhakar Rajasekar は、ドイツのアーヘンを拠点とするアマゾンウェブサービスの AWSI アプリケーションセールスに所属するスペシャリストソリューションアーキテクトです。顧客のデジタルトランスフォーメーションを支援する傍らで、庭や森の中で子供たちと時間を過ごすことを楽しんでいます。

翻訳は Amazon Connect スペシャリストソリューションアーキテクト清水が担当しました。原文はこちらです。

Amazon Web Services ブログ