4-4.コール先番号とキュー名の表示

複数の窓口電話番号を持ったコンタクトセンターにおいて、同じエージェントが受付業務を行っている場合、顧客がどの番号にコールし、どのキューに並んだかに応じて、エージェントは応対を変える必要があります。
この章ではカスタム CCP に顧客が電話をかけた番号とキューを表示させる方法を紹介します。 lab3

html ファイルの編集

  1. CCPCource.html を開き、Contact Attributes に情報表示欄を追加します。
  2. attributesDiv 内の Phone Number 欄の後に、Dialed Number と Queue Name を追加し、上書き保存します。
<tr>
  <td>
	<label for="dnisNumber" style="width: 128px;">Dialed Number: </label>
  </td>
  <td>
	<input name="dnisNumber" type="text" id="dnisNumber" placeholder="E.164 Format" style="width:129px">
  </td>
</tr>
<tr>
  <td>
	<label for="queueName" style="width: 128px;">Queue Name: </label>
  </td>
  <td>
	<input name="queueName" type="text" id="queueName" placeholder="Queue Name" style="width:250px">
  </td>
</tr>

js ファイルの編集

  1. CCPCourse.js　を開きます。
  2. loadCCP 関数内の var 定義で、以下の2行を追加します。
var dnisNumberField = document.getElementById("dnisNumber");
var queueNameField = document.getElementById("queueName");
  1. showAttributes 関数に以下を追加します。エージェントにコールが着信した際に表示する項目を追加しています。
queueNameField.value = contact.getQueue().name;

if(attributes.NumberDialed) {
	dnisNumberField.value = attributes.NumberDialed.value;
}

S3 バケットのファイルを更新する

  1. この章で更新した以下の2つのファイルを、4-1 で作成した S3 バケットにアップロードし、上書きします。
  2. CCPCourse.js
  3. CCPCourse.html lab3

テスト

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

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

テストコールを発信する

  1. Set Ready ボタンをクリックして、エージェントを Available 状態であることを確認します。携帯電話等から、Amazon Connect の Custom-CCP コンタクトフローに割り当てた DID 番号にテストコールを行います。
  2. Contact Attributes が変化し、Dialed Number にコール先の電話番号、Queue Name に並んだキューが表示されます。 lab3
  3. 確認したら、通話を切断します。

このラボで更新したファイルのサンプルはこちらです。