翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amazon Connect ウィジェットをウェブサイトに追加して、チャット、タスク、E メール、ウェブ通話のコンタクトを受け入れる
<a name="connect-widget-on-website"></a>

このセクションのトピックでは、ウェブサイトのコミュニケーションウィジェットを作成およびカスタマイズする方法について説明します。ウィジェットを通じて作成されたコンタクトの動作を決定するコンタクトフォームを作成し、ウィジェットの外観と機能をカスタマイズします。

**Topics**
+ [ステップ 1: ウィジェットのコンタクトフォームを作成する](#create-web-form)
+ [ステップ 2: コミュニケーションウィジェットをカスタマイズする](#customize-communications-widget)
+ [ステップ 3: コミュニケーションウィジェットを表示するウェブサイトドメインを指定する](#communications-widget-domains)
+ [ステップ 4: コミュニケーションウィジェットのコードとセキュリティキーを確認してコピーする](#confirm-and-copy-communications-widget-script)

## ステップ 1: ウィジェットのコンタクトフォームを作成する
<a name="create-web-form"></a>

このステップでは、ウィジェットを使用して作成されたコンタクトの動作を決定するビューを作成およびカスタマイズします。

1. の Amazon Connect 管理ウェブサイトにログインします[https://instance name.my.connect.aws/](https://instance name.my.connect.aws/)。**[ルーティング]** タブで、**[フロー]** を選択します。

1. 左上で、**[ビュー]** をクリックします。

1. **[ビューを作成]** を選択します。

1. ここでは、[ノーコードビルダー](no-code-ui-builder.md)を使用して、顧客のコンタクトフォームを設定できます。いくつかの重要なヒント:
   + フォームコンポーネントを使用すると、作成時にフォーム入力をコンタクトにリンクできます。フォームリンクを使用すると、ウィジェットを操作するすべてのユーザーから直接入力を取得し、コンタクトの作成時にフォームに含まれる情報を使用できます。
   + Connect Action コンポーネントは、コンタクトを作成するためのフォームの最も重要な要素です。このコンポーネントは、フォーム内の他のボタンタイプのコンポーネントなしで使用する必要があります。
   + コンタクトフォームウィジェットでビューを使用するには、Connect Action コンポーネントが 1 つだけ存在している必要があります。
   + Connect Action コンポーネントの ConnectActionType では、次の 3 つのオプションがサポートされています。
     + StartEmailContact
     + StartTaskContact
     + StartChatContact

     E メールとタスクの両方をコンタクトフォームで使用できます。チャットコンタクトのチャット前フォームを作成するには、「[Amazon Connect がホストするウェブサイトにチャットユーザーインターフェイスを追加する](add-chat-to-website.md)」を参照してください。
   + [コンポーネントを表示] には多くのスタイルオプションがあり、環境に合わせてフォームをカスタマイズできます。

1. フォームに **[接続アクション] ボタン**を追加したら、[接続アクション] ボタンのオプションにリンクすることで、フォームによって作成されるコンタクトの値を設定できます。リンクするコンポーネントは、**[接続アクション] ボタン**と同じビューのフォームに存在する必要があります。  
![\[新しいコミュニケーションウィジェットリクエストのセキュリティのアクティブ化。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/create-web-form-components-1.png)

   フォームのリンクでは次のコンポーネントがサポートされています。
   + フォーム入力
   + ドロップダウン (複数選択をオフにする)
   + 日付ピッカー
   + テキストエリア
   + タイムピッカー

1. ビューの準備ができたら、**[公開]** を選択します。

## ステップ 2: コミュニケーションウィジェットをカスタマイズする
<a name="customize-communications-widget"></a>

このステップでは、顧客向けのコミュニケーションウィジェットのエクスペリエンスをカスタマイズします。

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

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

1. コミュニケーションウィジェットの **[名前]** と **[説明]** に入力します。
**注記**  
名前は、Amazon Connect インスタンスで作成されたチャットウィジェットごとに一意である必要があります。

1. **[コミュニケーションオプション]** セクションで、**[コンタクトフォームを追加]** を選択します。

1. 前の手順で設定したビューを選択します。ビューの Connect Action コンポーネントにコンタクトフローが設定されていない場合は、ここで設定する必要があります。

1. [**Save and Continue**] をクリックします。

**[コミュニケーションウィジェットを作成]** ページで、ウィジェットのボタンのスタイル、表示名、スタイルを選択します。上記のオプションを選択すると、ウィジェットのプレビューが自動的に更新され、顧客エクスペリエンスがどのようになるかを確認できます。

**注記**  
プレビューには、作成した [コンタクトフォームの表示] は表示されません。ヘッダースタイルのみが表示されます。

### 表示タイプ
<a name="display-types"></a>

コンタクトフォームウィジェットには、次の 2 つの表示タイプから選択できます。
+ *[フローティングアクションボタン]* を使用すると、ウェブページの右下隅にあるインタラクティブボタンとしてウィジェットを固定できます。
+ *[埋め込みインライン]* を使用すると、ウィジェットをロードするためにボタンを押すことなく、ウィジェットをウェブページに直接埋め込むことができます。

### ボタンのスタイル
<a name="button-styles"></a>

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

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

### ウィジェットヘッダー
<a name="widget-header"></a>

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

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

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

バナーは、.jpg 形式または .png 形式にする必要があります。画像は、280 px (幅) × 60 px (高さ) にすることができます。これらのサイズより大きい画像は、280x60 のロゴコンポーネントスペースに収まるように拡大縮小されます。
+ ロゴバナーなどのファイルを S3 にアップロードする方法については、*Amazon Simple Storage Service ユーザーガイド*の「[オブジェクトのアップロード](#)」を参照してください。
+ コミュニケーションウィジェットに画像へのアクセス権限があるか、画像のアクセス権限が適切に設定されていることを確認します。S3 オブジェクトをパブリックにアクセスできるようにする方法については、「[ウェブサイトアクセスのアクセス許可の設定」の「ステップ 2: バケットポリシーを追加する](#)」トピックを参照してください。

## ステップ 3: コミュニケーションウィジェットを表示するウェブサイトドメインを指定する
<a name="communications-widget-domains"></a>

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

   **[ドメインを追加]** を選択して、ドメインを最大 50 個まで追加できます。  
![\[[ドメインの追加] オプション。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-add-domain.png)

   ドメイン許可リストの動作
   + サブドメインは自動的に含まれます。例えば、example.com を許可すると、そのすべてのサブドメイン (sub.example.com など) も許可されます。
   + プロトコル http:// または https:// は、設定と完全に一致する必要があります。許可するドメインを設定する際に、正確なプロトコルを指定してください。
   + すべての URL パスが自動的に許可されます。例えば、example.com が許可されている場合、その下位にあるページ (example.com/cart や example.com/checkout など) はすべてアクセス可能になります。特定のサブディレクトリを許可またはブロックすることはできません。
**重要**  
ウェブサイトの URL が有効で、エラーが含まれていないことを再度確認してください。https:// で始まる完全な URL を含めます。
運用環境のウェブサイトやアプリケーションには、https:// を使用することをお勧めします。

1. **[コミュニケーションウィジェットのためにセキュリティを追加する]** で **[はい]** を選択して、ウェブサイトの管理者と協力して新しいコンタクトリクエストに対して JSON ウェブトークン (JWT) を発行するようにウェブサーバーを設定することをお勧めします。これにより、Amazon Connect に送信されるコンタクトリクエストが認証されたユーザーからのものであることを確認するなど、新しいコンタクトを開始する際により詳細に制御を行えます。  
![\[新しいコミュニケーションウィジェットリクエストのセキュリティのアクティブ化。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-choose-security.png)

   [**はい**] 選択すると、次のようになります。
   + 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 を発行するようにウェブサーバーを設定します。

1. **[保存]** を選択します。

## ステップ 4: コミュニケーションウィジェットのコードとセキュリティキーを確認してコピーする
<a name="confirm-and-copy-communications-widget-script"></a>

このステップでは選択内容を確認して、コミュニケーションウィジェットのコードをコピーし、ウェブサイトに埋め込みます。[ステップ 3](#communications-widget-domains) で JWTs を使用することを選択した場合は、シークレットキーをコピーして作成することもできます。

### セキュリティキー
<a name="communications-widget-security-key"></a>

この 44 文字のセキュリティキーを使用して、ウェブサーバーから JSON Web トークンを生成します。キーを変更する必要がある場合、キーを更新またはローテーションすることもできます。これにより、Amazon Connect によって新しいキーが提供されます。以前のキーは、交換できるようになるまで保持されます。新しいキーのデプロイ後、Amazon Connect に戻って以前のキーを削除できます。

![\[Amazon Connect が提供するセキュリティキー。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-security-key.png)


顧客がウェブサイトでコミュニケーションウィジェットを操作すると、ウィジェットがウェブサーバーに JWT をリクエストします。JWT が提供されると、これらはウィジェットにより Amazon Connect へのエンドカスタマーのコンタクトリクエストの一部として含まれます。次に Amazon Connect では、シークレットキーを使用してトークンが復号化されます。成功すると、お客様のウェブサーバーによって JWT が発行されたことを確認できます。また、Amazon Connect によりコンタクトリクエストがコンタクトセンターのエージェントにルーティングされます。

#### JSON ウェブトークンの仕様
<a name="jwt"></a>
+ アルゴリズム: **HS256**
+ クレーム:
  + **sub**: *widgetId*

    `widgetId` を独自の widgetId に置き換えます。widgetId を検索するには、「[コミュニケーションウィジェットのスクリプト](#communications-widget-script)」の例を参照してください。
  + **iat**: \$1発行時刻。
  + **exp**: \$1有効期限 (最大 10 分)。
  + **segmentAttributes (オプション)**: 属性マップを使用して個々のコンタクトのセグメントに保存されるシステム定義のキーと値のペアのセット。詳細については、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes) API で [SegmentAttributes] を確認してください。
  + **属性 (オプション)**: 文字列から文字列へのキーと値のペアを持つオブジェクト。コンタクト属性は、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes) API によって設定された制限に従う必要があります。
  + **relatedContactId (オプション)**: 有効なコンタクト ID を持つ文字列。relatedContactId は、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API によって設定された制限に従う必要があります。
  + **customerId (オプション)**: Amazon Connect Customer Profiles の ID か、CRM などの外部システムのカスタム識別子です。

  \$1 日付形式の詳細については、インターネット技術標準化委員会 (IETF) によるドキュメント、[JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519) の 5 ページを参照してください。

次のコードスニペットでは、Python で JWT を生成する方法の例を示しています。

```
import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',                    
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

### コミュニケーションウィジェットのスクリプト
<a name="communications-widget-script"></a>

次の画像は、顧客がコンタクトセンターとやり取りできるようにするウェブサイトに埋め込む JavaScript の例を示しています。このスクリプトでは、ウェブサイトの右下隅にウィジェットが表示されます。

**注記**  
埋め込みインラインスタイルを使用するときにウィジェットをレンダリングする必要がある HTML 要素にウィジェットスクリプトを含めます。

![\[コミュニケーションウィジェットのスクリプト\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-code.png)


ウェブサイトがロードされると、顧客にまずウィジェットアイコンが表示されます。顧客がこのアイコンを選択すると、コミュニケーションウィジェットが開き、エージェントとの初回コンタクトができます。

コミュニケーションウィジェットは、**[編集]** をクリックするといつでも変更できます。

**注記**  
変更を保存すると、数分でカスタマーエクスペリエンスが更新されます。保存する前にウィジェットの設定を確認してください。

![\[ウィジェットのプレビューの編集リンク\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-edit.png)


ウェブサイト上のウィジェットのアイコンを変更するには、ウェブサイトを直接更新するための新しいコードスニペットを受け取ります。