3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

Amazon Connectのchat サンプルの利用方法

はじめに

先月2019年11月に発表されたAmazon Connectのchat機能について、githubにサンプルが載っていましたので、そちらを試してみました。
サンプルには、お客様に提供するchatUI・Amazon Connectのchatのサンプルコンタクトフローなどが記載されていました。
今回はこちらのサンプルの利用方法をまとめました。

構成

こちらを参考にしてください。
エンドユーザに対して提供するWebページを、CloudFrontにて提供しています。

そのため試す際には、CloudFrontへのアクセスができるようにしてください。

設定方法

Amazon Connectの環境設定

・データストレージの設定
 AWSのコンソール>Amazon Connect>インスタンスクリック>データストレージより、チャット記録の有効化をしてください。
image.png

・問合せフロー作成
 まず、githubから「Basic Chat Disconnect Flow.json」「Basic Chat.json」をダウンロードしてください。これから作成するコンタクトフローのデータが入っています。
 次にAmazon Connectの設定画面に入り、問合せフローの新規作成をします。作成の際には、右上のフローのインポート(ベータ)をクリックし、そちらに先ほどダウンロードした「Basic Chat Disconnect Flow.json」ファイルを入れ、公開してください。(Basic Chatを先に選択すると、公開できません。)
image.png
 BasicChat.jsonも同様にコンタクトフローを作成・公開し、「Basic Chat Disconnect Flow」と「Basic Chat」の2つのフローが作成されていることを確認してください。
image.png
image.png

・ルーティングプロファイルの設定
chatを受け付けるAgentの持つルーティングプロファイルのchat部分にチェックを入れてください。
image.png
また、ページ下部のルーティングプロファイルのキューにてBasicQueueのChannelsのChatにチェックがつけてください。

・セキュリティプロファイルの設定
[Agent]のセキュリティプロファイルに対して、追加の設定を行います。
[数字とフロー] > [Chat test mode] > [すべて]にチェックを入れてください。
image.png

Amazon Connect外の設定(CloudFormationの実行)

Amazon Connect以外の部分の設定のために、CloudFormationのテンプレートが用意されています。
こちらを実行することで設定が完了します。

事前パラメータの確認

下記のパラメータが必要となるので、事前に確認しておきます。
Amazon ConnectS3BucketName:connect-XXXXXXXXXXXX
→AWSコンソール>Amazon Connect>データストレージから、確認してください。'connect-xxx'という形式です。
WebsiteS3BucketName:xxx-chat-demo
→ 任意の文字列
cloudFrontPriceClass:PriceClass_100
→ デフォルトのまま
contactFlowId:[問い合わせフローID]
→ [Basic Chat] 問い合わせフローARN のcontact-flowの後ろの値]
instanceId:[Amazon ConnectのインスタンスID]
→ [Basic Chat] 問い合わせフローARN のinstanceの後ろの値]
image.png
transcriptPath:connect/[Amazon Connectインスタンス名]/ChatTranscripts
→ Amazon Connect > データストレージ > チャット記録で設定した値

asyncCustomerChatUXのデプロイ

まず、Cloudformationをスムーズに行うため、AWSのコンソールへログインしてください。
次に、https://github.com/amazon-connect/amazon-connect-chat-ui-examples
のREADMEにある以下のURLを選択し、ap-notheast-1(Tokyo) の [Launch Stack] ボタンを押下して下さい。
image.png
image.png

CloudFormation のスタックの作成が開始します。
[ステップ1] では内容は変更せずそのまま[次へ]
image.png

[ステップ2] では先ほど確認した内容を入れて[次へ]
image.png

[ステップ3] では内容は変更せずそのまま[次へ]
image.png

[ステップ4] では[AWS CloudFormation によって IAM リソースが作成される場合があることを承認します。] にチェックをして[スタックの作成]を押してください。
image.png

ステータスが[CREATE_COMPLETE]になれば作成完了です。

実際に動かしてみる

・エージェント側:
Amazon ConnectのCCP(ccp-v2)を起動し、chat対応のAgentにてログインしてください。
https://[Amazon Connectインスタンス].awsapps.com/connect/ccp-v2/

・クライアント側:
CloudFrontにて作成されたサイトのURLにアクセスしてください。
[CloudFormation] > [スタック] > asyncCustomerChatUX の[出力] から cloudFrontDistribution の値見ることでURLを知ることができます。
image.png

First Name:顧客の名前
Username:Amazon ConnectのAgentログイン名
を入力して[Start Chat]を押してください。これにてchatを開始することができます。

image.png

終わりに

以上にてAmazon Connectのチャット機能のデモを実施することができます。
現在のデモでは、エージェント名を入力しないといけない仕様となっていて使いづらいですので、今後紐解いていこうと思っています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?