この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
CX事業本部の平内（SIN）です。
Amazon Connect(以下、Connect)では、先月から、音声での対応に加えて、チャットでの利用も可能になっています。
今回は、Amazonで提供されている、下記のチャットクライアントの設置を試してみました。
上記のリポジトリでは、CFnも提供されており、設置するだけなら超簡単なのですが、ちょっと仕組みを確認したかったのと、少しでも理解が深まるようにと、CFnを使用せずに設置してみました。
最初に、利用している様子です。
2 インスタンス・コンタクトフロー
チャット設置には、対象となるConnectのインスタンス及び、接続先のコンタクトフローを最初に用意することが必要です。
ここで、コンタクトフローは、先日、作成した下記のものを使用しました。
[Amazon Connect] チャットに対応するコンタクトフローを作成してみました。
チャットクライアントから接続されると、20秒間待機し、何らかのキー入力があった時点でエージェントに繋ぐものとなっています。
問い合わせフローの開くと、左にフローのarnを表示させることができます。 形式は、下記のようになっているので、インスタンスID及び、フローIDをここでコピーしておきます。
arn:aws:connect:{リージョン}:{アカウント}:instance/{インスタンスID}/contact-flow/{フローID}
3 Lambda
問い合わせフローを開始して、新しいチャットを開始するには、startChatContactAPIを使用します。
var params = {
InstanceId: instanceId,
ContactFlowId: contactFlowId,
Attributes: {
customerName: customerName
},
ParticipantDetails: {
DisplayName: displayName
}
};
const result = await connect.startChatContact(params)このAPIは、インスタンスID、フローID及び、顧客の名前等を引数にとり、接続に必要なトークン等を返します。
下記は、レスポンスの一例です。
{
ContactId: "4012d973-xxxx-xxxx-xxxx-970f45fccc5a",
ParticipantId: "d3b7da64-xxxx-xxxx-xxxx-68e6673476f2",
ParticipantToken: "token"
}今回試しているstartChatContactAPIでは、このstartChatContactをLambdaで実装し、API Gateway経由で、クライアントのJavaScriptから呼び出しています。
Githubのコードを参考に、下記のLambdaを設置しました。
Lambdaの戻り値では、ブラウザ側のJavaScriptで利用可能なように、CORS用のヘッダが追加されていますが、ここでは、いったん対象ドメインを*で指定しています。
AmazonConnectChatTest
const AWS = require('aws-sdk');
const connect = new AWS.Connect();
const instanceId = '7d0290d7-xxxx-xxxx-xxxx-ef397afa108d';
const contactFlowId = '14954dcd-xxxx-xxxx-xxxx-17e5b7f2a3f6';
const customerName = 'customer';
const displayName = 'customer';
const allowOrigin = '*';
exports.handler = async (event, _context) => {
console.log(`REQUEST ${JSON.stringify(event)}`);
var params = {
InstanceId: instanceId,
ContactFlowId: contactFlowId,
Attributes: {
customerName: customerName
},
ParticipantDetails: {
DisplayName: displayName
}
};
try {
const result = await connect.startChatContact(params).promise();
return createResponse(200, result);
} catch(err) {
return createResponse(500, err);
}
};
function createResponse(statusCode, result) {
const response = {
statusCode: statusCode,
headers: {
"Access-Control-Allow-Origin": allowOrigin,
'Content-Type': 'application/json',
'Access-Control-Allow-Credentials' : true,
'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
},
body: JSON.stringify({
data: { startChatResult: result }
})
};
console.log(`RESPONSE statucCode: ${statusCode} result: ${JSON.stringify(response)}`);
return response;
}Lambdaには、ConnectのAPIをコールするため、通常のCloudWatch Logへのアクセス以外に、下記のパーミッションが必要です。
{
"Action": [
"connect:StartChatContact"
],
"Resource": [
"arn:aws:connect:{リージョン}:{アカウント}:instance/{インスタンスID}",
"arn:aws:connect:{リージョン}:{アカウント}:instance/{インスタンスID}/*"
],
"Effect": "Allow"
}4 API Gateway
API Gatewayでは、POSTを受け取るリソースを作成し、プロキシ統合で上記のLambdaへ繋いでいます。
5 amazon-connect-chat-interface.js
設置したhtmlは、以下のとおりです。こちらも、Guithubのコードをほとんど、そのまま利用させて頂いています。
amazon-connect-chat-interface.jsを使用していますので、読み込めるところに配置の必要があります。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="amazon-connect-chat-interface.js"></script>
</head>
<body>
<form name="contactDetails" id="contactDetails">
<input type="submit" class="submit" id="startChat" value="Start Chat"></input>
</form>
<div class="section-chat" id="section-chat" style="display: none; width: 50%;">
<div id="root"></div>
</div>
<script>
const apiGatewayEndpoint = 'https://ggi242o24i.execute-api.ap-northeast-1.amazonaws.com/dev';
const region = 'ap-northeast-1';
const customerName = 'customer';
$(document).ready((a) => {
connect.ChatInterface.init({
containerId: 'root'
});
});
$(function () {
$('#contactDetails').submit(function (e) {
e.preventDefault();
document.getElementById("contactDetails").reset();
connect.ChatInterface.initiateChat({
name: customerName,
region: region,
apiGatewayEndpoint: apiGatewayEndpoint,
contactAttributes: JSON.stringify({
"customerName": customerName
}),
},successHandler, failureHandler);
});
});
function successHandler(chatSession) {
console.log("success!");
$('#section-chat').fadeIn(400);
chatSession.onChatDisconnected(function(data) {
$('#section-chat').hide('slide');
});
}
function failureHandler(error) {
console.log("There was an error: ");
console.log(error);
}
</script>
</body>6 最後に
Connectの新しいチャンネルとして追加されたチャットですが、amazon-connect-chat-interface.jsを利用することで、Webサイトに容易に設置が可能です。
なお、amazon-connect-chat-interface.jsは、UIを自前で準備する使い方もできるようですので、次回、そちらも試してみたいと思います。
40
