4-5.Next Agent ステータスの変更

エージェントが顧客との通話終了後、シフトの交代やミーティングなどで離席したいと考えている場合、アフターコールワーク後に一度受付可能状態に遷移してしまうと、その短い時間にキューで待っていた顧客からの着信が入ってしまうことがあります。
Amazon Connect では Next Agent Status 機能により、通話中に次のステータスを指定しておくことで、エージェントが受付可能状態を経由せず、直ちに別のステータスへ遷移することができます。ここでは、4-2 で作成したカスタム CCP の機能追加例として、アフターコールワーク後にステータスをオフラインに指定可能なボタンを追加します。 lab3

html ファイルの編集

  1. CCPCource.html を開き、操作するボタンを追加します。
  2. customCCPDiv 内の Set Ready/Set Offline ボタンを定義している箇所に、Next Offline ボタンを追加し、上書き保存します。
<tbody>
	<tr>
		<td>
			<button type="button" id="setReady" value="SetReady">Set Ready</button>
		</td>
		<td>
			<button type="button" id="setOffline" value="SetOffline">Set Offline</button>
		</td>
		<td>
			<button type="button" id="nextOffline" value="nextOffline">Next Offline</button>
		</td>
	</tr>
</tbody>

js ファイルの編集

  1. CCPCourse.js を開きます。
  2. loadCCP 関数内の var 定義で、以下の1行を追加します。
var nextofflineButton = document.getElementById("nextOffline");
  1. subscribeToAgentEvents 関数に以下を追加します。ボタンをクリックした際に使用する関数を定義しています。
$("#nextOffline").click(() => {
	gonextOffline();
});
  1. setButtonUi 関数内の case ごとに、以下の行を追加します。エージェントのステータスを条件( case )として、表示する色やボタンの有効/無効を変えています。通話中( Busy )時は Next Offline ボタンを赤色にして有効化し、それ以外のcaseでは白色で無効化しています。
  • case ‘Available’
  • case ‘Offline’
  • case ‘Ringing’
nextofflineButton.style.backgroundColor = '#FFFFFF';
nextofflineButton.style.color = '#000000';
nextofflineButton.disabled = true;
  • case ‘Busy’
nextofflineButton.style.backgroundColor = '#FF0000';
nextofflineButton.style.color = '#FFFFFF';	
nextofflineButton.disabled = false;
  1. 以下の関数を追加します。こちらは Next Offline ボタンを押した際のアクションを定義しています。内容は goOffline 関数とほぼ同じですが、enqueueNextStateにより Next Status であることを指定しています。
function gonextOffline() {
	var offlineState = window.myCPP.agent.getAgentStates().filter(function (state) {
		return state.type === connect.AgentStateType.OFFLINE;
	})[0];
	window.myCPP.agent.setState(offlineState, {
		success: function () {
			console.log('Succesfully set agent next status to Offline via Streams');
		},
		failure: function () {
			console.log('Failed to set agent next status to Offline via Streams');
		}
	},{enqueueNextState : true});
}

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. Answer Call ボタンを押し、通話が接続され Busy 状態になることを確認します。
  3. 通話中に Next Offline ボタンが赤くなり有効化されます。ボタンを押してください。 lab3
  4. 通話を切断します。アフターコールワーク後、Agent Status が Available ではなく Offline に遷移することを確認してください。 lab3

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