Amazon Connect がホストするウェブサイトにチャットユーザーインターフェイスを追加する

1. https://instance name.my.connect.aws/ で Amazon Connect 管理ウェブサイトにログインします。[コミュニケーションウィジェットをカスタマイズする] をクリックします。

   

2. [コミュニケーションウィジェット] ページで、[コミュニケーションウィジェットを追加] をクリックして、新しいコミュニケーションウィジェットエクスペリエンスのカスタマイズを開始します。既存のチャットウィジェットを編集、削除、または複製するには、次の図に示すとおり、[アクション] 列のオプションから選択します。

   

3. コミュニケーションウィジェットの [名前] と [説明] に入力します。

   注記

   名前は、Amazon Connect インスタンスで作成されたチャットウィジェットごとに一意である必要があります。

4. [コミュニケーションのオプション] セクションで、ウィジェットへの顧客のエンゲージメント方法を選択して、[保存して続行] をクリックします。次の画像では、顧客がチャットやメッセージの受信を許可するオプションを示しています。

   

5. [コミュニケーションウィジェットを作成] ページで、ウィジェットのボタンのスタイル、表示名、スタイルを選択します。

   上記のオプションを選択すると、ウィジェットのプレビューが自動的に更新され、顧客エクスペリエンスがどのようになるかを確認できます。

   

ボタンのスタイル

1. 16 進値 (HTML カラーコード) を入力して、ボタンの背景の色を選択します。

2. アイコンの色は [白] または [黒] を選択します。アイコンの色はカスタマイズできません。

ウィジェットヘッダー

1. ヘッダーメッセージと色、ウィジェットの背景色の値を指定します。

2. ロゴ URL: Amazon S3 バケットまたは別のオンラインソースからロゴバナーに URL を挿入します。

   注記

   Amazon S3 バケット以外のオンラインソースからのものである場合、カスタマイズページのコミュニケーションウィジェットのプレビューにロゴは表示されません。ただし、カスタマイズしたチャットウィジェットがページに実装されると、ロゴが表示されます。

   バナーは、.jpg 形式または .png 形式にする必要があります。画像は、280 px (幅) × 60 px (高さ) にすることができます。これらのサイズより大きい画像は、280x60 のロゴコンポーネントスペースに収まるように拡大縮小されます。

   1. ロゴバナーなどのファイルを S3 にアップロードする方法については、Amazon Simple Storage Service ユーザーガイドの「オブジェクトのアップロード」を参照してください。

   2. コミュニケーションウィジェットに画像へのアクセス権限があるか、画像のアクセス権限が適切に設定されていることを確認します。S3 オブジェクトをパブリックにアクセスできるようにする方法については、「ウェブサイトのアクセス権限の設定」トピックの「ステップ 2: バケットポリシーを追加する」を参照してください。

チャットビュー

1. 書体: ドロップダウンを使用して、コミュニケーションウィジェット内のテキストのフォントを選択します。

2. • [システムメッセージ表示名]: デフォルトをオーバーライドする新しい表示名を入力します。デフォルトは [SYSTEM_MESSAGE] です。

   • [ボットメッセージ表示名]: デフォルトをオーバーライドする新しい表示名を入力します。デフォルトは BOT です。

   • [テキスト入力プレースホルダー]: デフォルトをオーバーライドする新しいプレースホルダーテキストを入力します。デフォルトは [メッセージを入力する] です。

   • [チャット終了ボタンのテキスト]: デフォルトと置き換える新しいテキストを入力します。デフォルトは [チャットを終了] です。

3. エージェントのチャットのバブルの色:16 進値 (HTML カラーコード) を入力して、エージェントのメッセージのバブルの色を選択します。

4. 顧客のチャットのバブルの色: 16 進値 (HTML カラーコード) を入力して、顧客のメッセージのバブルの色を選択します。

5. [Save and continue] を選択します。

1. コミュニケーションウィジェットを配置するウェブサイトのドメインを入力します。チャットは、このステップで選択したウェブサイトにだけ読み込まれます。

   [ドメインを追加] を選択して、ドメインを最大 50 個まで追加できます。

   

   重要

   • ウェブサイトの URL が有効で、エラーが含まれていないことを再度確認してください。https:// で始まる完全な URL を含めます。

   • 運用環境のウェブサイトやアプリケーションには、https:// を使用することをお勧めします。

2. [コミュニケーションウィジェットのためにセキュリティを追加する] で [はい] を選択して、ウェブサイトの管理者と協力して新しいチャットリクエストに対して JSON ウェブトークン (JWT) を発行するようにウェブサーバーを設定することをお勧めします。これにより、Amazon Connect に送信されるチャットリクエストが認証されたユーザーからのものであることを確認するなど、新しいチャットを開始する際により詳細に制御を行えます。

   

   [はい] 選択すると、次のようになります。

   • Amazon Connect は、次のページで JSON ウェブトークン (JWT) の作成に使用できる 44 文字のセキュリティキーを提供します。

   • Amazon Connect は、チャットの開始時に JSON ウェブトークン (JWT) をチェックするコールバック関数をコミュニケーションウィジェットの埋め込みスクリプト内に追加します。

     次の例に示すように、コールバック関数を埋め込みスニペットに実装する必要があります。

     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });

   このオプションを選択すると、次のステップで、ウェブサイトで開始したすべてのチャットリクエストのセキュリティキーを取得できます。ウェブサイトの管理者に依頼して、このセキュリティキーを使用して JWT を発行するようにウェブサーバーを設定します。

3. [Save] を選択します。