Amazon Connect Chatのサンプルを触ってみる

こんにちは、AWS営業部の洲崎です！

今回はAmazon Connect Chatについて触ってみようと思います。

Amazon Connect Chatとは

Amazon Connect Chatとは、Amazon Connectから利用できるチャット機能になります。
同じツールで音声・チャット両方の対応が可能になるので、特に別システムを導入することなく音声&チャット対応が可能になります。
非同期チャットにも対応している為、チャット終了時でも一定時間(最大25時間)保持することができます。
料金はメッセージ単位の課金で、1メッセージあたり$0.004になります。※2020/8/23時点
Amazon Connect の料金

Amazon Connect　Chatの設定

では早速Amazon Connect Chatを導入してみます。
まず、今回問い合わせフローで利用するブロックはこちらです。

• ログ記録動作の設定
• Set recording and analytics behavior(通話記録動作の設定)
• プロンプトの再生
• Set disconnect flow
• キューの設定・キューへ転送
• 切断／ハングアップ

上から順番にどのような項目なのかみていきましょう。
実際設定してみると下記画面になります。

ログ記録動作の設定

このブロックを設定することで、問い合わせフローの各データをCloudwatch Logsに貯める事が出来ます。
下記SINさんのブログもご参照ください。
[Amazon Connect] 問い合せフローのログを保存する

Set recording and analytics behavior(通話記録動作の設定)

通話記録動作の設定をONにすることで、通話やChatを管理者がモニタリングすることが可能となります。
※Contact LenzがGAされているのでContact Lenzの設定も可能になっています。

プロンプトの再生

ここでお客様に始めのチャット挨拶を設定しましょう。
今回は”お問い合わせ頂き有難うございます”にしてみます。

Set disconnect flow

非同期チャットの設定になります。
ここで非同期フローを選択することで、チャット終了後の保持時間の設定をする事が出来ます。
今回はすでにあるSample disconnect flowを設定します。

Sample disconnect flowの中身は問い合わせフローから確認が可能です。

キューの設定・キューへの転送

音声だけでなく、Chatも同一のキューで設定・転送が可能です。

ルーティングプロファイルの設定

ルーティングプロファイルの編集でエージェントが音声・チャットに対応するかと同時に受けるチャット数の最大数を設定できます。

セキュリティプロファイルの設定

今回、Chat test modeというのを利用します。
エージェントのセキュリティプロファイルのChat test modeも✔いれておきましょう。

Amazon Connect Chatのテスト

Amazon Connect Chatを導入する前にテストをしてみましょう。
まずはダッシュボードから”チャットをテスト”をクリックしてください。

チャットをテストという画面が出てくるので、”問い合わせコントロールパネルをアクティベート”というところをクリックします。
左側がお客様から見たWebサイトのイメージ、右側がエージェントが利用するCCPの画面になります。

ようこそ～～、と出たら、左上のテスト設定をクリックしましょう。

テストする際の設定画面になります。
問い合わせフローは先ほど作成したフローを選択し、テストとなるカスタマー情報を入力しましょう。

適用を押すと、カスタマーとエージェントのやり取りをテストする事が出来ます。
まずはグリーティングのメッセージで、”お問い合わせ頂き有難うございます”と自動で送信されます。
カスタマーが何かメッセージを送り、エージェントのステータスをAvailiableにするとリング音がなります。

チャットを受け入れると、実際に一人二役でやり取りを行うことができます。
終了すると、デフォルトで15分の非同期チャットのメッセージも送られます。
(今回はデフォルトのままだったので、英語で送信されました。デフォルトのフローを編集することで日本語送付も可能です)

Amazon Connect ChatをWebサイトに組み込む

Amazon Connect Chatの設定とテストを行ったので、実際にWebサイトの組み込み方を確認してみます。

Amazon Connect Chatの組み込みについてはGithubにCloudformationとしてsampleが格納されております。
https://github.com/amazon-connect/amazon-connect-chat-ui-examples
ソリューションのとこに二つのファイルがありますが、cloudformationTemplates / asyncCustomerChatUX をクリックしてみましょう。

Githubを見ていく中で、各リージョンのLaunch Stackというボタンがあります。
今回は東京リージョンで起動ボタンを押してみます。

CloudFormationのスタックの画面に飛びます。
ここはデフォルトのままで次に進みます。

次の画面でCloudformationのパラメータの設定をしていきます。
各項目を修正していきましょう。
・Amazon ConnectS3BucketName：connect-XXXXXXXXXXXX
⇒AWSマネジメントコンソールのAmazon Connect→データストレージから確認が可能となります。”connect-xxx”という形式になります。
・WebsiteS3BucketName：xxx-chat-demo
⇒任意の文字列を入力します。今回はSuzaki-chat-demoとします。別途sampleのHTMLが作成されます。
・cloudFrontPriceClass：PriceClass_100
⇒デフォルトのままで進めていきます。
・contactFlowId：[問い合わせフローID]
⇒問い合わせフローARN のcontact-flowの後ろの値になります。
・instanceId：[Amazon ConnectのインスタンスID]
→問い合わせフローARN のinstanceの後ろの値になります。

問い合わせフローのARNはここに情報が載っています。↓

これでスタックの作成を押すとCloudformationが走り、Amazon Connect Chatの構築が走ります。

実際にWebサイトで見てみる

スタックが作成できましたら出力⇒"CloudFrontDistribution"をクリックします。
※エラー画面が出る場合は少し時間を置いてからアクセスしてみてください。

すると、簡単な画面ですが、Webサイトでチャットを試すことが出来ました！

ソースを見るとチャット用のJavascriptライブラリやAPI呼び出しのコードを見る事も可能です。

まとめ

いかがだったでしょうか。

Amazon Connectは通話が出来るサービスだとは知られていますが、2019/11～Chat機能も併せて実装されました。
今まではPBXはXXX、チャットは○○○と別ツールの導入で費用や手間がかかったと思いますが、纏めて利用できるのは嬉しいですね。
実際Webサイトに組み込みとなってくるとJavascriptの勉強等が必要になってくると思うのでそこは別途勉強しようと思います。

もしご自身で構築するにあたって不安な所等あれば、弊社請求代行サービス”クラスメソッドメンバーズ”に加入頂ければ24/365無償でQAサポートの利用が可能です。

これからAmazon Connectを始められる、すでに利用しているが不安等ございましたら、お気軽に問い合わせ頂けますと幸いです。

ではまた！AWS営業部の洲崎でした。