Amazon Connectで、ウェブサイトやアプリケーションにタスクおよびEメールベースのお問い合わせフォームを作成できるようになりました

2025.09.03

 はじめにAmazon Connect コミュニケーションウィジェットに、新しいお問い合わせフォーム機能が追加されました。この機能により、ウェブサイトやアプリケーションでタスクやEメールベースのカスタマーサポートを簡単に実現できます。
たとえば、ウェブサイトにコミュニケーションウィジェットを追加して、顧客が営業時間外にコールバックリクエストを送信したり、ウェブフォームからEメールで問い合わせしたりできるようになります。
https://aws.amazon.com/jp/about-aws/whats-new/2025/08/amazon-connect-embeds-tasks-emails-websites-applications/
今回は、Amazon Connect コミュニケーションウィジェットを使用して以下のようなウェブフォームを作成し、フォームから送信された内容がエージェント側でEメールとして着信する流れを構築します。

 事前準備：Eメール設定あらかじめEメール設定を完了しておきます。設定によりConnectインスタンスエイリアス名.email.connect.awsというドメインが取得できます。
https://dev.classmethod.jp/articles/amazon-connect-email-ga-notification/


Eメールドメインの追加


Eメールアドレスの追加
 コンタクトフローの作成オペレーターに繋がる以下のようなフローを作成します。
 ビューの作成お問い合わせフォーム用のビューを作成します。
今回のお問い合わせフォームでは、以下の4つの項目を入力してもらいます。
名前
メールアドレス
件名
お問い合わせ内容
 各コンポーネントの設定Form

Header
Variant：h2
FormInput（名前）
Label：お名前
Name：customerName
InputType：Text
FormInput（メールアドレス）
Label：メールアドレス
Name：customerEmail
InputType：Email
FormInput（件名）
Label：件名
Name：subject
InputType：Text
TextArea
Label：お問い合わせ内容
Name：message
MaxLength：1000
ConnectAction
Label：送信する
ConnectActionType：StartEmailContact
Destination email address：Connectで追加したEメールアドレス（ドメイン名：Connectインスタンスエイリアス名.email.connect.aws）
ContactFlowId：作成したConnectフロー
なお、Connect Action コンポーネントの ConnectActionType では以下の3つのオプションがサポートされていますが、お問い合わせフォームではEメール（StartEmailContact）とタスク（StartTaskContact）を使用できます。
StartEmailContact
StartTaskContact
StartChatContact
 コミュニケーションウィジェットの作成コミュニケーションウィジェットを作成します。
[コンタクトフォームを追加]を選択し、作成したフォームのビューとコンタクトフローを指定して次に進みます。
ディスプレイタイプはEmbedded Inlineにします。他はデフォルトのまま次に進みます。

コミュニケーションウィジェットを表示するウェブサイトのドメインを追加します。

JWT セキュリティ対策は無効化します。後ほど作成するため、一旦https://xxxxxxxxx.cloudfront.netと記載します。

コミュニケーションウィジェットの作成が完了すると、ウィジェット用のスクリプトが生成されるのでコピーします。

 HTMLファイルの作成Webサイト用のindex.htmlファイルを作成し、ウィジェットのスクリプトを貼り付けます。
index.html

					
			<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>      
      #amazon-connect-widget {
        min-height: 600px;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="amazon-connect-widget"></div>

<!-- コピーしたスクリプトを貼り付ける -->

  </body>
</html>

		
		
 S3バケットのCORS設定Eメール保存用S3バケットに対してCORS設定が必要です。

S3バケットのCORSに以下の設定を追加します。

					
			[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "GET"
        ],
        "AllowedOrigins": [
            "*.my.connect.aws",
            "*.awsapps.com"
        ],
        "ExposeHeaders": []
    }
]

		
		
https://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/enable-email1.html
 S3バケットとCloudFrontディストリビューションの作成S3バケットを作成し、index.htmlファイルをアップロードします。
続いてCloudFrontディストリビューションを作成します。


オリジンにS3バケットを指定します。



今回は、キャッシュを無効にするようキャッシュポリシーを設定します。他はデフォルト値のままにします。


WAFは有効化しません。

ディストリビューションの作成が完了したら、ディストリビューションドメイン名xxxxxx.cloudfront.netを確認し、コミュニケーションウィジェットの許可ドメインに追加します。
 動作確認以下のURLにアクセスして動作を確認します。ディストリビューションドメイン名は各自で異なります。
https://xxxxxx.cloudfront.net/index.html
ウェブフォームが正常に表示されることを確認できました。

。
名前、メールアドレス、件名、お問い合わせ内容を入力し、送信ボタンをクリックします。送信すると、ビュー作成時に設定したEメールアドレスにメールが送信されます。
エージェント側でEメールが着信しました。


お問い合わせフォームの内容のうち、以下の項目を確認できました。

名前は表示されませんでしたが、これはお問い合わせフォームまたはCCP側の問題の可能性があります。改善されるようAWSサポートにフィードバックしました。
メールアドレス
件名
お問い合わせ内容



もちろん返信も可能です。

 最後に今回は、Amazon Connect コミュニケーションウィジェットの新しいお問い合わせフォーム機能を使用して、ウェブサイトにカスタマーサポート用のフォームを埋め込む方法を紹介しました。
この機能は、以下のような場面で活用できます。
営業時間外のお問い合わせやコールバックリクエストの受付
製品やサービスに関するテクニカルサポートの初期対応
システム障害やトラブルの報告受付
今回の検証では、名前フィールドがエージェント側で表示されない課題がありましたが、AWSサポートにフィードバック済みです。今後のアップデートで改善が期待されます。
Amazon Connectを活用したカスタマーサポート体験の向上に、ぜひこの機能をご活用ください。