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

記事タイトルとURLをコピーする

カスタマイズしたチャットウィジェットを簡単に自分の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>

動作確認

  • Webサイトを開くと右下にチャット開始アイコンが表示されます
  • クリックするとページ内へカスタマイズ設定したチャットウィンドウが開き、そのままエージェント呼び出しが開始されます
  • エージェントが応答するとチャット開始できました

イメージは左のウィンドウが顧客がアクセスするWebページ、右のウィンドウはエージェントが利用するCCPページです

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

最後に

カスタマイズできる範囲は少ないのですが、従来の方法に比べると圧倒的に簡単にチャット機能を埋め込むことができると思います。
スクリプトを埋め込めるCMSを既に運用していらっしゃる場合、コピーペーストのみで実装できてしまいますね。