Amazon Connectで、ウェブサイトやアプリケーションにタスクおよびEメールベースのお問い合わせフォームを作成できるようになりました
2025.09.03はじめに
Amazon Connect コミュニケーションウィジェットに、新しいお問い合わせフォーム機能が追加されました。この機能により、ウェブサイトやアプリケーションでタスクやEメールベースのカスタマーサポートを簡単に実現できます。
たとえば、ウェブサイトにコミュニケーションウィジェットを追加して、顧客が営業時間外にコールバックリクエストを送信したり、ウェブフォームからEメールで問い合わせしたりできるようになります。
今回は、Amazon Connect コミュニケーションウィジェットを使用して以下のようなウェブフォームを作成し、フォームから送信された内容がエージェント側でEメールとして着信する流れを構築します。
事前準備：Eメール設定
あらかじめEメール設定を完了しておきます。設定によりConnectインスタンスエイリアス名.email.connect.awsというドメインが取得できます。
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ファイルを作成し、ウィジェットのスクリプトを貼り付けます。
<!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": []
}
]
S3バケットとCloudFrontディストリビューションの作成
S3バケットを作成し、index.htmlファイルをアップロードします。
続いてCloudFrontディストリビューションを作成します。
オリジンにS3バケットを指定します。
今回は、キャッシュを無効にするようキャッシュポリシーを設定します。他はデフォルト値のままにします。
WAFは有効化しません。
ディストリビューションの作成が完了したら、ディストリビューションドメイン名xxxxxx.cloudfront.netを確認し、コミュニケーションウィジェットの許可ドメインに追加します。
動作確認
以下のURLにアクセスして動作を確認します。ディストリビューションドメイン名は各自で異なります。
ウェブフォームが正常に表示されることを確認できました。
。
名前、メールアドレス、件名、お問い合わせ内容を入力し、送信ボタンをクリックします。送信すると、ビュー作成時に設定したEメールアドレスにメールが送信されます。
エージェント側でEメールが着信しました。
お問い合わせフォームの内容のうち、以下の項目を確認できました。
名前は表示されませんでしたが、これはお問い合わせフォームまたはCCP側の問題の可能性があります。改善されるようAWSサポートにフィードバックしました。
- メールアドレス
- 件名
- お問い合わせ内容
もちろん返信も可能です。
最後に
今回は、Amazon Connect コミュニケーションウィジェットの新しいお問い合わせフォーム機能を使用して、ウェブサイトにカスタマーサポート用のフォームを埋め込む方法を紹介しました。
この機能は、以下のような場面で活用できます。
- 営業時間外のお問い合わせやコールバックリクエストの受付
- 製品やサービスに関するテクニカルサポートの初期対応
- システム障害やトラブルの報告受付
今回の検証では、名前フィールドがエージェント側で表示されない課題がありましたが、AWSサポートにフィードバック済みです。今後のアップデートで改善が期待されます。
Amazon Connectを活用したカスタマーサポート体験の向上に、ぜひこの機能をご活用ください。
