Amazon Connect スクリーンポップに発信者のコンタクト属性を表示するにはどうすればよいですか?

所要時間3分

Amazon Connect コンタクトセンターのエージェントが、着信するカスタマーコールの連絡先属性を確認できるようにしたいと考えています。設定する方法を教えてください。

簡単な説明

Amazon Connect Contact コントロールパネル (CCP) でエージェントの発信者の連絡先属性を表示するには、screenpop を使用します。

Amazon Connect でスクリーンポップを使用するには、Amazon Connect Streams API を使用して CCP をカスタムアプリケーションに統合する必要があります。スクリーンポップは CCP で直接利用できません。

この記事で例示する手順では、次の手順を実行して CCP で発信者のコンタクト属性を表示する方法を示します。

問い合わせフローを作成または更新して、コールルーティング中にコンタクト属性を設定します。
カスタム Web アプリケーションで Amazon Connect インスタンスの CCP を設定します。

詳細については、「CCP でコンタクト属性を使用する」を参照してください。

解決方法

注: このセットアップ例では、コンタクト属性値をテストとしてハードコードできます。より高度なセットアップでは、AWS Lambda を使用して Amazon DynamoDB データベースから顧客情報を取得することで、コンタクト属性値を取得できます。同様の例については、Amazon Connect コンタクトセンターでエージェント間コールの内線番号を設定するにはどうすればよいですか。

コールルーティング中にコンタクト属性を設定するための問い合わせフローを作成または更新する

問い合わせフローデザイナーで新しい問い合わせフローを作成するか、既存の問い合わせフローを開く

1. Amazon Connect コンソールを開きます。

2. [Access URL] (アクセス URL) で、Amazon Connect インスタンスのアクセス URL を選択します。

3. 管理者アカウントを使用してインスタンスにログインします。

4. 左側のナビゲーションペインで、[Routing] (ルーティング) にカーソルを合わせます。その後、[Contact flows] (問い合わせフロー) を選択します。

5. [Contact flows] (問い合わせフロー) で、更新するテンプレートまたは既存の問い合わせフローを選択します。
注: Amazon Connect でスクリーンポップのサンプルノートテンプレートを使用できますが、スクリーンポップの設定では必須ではありません。

または -

カスタム問い合わせフローを設計するには、[Create contact flow] (問い合わせフローの作成) を選択します。

6. 問い合わせフローデザイナーの [Enter a name] (名前の入力) に、問い合わせフローの名前を入力します。例: Contact attributes for screenpop。

7. [Save] (保存) を選択します。

詳細については、Create a new contact flow を参照してください。

問い合わせ属性の設定ブロックを追加する

重要: このブロックで定義するコンタクト属性は、カスタムウェブアプリケーションに使用する HTML ファイルで参照する必要があります。

キーと値のペアをコンタクト属性として保存するには、[Set contact attributes] (コンタクト属性の設定) ブロックを使用します。

1. 問い合わせフローデザイナーで、[Set] (設定) を選択します。その後、コンタクト属性の設定ブロックをキャンバスにドラッグアンドドロップします。

2. ブロックのタイトルを選択します ([Set contact attributes] (コンタクト属性の設定))。ブロックの設定メニューが開きます。

3. [Attribute to save] (保存する属性) で、[Use text] (テキストの使用) を選択します。その後、以下を実行します。
[Destination key] (送信先キー) に名前属性 (firstName) を入力します。
[値] にテスト用のサンプル名を入力します。例えば、Alexa と入力します。

4. [Add another attribute] (別の属性を追加) を選択します。

5. 新しい属性で、[Use text] (テキストを使用) を選択します。その後、以下を実行します。
[Destination key] (送信先キー) で、電話番号属性の名前を入力します。例えば、phoneNumber と入力します。
[Value] (値) で、テスト用のサンプル電話番号を入力します。例: 123-456-7890。

6. [Add another attribute] (別の属性を追加) を選択します。

7. 新しい属性で、[Use text] (テキストを使用) を選択します。その後、以下を実行します。
[Destination key] (送信先キー) で、アカウント番号属性の名前を入力します。例: accountNumber。
[Value] (値) で、テスト用のサンプルアカウント番号を入力します。例: 9876543210。

8. [Save] (保存) を選択します。

[Transfer to queue] (キューへ転送) ブロックを追加する

現在の問い合わせフローを終了し、顧客をキューに入れるには、[Transfer to queue] (キューへ転送) ブロックを追加します。

詳細については、Set up contact transfers を参照してください。

[Set working queue] (作業キューの設定) ブロックを追加する

[Transfer to queue] (キューへ転送) ブロックが呼び出されるときに使用するキューを指定するには、[Set working queue] (作業キューの設定) ブロックを追加します。

詳細については、Set up contact transfers を参照してください。

ブロックを接続する

重要: 問い合わせフローを公開する前に、すべてのコネクタをブロックに接続する必要があります。

問い合わせフロー設計ツールで、以下のアクションを実行して、各ブロックから次のアクションを実行するブロックに矢印をドラッグします。

1. ブロックごとに、Start または Success を次のブロックに以下の順序で接続します。
[Entry point] (エントリポイント) > [Set contact attributes] (コンタクト属性を設定) > [Set working queue] (作業キューを設定) > [Transfer to queue] (キューに転送)

2. ブロックごとに、Error および At capacity を [Disconnect / hang up] (切断/ハングアップ) ブロックに接続します。

問い合わせフローを保存して公開する

1. [Save] (保存) を選択します。

2. [Save flow] (フローを保存) ダイアログで、[Save] (保存) を選択します。

3. [Publish] (公開) を選択します。

4. [Publish] (公開) ダイアログで、[Publish] (公開) を選択します。

カスタムウェブアプリケーションで Amazon Connect インスタンスの CCP をセットアップする

インスタンスの CCP をカスタムウェブアプリケーションに統合するには、GitHub の Amazon Connect Streams ドキュメントの指示に従います。

エージェントが発信者に接続したときにスクリーンポップを表示する Amazon Connect Streams API コードの例

次のサンプルコードは、Amazon Simple Storage Service (Amazon S3) で静的ウェブサイトとしてホストされているベーシックな HTML ファイルに CCP を統合します。

重要: コンタクトフローのコンタクト属性を設定のブロックで定義した必要なコンタクト属性を参照するために、必要に応じてこのサンプルコードを変更します。また、bucketName を S3 バケット名に置き換え、connectInstanceName を Amazon Connect インスタンス名に置き換えます。詳細については、バケットへのアクセスと Launch the CCP を参照してください。

<!--Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.-->
<!--SPDX-License-Identifier: MIT-0-->

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://bucketName.s3-website-us-east-1.amazonaws.com/connect-streams-min.js"></script>
</head>
<body>
<h1> Amazon Connect </h1>
<h2> Screenpop Example </h1>
<div id="containerDiv" ></div>
<script>
connect.core.initCCP(containerDiv, {
   ccpUrl:        'https://my-instance-domain.awsapps.com/connect/ccp-v2/',        /*REQUIRED (*** has been replaced) */
   loginPopup:    true,          /*optional, default TRUE*/
   softphone:     {              /*optional*/
      allowFramedSoftphone: true
   }
});
connect.contact(function(contact) {

        contact.onIncoming(function(contact) {
        });

        contact.onRefresh(function(contact) {
        });

        contact.onAccepted(function(contact) {
        });

        contact.onEnded(function() {
        });

        contact.onConnected(function() {
                console.log(`onConnected(${contact.getContactId()})`);
                var attributeMap = contact.getAttributes();
                var name = JSON.stringify(attributeMap["firstName"]["value"]);
                var phone = JSON.stringify(attributeMap["phoneNumber"]["value"]);
                var account = JSON.stringify(attributeMap["accountNumber"]["value"]);
                console.log(name);
                console.log(phone);
                console.log(account);
                window.alert("Customer's name: " + name + "\nCustomer's phone #: " + phone + "\nCustomer's account #: " + account);

        });
});
</script>
</body>
</html>

注: 通話が承諾されたとき、またはエージェントにルーティングされたときに、スクリーンポップを表示するように設定することもできます。

Amazon Connect ストリーム API に関する問題をトラブルシューティングするには

スクリプトで console.log() ステートメントを使用します。ウェブページで、ウェブブラウザのデベロッパーツールのコンソールでログ出力を表示します。

詳細については、MDN Web Docs ページの console.log() を参照してください。

Amazon Connect スクリーンポップに発信者のコンタクト属性を表示するにはどうすればよいですか?

簡単な説明

解決方法

コールルーティング中にコンタクト属性を設定するための問い合わせフローを作成または更新する

カスタムウェブアプリケーションで Amazon Connect インスタンスの CCP をセットアップする

Amazon Connect ストリーム API に関する問題をトラブルシューティングするには

関連情報

関連ビデオ

関連するコンテンツ