[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;
}

4 最後に

今回は、amazon-connect-streamsにより、エージェント専用のページを作成して、ログインやユーザー名表示を実装してみました。

今後、このページを利用して、エージェントの作業を支援できる更なる拡張につなげていければという想定です。

弊社では、「Amazon Connect」の導入を検討している方を対象とした無料相談会を毎週開催中です。

また、音声を利用した各種ソリューションの導入支援を行っております。お気軽にお問い合わせください。

チャットボット開発支援

AWS