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

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

   

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 個まで追加できます。

   

   重要

   • ウェブサイトが有効URLsであり、エラーが含まれていないことを再度確認します。https://. でURL始まる全文を含める

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

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

   

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

   • Amazon Connect では、次のページに 44 文字のセキュリティキーが用意されており、これを使用してJSONウェブトークン () を作成できますJWTs。

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

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

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

   このオプションを選択すると、次のステップで、ウェブサイトで開始したすべてのチャットリクエストのセキュリティキーを取得できます。このセキュリティキーJWTsを使用して問題が発生するようにウェブサーバーをセットアップするには、ウェブサイト管理者にお問い合わせください。

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