Amazon Connect Streams API（以下、AC Streams）は、Amazon Connectのカスタマーコンタクトポータル (以下、CCP) をカスタマイズするためのJavaScriptライブラリです。
AC StreamsのライブラリはGitHubやnpmで公開されています。このライブラリを使用することで、Amazon ConnectのCCPが持つ機能に付け足してもっと使いやすくカスタムしたり、デザインを好きに変えたりできます。
この記事では、HTMLとJavaScriptでカスタムCCPを作る方法を紹介します。
Amazon Connect Streamsのセットアップ
ローカル環境で、HTMLとJavaScriptを使って開発していきます。
mkdir sample-ccp
cd sample-ccp
npmでamazon-connect-streamsのライブラリをインストールします。
また、ローカルで動作確認するために、http-serverもインストールしておきます。
npm install amazon-connect-streams
npm install http-server
HTMLファイルを作成します。
touch sample.html
フォルダ構成は以下のようになります。
.
├── node_modules/
├── package.json
├── package-lock.json
└── sample.html
以下のコードをsample.htmlに貼り付け、(instance-domain)を自身のインスタンス名に変更してください。
こちらのコードは下記記載のコードを簡略化したものです。
https://github.com/amazon-connect/amazon-connect-streams/tree/master#initialization
<!-- sample.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset=\"UTF-8\">
<!-- srcにconnect-streams-min.jsへのパスを追加 -->
<script type=\"text/javascript\" src=\"./node_modules/amazon-connect-streams/release/connect-streams-min.js\"></script>
</head>
<body onload=\"init()\">
<div id=\"container-div\" style=\"width: 400px; height: 800px;\"></div>
<script type=\"text/javascript\">
var containerDiv = document.getElementById(\"container-div\");
// (instance-domain)を、インスタンス名に変更する
var instanceURL = \"https://(instance-domain).my.connect.aws/ccp-v2/\";
function init() {
connect.core.initCCP(containerDiv, {
ccpUrl: instanceURL,
loginPopup: true,
loginPopupAutoClose: true,
loginOptions: {
autoClose: true,
height: 600,
width: 400,
top: 0,
left: 0
},
region: \"ap-northeast-1\", // インスタンスのリージョンを指定
});
}
</script>
</body>
</html>
package.jsonの中に以下のscriptsコマンドを追加し、localhostでアプリを起動できるようにしてください。
{
\"scripts\": {
\"dev\": \"http-server . --port 8020\"
},
\"dependencies\": {
\"amazon-connect-streams\": \"^2.6.1\"
},
\"devDependencies\": {
\"http-server\": \"14.1.1\"
}
}
devコマンドを実行すると、http://localhost:8020 でアプリが起動します。
npm run dev
Amazon Connectのインスタンス設定画面の「承認済みオリジン」にhttp://localhost:8020 を追加してください。画面右上の「ドメインを追加」から追加できます。
http://localhost:8020/sample.html にアクセスすると、Amazon Connectのログイン画面がポップアップされます。ポップアップ画面でログイン後、CCPが埋め込まれたページが表示されます。
ポップアップが表示されない場合は、画面を開き直すか、同じブラウザの別タブから、https://(instance-domain).my.connect.aws/ccp-v2/ でAmazon Connectにログインをしてください。
Amazon Connect Streamsを使ってみる
ここまでで、AC Streamsを初期化してブラウザに標準的なCCPを埋め込むことができました。
次に、AC StreamsのAPIを使って発信ボタンと応答ボタンを作ります。
発信ボタン
まず、ページがロードされた時に実行される init 関数において、agentConnectionのオブジェクトを取得します。このオブジェクトを使って発信処理をします。agentConnectionは、エージェントがAmazon Connectと接続するために使われます。
var agentConnectionObject;
function init() {
\t// ...
\t
\tconnect.agent((agent) => {
\t\tagentConnectionObject = agent;
\t});
}
agentConnectionObjectを使って発信ボタンを実装します。
<body onload=\"init()\">
\t<div>
<input type=\"tel\" id=\"phoneNumber\" required />
<button onclick=\"outbound()\">発信</button>
</div>
</body>
<script type=\"text/javascript\">
\tvar agentConnectionObject;
function init() {
// ...
}
\tfunction outbound() {
\t\tconst phoneNumber = document.getElementById(\"phoneNumber\").value;
\t\tconst endpoint = connect.Endpoint.byPhoneNumber(phoneNumber);
\t\tagentConnectionObject.connect(endpoiint);
\t}
</script>
発信ボタンを押すと、フォームに入力された電話番号に基づいてエンドポイントを作成し、接続を開始します。電話番号は国際形式にする必要があります (例：080-1234-5678 → +818012345678)。
応答ボタン
次は、init関数でcontactオブジェクトを取得します。このオブジェクトを使って応答処理をします。
var contactObject;
function init() {
function init() {
// ...
}
// ...
\t
\tconnect.contact((contact) => {
\t\tcontactObject = contact;
\t});
}
contactObjectを使って発信ボタンを実装します。
<body onload=\"init()\">
\t<div>
<button onclick=\"acceptCall()\">応答</button>
</div>
</body>
<script type=\"text/javascript\">
\tvar contactObject;
\t// ...
\tfunction acceptCall() {
\t\tcontactObject.accept()
\t}
</script>
これで、エージェントにかかってきた電話に応答できるようになります。
【まとめ】Amazon Connect Streamsを使ってカスタムCCPを作る
この記事では、AC Streamsを使ってJavaScriptでカスタムCCPを作る方法を紹介しました。
自身でカスタマイズする場合、発信や応答などの処理を自分で書く必要がありますが、発信時に顧客情報を取得したり、応答時に外部CRMと連携したりできます。
初期の開発コストは高いかもしれませんが、自社のコールセンターに適したCCPの開発が可能になります。
