Amazon ConnectチャットウィジェットのCSSをカスタマイズしてみた

Amazon Connect Chatのウィザードを大きくするのが夢でした！

#Amazon Connect

#Amazon Connect Chat

#AWS

荒平祐次(arap)

2023.06.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、AWS事業本部の荒平(@0Air)です。

以前、弊社の洲崎さん(@ysuzaki2)がAmazon Connect Chatの記事を執筆していました。

今回は、上記記事の中で「CSSを利用したウィジェットのサイズ・フォントサイズ等の変更」について少し詳しく掘り下げたいと思います。

これは何？

Amazon Connect Chatは、そもそも以下の画像のようにjavascript形式で提供されます。
これをお使いのウェブサイトなどに貼り付けて利用することができます。

今回の更新では、Amazon Connect Chatに customStyles というCSSを追加でき、これをウィジェットが読んでくれるという実装になっているようです。

カスタマイズ要素

今回カスタマイズできる要素としては、ドキュメントに記載がある以下の10種類です。

カスタムスタイル名	説明
`global.frameWidth`	ウィジェットフレーム全体の幅
`global.frameHeight`	ウィジェットフレーム全体の高さ
`global.textColor`	すべてのテキストの色
`global.fontSize`	すべてのテキストのフォントサイズ
`global.footerHeight`	ウィジェットのフッターの高さ
`header.headerTextColor`	ヘッダーメッセージの文字色
`transcript.messageFontSize`	すべてのテキストのフォントサイズ
`transcript.messageTextColor`	トランスクリプトメッセージのテキストの色
`footer.buttonFontSize`	アクションボタンのテキストのフォントサイズ
`footer.buttonTextColor`	アクションボタンのテキストの色

やってみた

以前Amazon Connect Chatを検証した時の環境が残っていたので、これを流用します。

(1) 初期状態

CSSをカスタマイズする前のチャットウィジェットです。
タイトルと色は以前より編集できたのでデフォルトではありませんが、それ以外の値は触ることができませんでした。

※ 参考：初期状態のHTML
※ 大きさの比較のために別途CSSで方眼紙線を入れています

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <h1>ようこそClassMethodチャットページへ</h1>
    
<!-- widget -->
<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://XXXXX.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', 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX');
  amazon_connect('styles', { openChat: { color: '#ffffff', backgroundColor: '#68c490'}, closeChat: { color: '#ffffff', backgroundColor: '#68c490'} });
  amazon_connect('snippetId', 'QXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
</script>
<!-- /widget -->

  </body>
</html>

(2) ドキュメントに記載のサンプル

前述のドキュメントに記載されているサンプルを適用してみました。
かなり前衛的な色遣いですが、「何が変更できるのか」が分かりやすいサンプルですね。

タイトル・本文・終了ボタンのカラーコード、ウィジェットのサイズが変更できています。

※ 参考：サンプルを適用したHTML

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <h1>ようこそClassMethodチャットページへ</h1>
    
<!-- widget -->
<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://XXXXX.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', 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX');
  amazon_connect('styles', { openChat: { color: '#ffffff', backgroundColor: '#68c490'}, closeChat: { color: '#ffffff', backgroundColor: '#68c490'} });
  amazon_connect('snippetId', 'QXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
  
  amazon_connect('customStyles', {
      global: {
          frameWidth: '400px',
          frameHeight: '700px',
          textColor: '#fe3251',
          fontSize: '20px',
          footerHeight: '120px',
      },
      header: {
          headerTextColor: '#541218',
      },
      transcript: {
          messageFontSize: '13px',
          messageTextColor: '#fe3'
      },
      footer: {
          buttonFontSize: '20px',
          buttonTextColor: '#ef18d3',
      }
  })
</script>
<!-- /widget -->

  </body>
</html>

以下は、よく使いそうなパラメータを実際に調整してみました。

(3) フレームの大きさを編集する

個人的にはこれが一番嬉しいです。チャットウィジェットのサイズを大きくしたいなと思うことが多かったので、今後活用する機会が多そうです。
global.frameWidth と global.frameHeight を利用します。それぞれ、300pxと480px が推奨の最小値、ウィンドウ幅が最大値となります。

この最小値は制限がある訳ではなく、100×100px で設定してみたところ表示できました。
ボタン配置の関係上、300×480px が推奨されているようです。

十分に大きな値(999999 × 999999px )を与えてみましたが、ウインドウ幅に自動でリサイズされるようです。

執筆時点でピクセル指定のみで、パーセンテージ指定( 80%など)は非対応なようでした。

※参考：フレームの大きさ設定部のみ

  amazon_connect('customStyles', {
        global: {
            frameWidth: '999999px',
            frameHeight: '999999px',
        }
  }

(4) テキストのフォントサイズ

global.fontSize でウィジェット内のフォントサイズを全体的に変更できます。
推奨値は12-20pxです。

なお、ヘッダー（「クラスメソッド」と記載の部分）のサイズは変更できませんでした。

なお、 transcript.messageFontSize (本文部分)および、 footer.buttonFontSize (下部ボタン)の設定は個別にあり、general.fontSize より優先する動作のようです。

※参考：テキストのサイズ変更部のみ

  amazon_connect('customStyles', {
      global: {
          fontSize: '32px',
      },
      transcript: {
          messageFontSize: '13px',
      },
      footer: {
          buttonFontSize: '13px',
      }
  }