Amazon Connect のチャットウィジェットの表示サイズを変更してみた

2026.01.09
 はじめにAmazon Connect の管理コンソールでは、Web サイトに埋め込むためのコミュニケーションウィジェットを作成できます。
ウィジェットのヘッダーや配色はコンソール上でカスタマイズ可能ですが、ウィジェット自体のサイズ（幅や高さ）を変更する設定項目はありません。
そのため、デフォルトのまま利用すると、表示が小さいと感じる場合があります。


デフォルトのウィジェットサイズ
そこで本記事では、チャットウィジェットの表示サイズを大きくする方法をご紹介します。
 前提条件本記事では、以下の記事を参考に CloudFront + S3 で構築した静的ウェブサイトを利用します。
Amazon Connect 管理コンソールでチャットウィジェットを作成済みであり、発行されたスクリプトを HTML ファイルに埋め込んで S3 にアップロードしている状態を前提とします。
https://dev.classmethod.jp/articles/amazon-connect-cloudfront-s3-chatwidget/
 デフォルトサイズの確認検証に使用する HTML ファイルは以下のとおりです。
Amazon Connect スクリプト部分は、ご自身の環境の値に置き換えてください。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chat Test</title>
</head>
<body>

  <h1>チャットテストページ</h1>

  <!-- Amazon Connect スクリプト -->
  <script type="text/javascript">
    (function(w, d, x, id){
      s=d.createElement('script');
      s.src='https://<Connectインスタンス名>.my.connect.aws/connectwidget/static/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', '<インスタンスID>');
    amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', '<スニペットID>');
    amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
  </script>

</body>
</html>
以下のチャットアイコンをクリックすると、チャットが開始されます。
デフォルトのウィジェットサイズは以下の通りです。
 ウィジェットサイズの変更HTML ファイルにスタイル定義（CSS）を追加することで、表示サイズを変更できます。
具体的には、Amazon Connect のチャットウィジェットが使用する iframe の ID #amazon-connect-widget-frame に対して、幅と高さを指定します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chat Test</title>

  <!-- ここにスタイルを追加 -->
  <style>
    /* ウィジェットの幅を広げる設定 */
    #amazon-connect-widget-frame {
      width: 800px !important; /* ここを好きなサイズ(px)に変更 */
      height: 800px !important; /* ここを好きなサイズ(px)に変更 */
    }
  </style>
</head>
<body>

  <h1>チャットテストページ</h1>

  <!-- Amazon Connect スクリプト -->
  <script type="text/javascript">
    (function(w, d, x, id){
      s=d.createElement('script');
      s.src='https://<Connectインスタンス名>.my.connect.aws/connectwidget/static/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', '<インスタンスID>');
    amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', '<スニペットID>');
    amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
  </script>

</body>
</html>
HTML ファイルを修正後、再度 S3 バケットにアップロードします。
以下の通り、ウィジェットが大きく表示されました。
 最後にAmazon Connect のチャットウィジェットは、CSS を追記するだけで簡単にサイズを変更できます。
デフォルトサイズが小さいと感じる場合は、ぜひ試してみてください。