kashinoki38 blog

something like tech blog

トップ > AWS > Amzon Connect Streams API を使って Contact ID、開始終了時刻、エージェント名をソフトフォンと共に表示する

Amzon Connect Streams API を使って Contact ID、開始終了時刻、エージェント名をソフトフォンと共に表示する

AWS Amazon Connect

クラウド型のコンタクトセンターである Amzon Connect では、ソフトフォンを Streams API という JavaScript のライブラリを使うことでカスタムすることができる。
エージェントが、Contact IDや開始終了時刻をメモっておくために、ソフトフォン上に情報を出せるようなサンプル実装を調査したののメモ。

Amzon Connect Streams API

ライブラリはこちら。ドキュメントもあります。

github.com

簡単に実装方法

仕組み

CloudFront + S3 で Streams API を使った JS が埋め込まれている HTML を公開。
Amazon Connect は特定のドメインからのアクセスを許可する設定が可能なので、それをすることで、上記 HTML から Amazon Connect の API を使ってソフトフォンとして架電/受電が可能になる。

手順

HTML 作成

公式ページに以下のようなサンプル HTML がある。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="connect-streams-min.js"></script>
  </head>
  <!-- Add the call to init() as an onload so it will only run once the page is loaded -->
  <body onload="init()">
    <div id="container-div" style="width: 400px; height: 800px;"></div>
    <script type="text/javascript">
      var containerDiv = document.getElementById("container-div");
      var instanceURL = "https://my-instance-domain.awsapps.com/connect/ccp-v2/";
      // initialize the streams api
      function init() {
        // initialize the ccp
        connect.core.initCCP(containerDiv, {
          ccpUrl: instanceURL,            // REQUIRED
          loginPopup: true,               // optional, defaults to `true`
          loginPopupAutoClose: true,      // optional, defaults to `false`
          loginOptions: {                 // optional, if provided opens login in new window
            autoClose: true,              // optional, defaults to `false`
            height: 600,                  // optional, defaults to 578
            width: 400,                   // optional, defaults to 433
            top: 0,                       // optional, defaults to 0
            left: 0                       // optional, defaults to 0
          },
          region: "eu-central-1",         // REQUIRED for `CHAT`, optional otherwise
          softphone: {                    // optional, defaults below apply if not provided
            allowFramedSoftphone: true,   // optional, defaults to false
            disableRingtone: false,       // optional, defaults to false
            ringtoneUrl: "./ringtone.mp3" // optional, defaults to CCP’s default ringtone if a falsy value is set
          },
          pageOptions: { //optional
            enableAudioDeviceSettings: false, //optional, defaults to 'false'
            enablePhoneTypeSettings: true //optional, defaults to 'true' 
          },
          ccpAckTimeout: 5000, //optional, defaults to 3000 (ms)
          ccpSynTimeout: 3000, //optional, defaults to 1000 (ms)
          ccpLoadTimeout: 10000 //optional, defaults to 5000 (ms)
         });
      }
    </script>
  </body>
</html>

instanceURL を変更するくらい。

S3 にライブラリと HTML を配置

上記作成した HTML と、connect-streams.js か connect-streams-min.js を配置。
合わせて CloudFront のオリジンとしてこのバケットを指定。（説明＆スクショ割愛）

CloudFront のドメインを Amazon Connect で承認

AWS コンソール側で、Amazon Connect の設定を変更。
左ペインの Approved origins からドメインを追加可能。

ここまでで、CloudFront のパスにアクセスすれば、 Amazon Connect の認証が立ち上がり、認証後 HTML にソフトフォン（CCP）が埋め込まれた画面が確認できる。

Contact ID、開始終了時刻、エージェント名をソフトフォンと共に表示する

完全なコード（と言っても数行しか追加してない、）はこちら。

github.com

Contact ID

Contact ID は contact.getOriginalContactId(); で取得可能。
通話（Amazon Connect 用語で問い合わせ/Contact）が開始した（onConnected）タイミングで取得する。

    connect.contact(function(contact) {
      contact.onConnected(function(){
        const originalContactId = contact.getOriginalContactId();
        document.getElementById('contact-id').textContent="Contact ID : "+originalContactId;
        console.log("contact-id:"+originalContactId)
      });
    });

開始終了時刻

開始終了時刻をずばり取るメソッドは無さそうなので、通話（Amazon Connect 用語で問い合わせ/Contact）が開始した（onConnected）タイミングと終了した（onEnded）タイミングで、現在時刻を取得する。

    connect.contact(function(contact) {
      contact.onConnected(function(){
        const startDate = new Date();
        document.getElementById('start-time').textContent="開始時刻 : "+startDate.toLocaleString();
        const originalContactId = contact.getOriginalContactId();
      });
      contact.onEnded(function(){
        const endDate = new Date();
        document.getElementById('end-time').textContent="終了時刻 : "+endDate.toLocaleString();
      });
    });

エージェント名

エージェント名は agent.getName() で取得可能。
一旦、特にイベントでの発火はしていない。（そんな頻繁に変わるものでもないかなーとか）

    connect.agent(function(agent){
      const agentName = agent.getName()
      document.getElementById('agent-name').textContent="オペレーター名 : "+agentName;
    });

確認

試しに Amazon Connect からスマホに架電。

Contact ID、開始終了時刻、エージェント名がソフトフォンの下に表示された。

Amazon Connect コンソール側で、問い合わせレコードを確認してみる。

同じ Contact ID の問い合わせが存在することを確認。
onConnected の場合、開始時刻は接続日時と一致する様。
onConnecting にすると、問い合わせレコードの開始時刻と合う様だった。

contact.onConnecting()
This event happens when a contact comes in, before accepting

contact.onConnected()
Subscribe a method to be invoked when the contact is connected

まとめ というか

本当は Contact ID や 開始時刻等こういった情報は、自動で CRM や自社DB上に書き込まれることが望ましいが、そのためにはコンタクトフロー上の Lambda や EventBridge からの Lmabda や Streams API からのアップデート等の作りこみが必要になる。

一旦、そこまではやれないので、こういった必要情報をどこか（DB、CRM、スプシ etc）に楽にメモれるようにしたい的なシチュエーションでは、今回の内容は簡易に実装できていいのでは、という内容でした。