はじめに
Amazon Connect を使用することでコールセンターを簡単に実装することができます。
実装方法については他の方も記事にしているため割愛とさせていただきます。
今回は自身で開発している Web アプリケーションに Amazon Connect を埋め込んで発信・切断できるようにサンプルアプリを作りましたので紹介します。
動作
以下のような動作をするサンプルアプリケーションを作成します。
- 発信ボタンをクリックすると、入力フォームに入力した電話番号へ発信する
- 切断ボタンをクリックすると、通話中の電話が切断される
Amazon Connect 読み込み（html）
下記のHTMLが基本となる形となります。
電話番号入力欄、発信ボタン、切断ボタンを作成し、ビルドしたamazon-connect-1.4.1.jsを読み込み、発信・切断コントロール用のsample.jsを読み込みます。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>OutBound Demo</title>
</head>
<body>
<div id="containerDiv" style="display: none;"></div>
<input id="phone_number"></button>
<button id="dial">発信</button>
<button id="hangUp">切断</button>
</body>
</html>
<!-- GitHub: Getting Started を参考にして amazon-connect-1.4.1.js ファイルをビルドしてください -->
<!-- https://github.com/amazon-connect/amazon-connect-streams/tree/1.5.1#getting-started -->
<script src="./amazon-connect-1.4.1.js"></script>
<!-- 発信・切断コントロール用 -->
<script src="./sample.js"></script>
発信・切断コントロール
以下の Amazon Connect のドキュメントを参考にして作成しました。
発信メソッドagent.connect()と切断メソッドconnect.contact()のところだけでも見ていただけると理解が深まると思います。
- Amazon Connect Streams Documentation
sample.js
// 初期化処理
connect.core.initCCP(containerDiv, {
ccpUrl: "https://インスタンスの名前.awsapps.com/connect/ccp#/",
loginPopup: true,
loginOptions: { // optional, if provided opens login in new window
autoClose: true, // optional, defaults to `false`
height: 600, // optional, defaults to 578
width: 400, // optional, defaults to 433
top: 0, // optional, defaults to 0
left: 0 // optional, defaults to 0
},
region: "ap-northeast-1",
softphone: {
disableRingtone: false,
ringtoneUrl: null,
allowFramedSoftphone: true
}
});
// 発信ボタンを押すと、input フォームに入力された電話番号へ発信
connect.agent(function (agent) {
document.getElementById('dial').onclick = function() {
var phoneNumber = document.getElementById('dial').value;
phoneNumber = '+81' + phoneNumber.slice( 1 );
// endpoint インスタンス作成 （電話番号を指定してください）
var endpoint = connect.Endpoint.byPhoneNumber(phoneNumber);
// endpoint インスタンスを作成時に endpointARN と endpointId が取得されない場合は以下を実行してください
// var ARNs = agent.getAllQueueARNs();
// console.log(ARNs)
// ARNs で取得した endpointARN と endpointId を以下に入力してください
// endpoint.endpointARN = "arn:aws:connect:<REGION>:<ACCOUNT_ID>:instance/<CONNECT_INSTANCE_ID>/transfer-destination/<TRANSFER_ID>";
// endpoint.endpointId = "arn:aws:connect:<REGION>:<ACCOUNT_ID>:instance/<CONNECT_INSTANCE_ID>/transfer-destination/<TRANSFER_ID>";
// Amazon Connect キューインスタンスから取得することができます。
var queueArn = "arn:aws:connect:<REGION>:<ACCOUNT_ID>:instance/<CONNECT_INSTANCE_ID>/queue/<CONNECT_QUEUE_ID>";
agent.connect(endpoint, {
queueARN: queueArn,
success: function() { console.log("outbound call connected"); },
failure: function(err) {
console.log("outbound call connection failed");
console.log(err);
}
});
}
});
// 切断ボタンが押されたら、電話を切る
connect.contact(function (contact) {
var conn = contact.getActiveInitialConnection();
document.getElementById('hangUp').onclick = function() {
conn.destroy({
success: function() {
console.log("disconnected");
sleep(2000);
location.reload();
},
failure: function(err) {
console.log("disconnection failed");
console.log(err);
}
});
};
});
まとめ
業務を効率化することを目的にするのであれば、そもそも電話なんてやめた方がいいとは思うものの、DXを本気でやるのは難しいので仕方ないのかなぁと・・・。
どなたかの参考になれば嬉しいです。
参考
- 【Amazon Connect】在宅コールセンター向けにCCP（発着信画面）をカスタマイズする