背景
仕事でAmazonConnectを使っているのですが、ある時担当の人から「受電画面に特定のURLを表示できないですか」と聞かれました。
受電画面はAmazonConnectが提供しているものなのでSPAみたいにフロントエンドで画面をカスタマイズして、受電ページの部分だけ埋め込むみたいなことしか出来ないと最初回答していたのですが、よくよく調べるとAmazonConnectのStreamsAPIというのを使うと色々カスタマイズが出来るらしいというのがわかったのでやってみました。
AmazonConnect StreamsAPI
https://github.com/amazon-connect/amazon-connect-streams
StreamsAPIはAmazonConnectのCCP（Contact Control Panel）のUIコンポーネントを提供するもので、自分で用意したWebページに埋め込みをすることができます。
ということで下記クラメソさんの記事を参考に試してみることにしました。
https://dev.classmethod.jp/articles/amazon-connect-extended-ccp/
ソース
下記単一のHTMLをS3へアップロードします。
amazon-connectのJSはGitHubの手順通りにmakeして吐き出されたファイルを一緒にアップロードします。
<br /><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>amazon connect stream sample</title>
<script type="text/javascript" src="amazon-connect-1.4.7-2-gb2c0c04.js"></script>
</head>
<body>
<table>
<tr>
<td>
<div id="containerDiv" style="width: 320px; min-width: 200px; height: 465px; min-height: 400px;"></div>
</td>
</tr>
<tr>
<td>
<a id="logtextarea" target=_blank>ここに動的なリンク</a>
</td>
</tr>
</table>
<script>
//CCPのURLを設定する
var ccpUrl = "https://test-inamuu-connect.awsapps.com/connect/ccp#/";
//CCPをロードする
connect.core.initCCP(containerDiv, {
ccpUrl: ccpUrl,
loginPopup: true,
softphone: {
allowFramedSoftphone: true
}
});
//URLのリンクを変更する
function writeLog(message) {
var logtextarea = document.getElementById('logtextarea');
logtextarea.href = message;
};
//コンタクトイベントのサブスクライブ設定
connect.contact(function(contact) {
//有効なコネクションがあるかどうかチェック
if (contact.getActiveInitialConnection() && contact.getActiveInitialConnection().getEndpoint()) {
var conn = contact.getActiveInitialConnection();
var phoneNumber = contact.getActiveInitialConnection().getEndpoint().phoneNumber;
}
var attrJson = contact.getAttributes();
var jsonText = JSON.stringify(attrJson);
var jsonData = JSON.parse(jsonText);
var outputText = JSON.stringify(jsonData['orgUrl']['value']);
writeLog(outputText.replace(/[\"]/g,""));
});
</script>
</body>
</html>
JavaScriptが分からなすぎて、JSONの箇所が大変微妙な感じになっているので改善の余地はあるものの、上記で特定の文字列をaタグに埋め込むことができます。
orgUrlというkeyは、AmazonConnectの問い合わせフローで、問い合わせ属性の設定で定義した文字列になります。
ここで定義したkey,valueの値がオブジェクトとなって返ってくるので、それを加工してaタグに埋め込みしています。
画面
感想
AmazonConnectではウィスパーフローという、顧客、またはサポート担当者にしか聴こえない特定のガイダンスを流すことができます。
例えば、顧客が電話した後に数字を押すようなガイダンスを流し、１番を流したら、ユーザーが１番を押したことをサポート担当者に知らせてから受電させることもできますが、今回のStreamsAPIを使うことでもう少し応用的に使うことができ、特定のURL（サポート担当者が使うヘルプページ）を動的に表示させたり、もしかしたらLambdaと連携して顧客情報を画面に表示させたりすることもできるかと思います。
使い方はたくさんあると思うので、是非試してみてください。
コメントを投稿するにはログインしてください。