☎️

[AmazonConnect] AmazonConnectStreamでアプリを作ってみた

2023/09/03に公開

Amazon Connect

tech

こんにちは、普段はRails開発が多めなゆうです。
AmazonConnectStreamライブラリを使って、
カスタムする機会があったので共有しつつメモを残します。

Amazon Connect とは

オペレーター等の方が電話対応ができるフルマネージドサービスです。
デフォルト画面は電話応答に必要な最低限の機能があるといった形です。

Amazon Connect Stream とは

デフォルトAmazonConnectは機能が最低限なので要件によっては以下のような問題が出てきます。

社内Webアプリケーション内で使用したい
発信する番号を変えて発信したい
着信履歴を残したい

そういった際にJavascriptライブラリを使用することでカスタムすることができます。

簡単に説明するとiframeタグからデフォルトAmazonConnect画面を表示して使用できつつ、
ライブラリにAPIやイベントが用意されているのでいろいろとカスタムできるといった感じです。

実装方法

一番手軽な実装方法はHTMLランディングページをS3とCloudFrontでhttps配信です。
（AmazonConnetStreamライブラリ使用時にhttpsのURLが必要なため）

本番運用するならUIフレームワーク使ったり、
ビルド等（特に環境変数）をいろいろ考えないとなのでReactかVueでSPAするのが楽かなと思います。

カスタム用のLP（HTML）を用意

AmazonConnetStreamライブラリのドキュメントに沿ってHTMLを用意していきます。
ビルド済のconnect-streams-min.jsを使用していきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="connect-streams-min.js"></script>
  </head>
  <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.my.connect.aws/ccp-v2/";
      connect.core.initCCP(containerDiv, {
        ccpUrl: instanceURL,
        loginPopup: true,
        loginPopupAutoClose: true,
        region: "ap-northeast-1",
        softphone: {
          allowFramedSoftphone: true,
        },
      })
    </script>
  </body>
</html>

Saml認証の場合は別パラメータを用意する必要があり、公式ライブラリの以下issueが参考になります。

ちなみに私はAmazonConnectインスタンスの作成日時によって、
デフォルトURLが変わるのでSaml認証でハマってissueを作りました。

発信番号を変更できるようにしてみた

AmazonConnectで電話番号を取得後に、電話番号ごとにARNが取得できます。
そのARNをパラメータにしてAmazonConnectStreamライブラリの関数を実行すると、
発信電話を変更して発信できるようになります。

var queueARN = "XXXXXXXXXXX"
connect.agent(function (agent) {
  agent.connect(endpoint, {
    queueARN: queueARN,
    success: function() {},
    failure: function(err) {}
  })
}

実装はこちらを参照させていただきました。

着信履歴を残してみた

着信ごとにイベントが用意されているので、電話開始時刻と電話終了時刻が取得できるので
電話終了時刻から電話開始時刻を引くと着信時間が取得できます。
ただ着信履歴を永続化するにはDBもしくはWebストレージを使う必要があります。

connect.contact(function(contact) {
  contact.onConnected(function() {
    // ここで電話開始時にイベントをキャッチすることが可能
  })

  connect.contact(function(contact) {
    contact.onEnded(function(contact) {
      // ここで電話終了時にイベントをキャッチすることが可能
    })
  })
})

実装はこちらを参照させていただきました。

まとめ

カスタムするAPIやイベントが提供されているので少ない実装でいろいろと拡張できます。
オペレーター等の方がより便利に使えるようになりそうです。

所感としてはSaml認証のようにトピックによっては情報量が少ないかつ、
エラー内容から原因を把握しづらいのでテスト実装で時間がかかるとなといった感じでした。