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

最終更新日: 2020 年 1 月 17 日

お客様が Amazon Connect コンタクトセンターに電話をかけ、エージェントが確認できるようにコンタクト属性を表示したいです。セットアップするにはどうすればよいですか?

簡単な説明

スクリーンポップを使用して、Amazon Connect コンタクトコントロールパネル (CCP) のエージェントに対する発信者のコンタクト属性を表示します。スクリーンポップは、Amazon Connect インスタンス CCP で直接使用することはできません。代わりに、Amazon Connect Streams API を使用して CCP をカスタムウェブアプリケーションに統合できます。詳細については、GitHub の Amazon Connect Streams リポジトリを参照してください。

次の手順通りに、通話のルーティング中にコンタクト属性を設定するコンタクトフローを設計します。次に、提供されたサンプルコードを使用して、サンプルウェブアプリケーションを作成します。このセットアップ例では、コンタクト属性値をテストとしてハードコードできます。より高度な設定の場合、AWS Lambda を使用して顧客情報の Amazon DynamoDB データベースへのデータディップを実行することで、コンタクト属性値を取得できます。

詳細については、CCP のコンタクト属性を使用およびコンタクト属性の概念を参照してください。別の設定例については、AWS コンタクトセンターブログの Amazon Connect で外部スクリーンポップを実行するを参照してください。

解決方法

コンタクトフローを作成または更新

  1. Amazon Connect コンソールの [アクセス URL] で、インスタンスのアクセス URL を選択します。
  2. 管理者アカウントを使用してインスタンスにログインします。
  3. 左ナビゲーションバーで、[ルーティング] を一時停止し、[コンタクトフロー] を選択します。
  4. [コンタクトフロー] で、更新するテンプレートまたは既存のコンタクトフローを選択するか、[コンタクトフローを作成] を選択してコンタクトフローを一から設計します。詳細については、新しいコンタクトフローを作成を参照してください。
    注意: スクリーンポップのサンプルノートテンプレートを使用できますが、スクリーンポップの設定では必須ではありません。
  5. コンタクトフローデザイナーの [名前を入力] に、コンタクトフローの名前を入力します。(例: スクリーンポップのコンタクト属性)
  6. [保存] を選択します。

詳細については、Amazon Connect コンタクトフローを作成を参照してください。

コンタクト属性の設定ブロックを追加する

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

  1. コンタクトフローデザイナーで、[設定] を選択し、[コンタクト属性を設定] ブロックをキャンバスにドラッグアンドドロップします。
  2. ブロックのタイトル (連絡先属性の設定) を選択します。ブロックの設定メニューが開きます。
  3. [保存する属性] で、[テキストを使用] を選択して、次の操作を行います。
    [送信先キー] に名前属性 (firstName) を入力します。
    [] にテスト用のサンプル名を入力します。例: Alexa
  4. [別の属性を追加] を選択します。
  5. 新しい属性で、[テキストを使用] を選択し、次の操作を行います。
    [送信先キー] に電話番号属性の名前 (phoneNumber) を入力します。
    [] にテスト用のサンプル電話番号を入力します。例: 123-456-7890
  6. [別の属性を追加] を選択します。
  7. 新しい属性で、[テキストを使用] を選択し、次の操作を行います。
    [送信先キー] にアカウント番号属性の名前 (accountNumber) を入力します。
    [] に、テスト用のサンプルアカウント番号を入力します。例: 9876543210
  8. [保存] を選択します。

コンタクトの転送を設定する

[作業キューを設定] ブロックと [キューに転送] ブロックを追加します。詳細については、コンタクト転送をセットアップを参照してください。

ブロックを接続する

問い合わせフローデザイナーで、各ブロックから次のアクションを実行するブロックに矢印をドラッグします。問い合わせフローを公開する前に、すべてのコネクタをブロックに接続する必要があります。

  • ブロックごとに、[開始] または [成功] を次のブロックに以下の順序で接続します。
    [エントリポイント] > [コンタクト属性を設定] > [作業キューを設定] > [キューに転送]
  • ブロックごとに、[エラー] と [キャパシティー] を [切断/ハングアップ] ブロックに接続します。

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

  1. [保存] を選択します。
  2. [フローを保存] ダイアログで、[保存] を選択します。
  3. [Publish] を選択します。
  4. [公開] ダイアログで、[公開] を選択します。

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

Streams API を使用して Amazon Connect CCP をカスタムウェブアプリケーションに統合します。ウェブページを使用した Streams API 設定の詳細については、GitHub の Amazon Connect Streams のドキュメントを参照してください。

このサンプルコードは、Amazon Simple Storage Service (Amazon S3) で静的ウェブサイトとしてホストされる基本的な HTML ファイルに CCP を統合します。エージェントが発信者に接続すると、スクリーンポップが表示されます。通話が承諾されたとき、またはエージェントにルーティングされたときに、スクリーンポップを表示することもできます。

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

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

<html>
<head>
 <script src="http://bucketName.s3-website-us-east-1.amazonaws.com/amazon-connect-v1.1.1-2-g0b8509c.js"></script>
</head>
<body>
<h1> Amazon Connect </h1>
<h2> Screenpop Example </h1>
<div id="containerDiv" ></div>
<script>
connect.core.initCCP(containerDiv, {
   ccpUrl:        'https://connectInstanceName.awsapps.com/connect/ccp#/',        /*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["name"]["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>

トラブルシューティング

Streams API の問題をトラブルシューティングするには、スクリプトで console.log() ステートメントを使用します。ウェブページで、ウェブブラウザの開発者ツールコンソールでログ出力を表示します。