4-2.カスタム CCP のセットアップ

ラボの準備

こちら から今回のラボの関連ファイルをダウンロードし、zip ファイルを展開します。

コンタクトフローの設定

コンタクトフローの作成

  1. Amazon Connect インスタンスにログインします。左側のメニューの ルーティング － 問い合わせフロー を選択します。
  2. 右上のコンタクトフローの作成を選択します。 lab3

コンタクトフローのインポート

  1. 右上のドロップダウンリストをクリックして、フローのインポートを選択します。 lab3
  2. ダウンロードしたzipファイル内にある Custom-CCP という名前のファイルを選択し、インポートします。
  3. インポート後、以下のようなコンタクトフローが表示されることを確認して、右上にある保存、公開 をクリックします。
    lab3

電話番号の設定

番号を設定する

  1. 左側のメニューから ルーティング － 電話番号 を選択します。
  2. 表示されたリストから準備の手順で取得した電話番号を選択し、問い合わせフロー/IVR ドロップダウンメニューから、前の手順でインポートした Custom-CCP コンタクトフローを選択し、保存をクリックします。 lab3

テストエージェントの設定

キューを追加する

  1. 左側のメニューの ルーティング － キューを選択し、キューの一覧から BasicQueue を選択します。
  2. オペレーション時間、外線発信者 ID 番号に値が設定されていることを確認し、右上の保存 を選択します。 lab3

新しいユーザーの追加

  1. 左側のメニューの ユーザー － ユーザー管理 をクリックします。
  2. 新しいユーザーの追加 を選択します。 lab3
  3. ソースの選択画面で、作成 を選択し、次へ を選択します。

ユーザーの詳細を追加する

  1. ユーザー詳細の追加画面で、テストに使用するエージェントのユーザー詳細を設定します。名、姓、ログイン名、パスワードは任意の値を設定します。パスワードは大文字小文字と数字を含んだ8文字以上が要件です(Password123など)。
  2. ルーティングプロファイルは Basic Routing Profile を選択します。
  3. セキュリティプロファイルは Agent と Admin を選択します。
  4. 電話の種類の通話作業後（ACW）タイムアウトを 3 秒に設定します。
    lab3
  5. 画面を下にスクロールして保存 を選択します。
  6. ユーザー詳細の確認画面で、ユーザーの作成をクリックし、ユーザーが追加されたことを確認します。

S3 で静的ウェブアプリケーションをホストする

S3 バケットを作成する

  1. AWS コンソールの検索ボックスに S3 と入力し、検索結果から S3 をクリックします。 lab3
  2. 右上にあるバケットの作成をクリックします。 lab3
  3. バケット名にグローバルで一意になるような名前を入力します(例 divedeep211014-aws-shimizu )。
  4. AWS リージョンは Amazon Connect のインスタンスと同じリージョンを選択してください。 lab3
  5. その他の設定はデフォルトのまま、下にスクロールして[バケットを作成]をクリックします。

S3 バケットにウェブアプリケーションファイルをアップロードする

  1. Amazon Connect の設定画面に戻り、右上の電話アイコンをクリックして CCP を起動し、CCP の URL をエディタなどにコピーします。 lab3
  2. このラボで配布したzipファイル内にある CCPCourse.js をエディタ等で開きます。
  3. CCPCourse.js ファイル内のvar ccpUrl 行のインスタンス名を、先ほどメモした CCP の URL に従って書き換えます。確認したらファイルを上書き保存します。 lab3
  4. 以下の3つのファイルを、先ほど作成した S3 バケットにアップロードします。
  5. CCPCourse.js（この項で編集したファイル）
  6. CCPCourse.html（配布した zip ファイル内にあるファイル）
  7. connect-streams.js（配布した zip ファイル内にあるファイル） lab3

CloudFront ディストリビューションを設定する

ディストリビューションの作成

  1. AWS コンソールの検索ボックスに CloudFront と入力し、CloudFront をクリックします。 lab3
  2. ディストリビューションを作成 をクリックします。 lab3または lab3
  3. 以下の通り設定を行います。
    1. オリジンドメインには、前の手順で設定した S3 バケットを選択します。
    2. S3 バケットアクセスは、はい、OAI を使用しますを選択します。
    3. 新しい OAI を作成を選択し、デフォルトのまま作成を選択します。
    4. バケットポリシーは、はい、バケットポリシーを更新しますを選択します。 lab3
    5. 下にスクロールしてビューワープロトコルポリシーに Redirect HTTP to HTTPS を選択します。 lab3
    6. 下にスクロールしてデフォルトルートオブジェクト-オプションに CCPCourse.html と入力します。
    7. 一番下までスクロールしてディストリビューションを作成をクリックします。 lab3
  4. ディストリビューションの一覧に戻り、ステータスが有効に変化したらドメイン名をエディタ等にコピーします。 lab3
  5. CloudFront で生成されたドメイン名を、ブラウザの別のタブに入力して開きます。ここではカスタム CCP を表示できますが、必要な設定が完了していないのでまだ機能しません。 lab3

CloudFront へのアクセスを許可する

Amazon Connect 内のオリジンをホワイトリストに登録する

  1. Amazon Connect 管理コンソールに入り、作成した Amazon Connect インスタンスを選択し、承認済みオリジンをクリックします。 lab3
  2. +オリジンの追加をクリックします。オリジンURLの入力欄に、CloudFront で生成されたドメイン名にhttps://を付けて入力し、[追加]をクリックします。この時、末尾に/を付与していると追加ボタンがグレイアウトしますので注意してください。 lab3
  3. 承認済みオリジンに CloudFront で生成したドメイン名が表示されていることを確認します。 lab3

テスト

カスタム CCP ウェブサイトにアクセスする

  1. Chrome または Firefox ブラウザを開き、上記の手順で承認済みオリジンに登録した CloudFrontドメイン URL を開きます。

    ブラウザがポップアップブロックを通知した場合、このドメインに対して許可を行ってください。また、マイクの利用許可を通知してきた場合も許可してください。


  2. ブラウザの別のウインドウ、またはタブで Amazon Connect のログイン画面が開くため、作成したエージェントのログイン名とパスワードを入力し、サインインをクリックします。
  3. ログインに成功するとウィンドウが閉じ、サンプルのカスタム CCP がログイン状態となります。 lab3

カスタム CCP － エージェントコントロール

  1. Agent Controls の下に4つのボタンが表示されます。
    1. Set Ready
    2. Set Offline
    3. Answer Call
    4. Drop Call
  2. エージェントは Avaliable と Offline の2つの状態があります。エージェントの状態を変更するには Agent Controls の Set Ready および Set Offline ボタンを使用します。

取得したAmazon Connectの電話番号にテストコールを発信する

  1. Set Readyボタンをクリックして、エージェントを Available 状態であることを確認します。携帯電話等から、Amazon Connect の Custom-CCP コンタクトフローに割り当てた DID 番号にテストコールを行います。
  2. 電話が繋がるとプロンプトメッセージが再生され、Ringing 状態を反映してカスタム CCP の Answer Call ボタンが緑色に変わります。Contact Attributes に表示されているのはコンタクトフローで設定した顧客名と、着信した電話番号です。 lab3
  3. 開発者コンソールでは、呼び出し中の状態に対応する Streams API JavaScript ファイルから状態の変更とログを確認できます。Answer Call ボタンを選択すると、接続状態が表示されます。
  4. 通話が接続され Busy 状態になると、Agent Controls が変化し Drop Call により通話が切断可能になります。 lab3
  5. 通話が切断されると、ユーザーのパラメータで設定した3秒のアフターコールワーク後に、Agent Status が Available 状態に戻ります。