【Amazon Connect】チャットUIウィジェット埋め込みを試してみました

カスタマイズしたチャットウィジェットを簡単に自分のWebサイトへ埋め込むことができるようになりました。
試してみましたので手順を紹介します。

aws.amazon.com

概要

これまでもチャット機能をWebサイトへ埋め込むことは可能でしたが、実際に稼働させるとなると「簡単にリリースできる」という感じではありませんでした。
大雑把に表現すると、「Amazon ConnectとAWSのいくつかのサービスにある程度精通していて、何らかの言語である程度コードを書けて、Webアプリケーションを危なげなくビルドできるぐらいのスキルは必要」という印象です。

amazon-connect-chat-ui-examples/cloudformationTemplates/asyncCustomerChatUX at master · amazon-connect/amazon-connect-chat-ui-examples · GitHub

もちろん、スキルのあるメンバーがいるなら従来の方法でチャット機能を実装できますし、細かな制御もカスタマイズ可能です。
今回リリースされたウィジェット機能は、細かいカスタマイズはできない代わりに、簡単にチャット機能をWebサイトへ埋め込めるようにする、という位置づけかと思います。

手順

基本的に下記ドキュメント通り実施します。
簡単と言いつつ、若干注意点など補足しつつ手順を示します。

Add a chat user interface your website - Amazon Connect

チャットウィジェットをカスタマイズ

ダッシュボードページの [チャットウィンドウをカスタマイズ] を選択します

f:id:swx-shinsaka:20210318170955p:plain

見出しのテキストや色などをカスタマイズします
ページ下部でチャット開始時の問い合わせフローを選択します（音声着信時の問い合わせフローでも可です）
[次へ] を操作します

f:id:swx-shinsaka:20210318171619p:plain

f:id:swx-shinsaka:20210318171931p:plain

指定したウィジェットのプレビューを確認します
ウィジェットを埋め込むドメインを指定します
- この指定によって、他人のウィジェットを勝手に設置できないようになります
チャットリクエストにセキュリティを追加
- "はい" が推奨されます（本手順では簡略化のために "いいえ" にします）
- "はい" にした場合、呼び出し時にトークン(JWT)生成が必要になります。つまり、サーバサイド側の処理実装が必要になります
[保存] を操作します

f:id:swx-shinsaka:20210318172311p:plain

ウィジェットスクリプトが生成されます
[スクリプトをコピー] を操作してコードをコピーします

f:id:swx-shinsaka:20210318183209p:plain

Webサイトへ設置

今回は既存のCloudFrontで配信しました。
試しに実行する場合はCloudFrontのデプロイを先に実施しておくと良いですね。
手順は下記記事など参考になるかと思います。

blog.serverworks.co.jp

htmlソースコード

貼るほどのものでは無いですが、一応示します。
要は前の手順でコピーしたスクリプトコードをWebページHTML内へそのままペーストします。
今回はファイルをS3へアップロードしてCloudFrontでホスティングします。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>ようこそチャットページへ</h1>
    <p>こんにちは</p>

<!-- widget -->
<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://d2ct74a929wa9a.cloudfront.net/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '********-****-****-****-************');
  amazon_connect('styles', { openChat: { color: 'white', backgroundColor: '#c50e2f'}, closeChat: { color: 'white', backgroundColor: '#c50e2f'} });
  amazon_connect('snippetId', 'QVFJ*********(base64 encoded long text)*******************=');
</script>
<!-- /widget -->

  </body>
</html>