[Amazon Connect] amazon-connect-streamsを使用して、CCPにLOGINボタンとユーザー表示を追加してみました。

SIN

2019.02.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

AIソリューション部の平内（SIN）です。

Amazon Connect(以下、Connect)では、デフォルトのエージェントとしてログインすると、CCPだけのウインドが表示されます。

今回は、amazon-connect-streams を使用したCCPの拡張で、エージェント専用のページを作成してLOGINボタンや、ログイン中のユーザー名を表示するようにしてみました。

下記は、LOGINボタンでログインしているよう様子です。

2 amazon-connect-streams

amazon-connect-streamsによる実装は、以下のとおりです。

agentの状態変化イベントで、ユーザー名を取得しています（①）。ログインとログアウトのイベントは、connect.core.getEventBus()にsubscribe()することで取得できます（②）。

ログインボタンを押したときは、別ウインドウでログインURLを表示し、そのウインドウを取得しておきます（③）。そして、このウインドウは、Loginイベントで削除しています。

なお、ログアウトで location.reload(); していますが、これがないと、２回目以降のログインで、イベントが取得できなくなるようです（④）。

connect.core.initCCP()のloginPopupパラメータがtrueだと、ログインしていないと、自動的にログイン画面がポップアップするので、今回は、falseに設定しています（⑤）。

const ccpUrl = "https://example.awsapps.com/connect/ccp#/";
connect.core.initCCP(containerDiv, {
ccpUrl: ccpUrl,
loginPopup: false, // ログイン画面をポップアップしない(⑤)
softphone: {
allowFramedSoftphone: true
},
});
connect.agent(function(agent) {
// ユーザ名の取得（①）
const config = agent.getConfiguration();
$("#user_name").text(config.username);
});

// ログイン・ログアウトのイベント処理（②）
let bus = connect.core.getEventBus();
bus.subscribe(connect.EventType.TERMINATED, function () {
$('#user_name').text('');
$('#login_button').show();
// 画面のリロード（④）
location.reload();
});
bus.subscribe(connect.AgentEvents.INIT, function (){
$('#login_button').hide();
handleWin.close();
});

function login() {
// ログイン画面の表示（③）
handleWin = window.open('https://example.awsapps.com/connect/login?');
}

amazon-connect-streamsの基本的なセットアップ要領については、下記のページで纏めていますので、そちらをご参照下さい。

3 htmlとcss

上記と重複しますが、htmlとsccの全部を記載させて頂きます。

<br /><br /><br /><br /><script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="amazon-connect-1.3.js"></script>

 
<div id="header"><button id="login_button">Login</button>
<div id="user_name"></div>
</div>
 
<div id="containerDiv" style="width: 320px; height: 465px;"></div>
 

<script type="text/javascript">
    const ccpUrl = "https://example.awsapps.com/connect/ccp#/";
    connect.core.initCCP(containerDiv, {
        ccpUrl:        ccpUrl,
        loginPopup:    false, // ログイン画面をポップアップしない
        softphone: {
            allowFramedSoftphone: true
        },
    });
    connect.agent(function(agent) {
        const config = agent.getConfiguration();
        $("#user_name").text(config.username);
    });

    let bus = connect.core.getEventBus();
    bus.subscribe(connect.EventType.TERMINATED, function () {
        $('#user_name').text('');
        $('#login_button').show();
        location.reload();
    });
    bus.subscribe(connect.AgentEvents.INIT, function (){
        $('#login_button').hide();
        handleWin.close();
    });

    function login() {
        handleWin = window.open('https://example.awsapps.com/connect/login?');
    }
</script>

body {
padding: 0px;
margin:0;
}

#header {
width:100%;
color: white;
background-color: seagreen;
font-weight: bold;
padding:10px;
}

#user_name {
display:inline;
}

#login_button {
width:100px;
height:25px;
font-size: 15px;
}

#containerDiv {
padding: 20px;
}