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

# Amazon Connect で顧客のチャットエクスペリエンスを設定する
<a name="enable-chat-in-app"></a>

次のいずれかの方法を使用して、顧客にチャットエクスペリエンスを提供できます。
+ [Amazon Connect がホストするウェブサイトにチャットユーザーインターフェイスを追加する](add-chat-to-website.md). 
+ [Amazon Connect オープンソースのサンプルを使用してチャットをカスタマイズする](download-chat-example.md). 
+ [Amazon Connect API を使用して、ソリューションをカスタマイズする](integrate-with-startchatcontact-api.md)。独自のチャットエクスペリエンスをカスタマイズする場合、Amazon Connect ChatJS のオープンソースライブラリから開始することをお勧めします。詳細については、Github で「[Amazon Connect ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs)」レポを参照してください。

## チャットエクスペリエンスをカスタマイズするためのその他のリソース
<a name="more-resource-customize-chat"></a>
+ 対話型メッセージでは、選択可能な事前設定された表示オプションおよびプロンプトを顧客に提供します。これらのメッセージは Amazon Lex によって供給され、Lambda を使用して Amazon Lex を介して設定されます。Amazon Lex を使用して対話型メッセージを追加する方法については、ブログ記事「[Set up interactive messages for your Amazon Connect chatbot](https://aws.amazon.com/blogs/contact-center/easily-set-up-interactive-messages-for-your-amazon-connect-chatbot/)」を参照してください。

  Amazon Connect では、リストピッカーおよびタイムピッカーのテンプレートがサポートされています。詳細については、「[チャットで顧客が使用する Amazon Lex インタラクティブメッセージを追加する](interactive-messages.md)」を参照してください。
+  [Amazon Connect での Apple Messages for Business を有効にする](apple-messages-for-business.md) 
+  [Amazon Connect Service API ドキュメント](https://docs.aws.amazon.com/connect/latest/APIReference) (特に [StartChatConnect](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API)。
+  [Amazon Connect Participant Service API](https://docs.aws.amazon.com/connect-participant/latest/APIReference/Welcome.html)。
+  [Amazon Connect Chat SDK と実装サンプル](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 
+  [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams)。既存のアプリケーションを Amazon Connect と統合するために使用します。問い合わせコントロールパネル (CCP) コンポーネントをアプリに埋め込むことができます。
+  [AI を活用したチャットのメッセージストリーミングを有効にする](message-streaming-ai-chat.md) 

# Amazon Connect のチャット/SMS チャネル
<a name="web-and-mobile-chat"></a>

**重要**  
**Amazon にサポートを依頼したいとお考えですか？** 「[Amazon カスタマーサービス](https://www.amazon.com/gp/help/customer/display.html?icmpid=docs_connect_messagingcap_customerservice)」(Amazon の注文と配送) または「[AWS サポート](https://aws.amazon.com/premiumsupport/?icmpid=docs_connect_messagingcap_premiumsupport)」(Amazon Web Services) を参照してください。

Amazon Connect を使用して、チャットメッセージ機能 (モバイルチャット、ウェブチャット、SMS、サードパーティーのメッセージングサービス) をウェブサイトやモバイルアプリケーションに組み込むことができます。顧客は、ビジネスアプリケーション、ウェブ、またはモバイルからコンタクトセンターのエージェントとのチャットを開始できます。

これによる対話は非同期的で、顧客はエージェントまたは Amazon Lex ボットとチャットを開始し、そこから離れ、また会話を再開することができます。顧客は、デバイスを切り替えてチャットを続けることもできます。

**Topics**
+ [複数のチャネル、1 つのエクスペリエンス](#unified-experience-chat)
+ [開始方法](#enable-chat)
+ [チャットシナリオの例](#example-chat-scenario)
+ [チャットはいつ終了しますか?](#when-do-chats-end)
+ [料金](#web-and-mobile-chat-pricing)
+ [詳細情報](#chat-more-info)

## 複数のチャネル、1 つのエクスペリエンス
<a name="unified-experience-chat"></a>

エージェントは、単一のユーザーインターフェイスを使用しながら、音声、チャット、およびタスクを使用して顧客に対応します。これにより、エージェントは多くのツールを学習する必要がなくなり、また、操作する画面の数も減らすことができます。

チャットアクティビティは、既存のコンタクトセンターフロー、および音声用に構築された自動化処理と統合されます。フローは一度構築した後に、複数のチャネルで再利用が可能です。

メトリクスの収集と自動的に構築したダッシュボードは、複数のチャネル間で統合されたメトリクスの恩恵を受けます。

## 開始方法
<a name="enable-chat"></a>

Amazon Connect コンタクトセンターにチャット機能を追加して、エージェントがチャットで対応できるようにするには、次の 2 つのステップを実行します。
+ チャットは、[チャットのトランスクリプトを保存するために Amazon S3 バケットが作成されている](amazon-connect-instances.md#get-started-data-storage)ときに、インスタンスレベルで有効です。
+ [エージェントのルーティングプロファイルにチャットを追加](routing-profiles.md)します。
+ 必要に応じて、SMS メッセージなどのチャットのサブタイプを設定できます。を使用して SMS 対応の電話番号を取得し AWS End User Messaging SMS、 にインポートしてから Amazon Connect、フローに割り当てます。詳細については、以下を参照してください。
  + [を使用して SMS 対応の電話番号をリクエストする AWS End User Messaging SMS](sms-number.md)
  + [Amazon Connect で SMS メッセージングを設定する](setup-sms-messaging.md)

エージェントは、問い合わせコントロールパネル (CCP) でチャットの受付けを開始します。

エージェントのパフォーマンスと生産性を評価するために、通話、チャット、またはタスクに使用するのと同じレポートエクスペリエンスで、チャットメッセージングチャネルのリアルタイムおよび過去のメトリクス（到着時間、処理時間など）をチャットチャネル全体のメトリクスの一部として表示できます。

Amazon Connect には、ウェブサイトにチャットを追加するためのリソースがいくつか用意されています。詳細については、「[Amazon Connect で顧客のチャットエクスペリエンスを設定する](enable-chat-in-app.md)」を参照してください。

## チャットシナリオの例
<a name="example-chat-scenario"></a>

顧客とエージェントがチャットしています。カスタマーからエージェントへの応答が停止します。エージェントは、「接続されていますか」とたずねます。しかし、返信がありません。エージェントはチャットから離れます。これで、チャットはエージェントに関連付けられなくなります。フローが、次の処理内容を決定します。

このシナリオでは、しばらくして顧客からの別のメッセージ (今、戻りました) を受信し、チャットを再開するとします。フローで定義したロジックにより、このチャットを元のエージェントに割り当てたり、別のエージェントあるいはキューに割り当てたりできます。

このシナリオを構築する方法は次のとおりです。

1. 切断フローを作成します。次の画像は、フローデザイナーでの [Amazon Connect の切断フローのサンプル](sample-disconnect.md) を示しています。このフローには、**[再生プロンプト]**、3 つの **[再生プロンプト]** (**[顧客が戻った]**、**[期限切れ]**、**[エラー]**) に分岐する **[待機]**、**[キューへ転送]**、**[切断]** の接続済みブロックが含まれます。  
![\[サンプルの切断フロー。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/sample-disconnect-flow.png)

1.  切断フローで、[待機](wait.md)ブロックを追加します。待機ブロックには次の 2 つのブランチがあります。
   +  **タイムアウト**: 指定した時間が経過しても顧客がメッセージを送信していない場合は、このブランチを実行します。複数の**待機**ブロックを含む、チャットの合計時間は 7 日を超えることはできません。

      例えば、このブランチでは、**切断**ブロックを実行してチャットを終了するだけです。
   +  **顧客が戻る** : 顧客が戻ってメッセージを送信した場合は、このブランチを実行します。このブランチでは、顧客を前のエージェントや前のキューにルーティングするか、その顧客のために新しい作業キューもしくはエージェントを設定することが可能です。

1.  着信フローで、[[Set Disconnect Flow]](set-disconnect-flow.md) (切断フローの設定) ブロックを追加します。これを指定することで、エージェントまたは Amazon Lex ボットがチャットから切断され、顧客だけが残されている場合に、設定された切断フローを実行できます。

    例えば、次のブロックでは、**切断フローのサンプル**が実行されるように指定しました。  
![\[[切断フローの設定] ブロック、[フローの選択] ドロップダウンメニュー、サンプルの [切断フロー] オプション。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/set-disconnect-flow.png)

    **切断フローの設定**ブロックを使用する例については、「[サンプルインバウンドフロー](sample-inbound-flow.md)」を参照してください。

## チャットはいつ終了しますか?
<a name="when-do-chats-end"></a>

 デフォルトでは、チャットの会話の期間 (顧客がアクティブでないときの待機時間を含む) が、25 時間を超えることはできません。ただし、このデフォルトの期間を変更して、代わりにカスタムチャット期間を設定できます。1 時間 (60 分) から最大 7 日間 (10,080 分) まで継続するチャットを設定できます。カスタムのチャットの期間を設定するには、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API を呼び出して、`ChatDurationInMinutes` パラメータを追加します。

進行中のチャットセッションの間、顧客が既存の進行中のチャットセッションを退席したり再び参加したりする回数に制限はありません。そのためには、[[Wait]](wait.md) (待機) ブロックを使用します。例えば、顧客がチャットを再開するまで 12 時間待機してから、チャットセッションを終了することができます。顧客が 12 時間後にチャットを再開しようとした際に、その顧客に対し、Amazon Lex ボットが機能しているフローが、以前と同じ問題の問い合わせなのか別の問題についてなのかを質問します。

チャットの期間よりも大幅に短い待機時間を指定することで、顧客に良質のエクスペリエンスを提供できます。例えば、チャットの期間を 25 時間とした場合、会話の長さの制限が 25 時間であるため、24 時間 58 分後にチャットを再開した顧客の場合は、その 2 分後に切断されるということも起こり得ます。

**ヒント**  
チャットで Amazon Lex を使用している場合、セッションにはデフォルトで 5 分間のタイムアウトがあることにご留意ください。セッションの合計時間は 24 時間を超えることはできません。セッションタイムアウトの変更方法については、*Amazon Lex 開発者ガイド*の「[Setting the Session Timeout](https://docs.aws.amazon.com/lex/latest/dg/context-mgmt.html#context-mgmt-session-timeoutg)」を参照してください。

## 料金
<a name="web-and-mobile-chat-pricing"></a>

チャットは、使用量に応じて課金されます。前払い、長期契約、最低月額料金は必要ありません。支払いはチャットメッセージごとに行い、これを使用しているエージェントや顧客の数とは無関係です。料金は地域ごとに異なる場合があります。詳細については、[Amazon Connect の料金](https://aws.amazon.com/connect/pricing/)を参照してください。

## 詳細情報
<a name="chat-more-info"></a>

チャットの詳細については、次のトピックを参照してください。
+  [Amazon Connect で音声、チャット、タスクのエクスペリエンスをテストする](chat-testing.md) 
+  [複数のチャネルでのルーティングの仕組み](about-routing.md#routing-profile-channels-works) 
+  [Amazon Connect でルーティングプロファイルを作成し、キューをエージェントに関連付ける](routing-profiles.md) 
+  [Amazon Connect Chat SDK とサンプル実装](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 

# Amazon Connect がホストするウェブサイトにチャットユーザーインターフェイスを追加する
<a name="add-chat-to-website"></a>

チャットで顧客をサポートするには、Amazon Connect でホストされているウェブサイトにチャットウィジェットを追加できます。コミュニケーションウィジェットは Amazon Connect 、 管理ウェブサイトで設定できます。フォントと色をカスタマイズし、ウェブサイトからのみ起動できるようにウィジェットを保護できます。終了すると、ウェブサイトに追加する短いコードスニペットが作成されます。

Amazon Connect はウィジェットをホストしているため、ウェブサイトでは常に最新バージョンが利用できます。

**ヒント**  
コミュニケーションウィジェットの使用には、メッセージごとに許可される文字数などのデフォルトのサービスクォータが適用されます。コミュニケーションウィジェットを本番環境で起動する前に、サービスクォータが組織のニーズに応じて設定されていることを確認します。詳細については、「[Amazon Connect サービスクォータ](amazon-connect-service-limits.md)」を参照してください。

**Topics**
+ [カスタマイズできる、サポートされているウィジェットのスニペットフィールド](supported-snippet-fields.md)
+ [サポートされるブラウザ](#chat-widget-supported-browsers)
+ [ステップ 1: コミュニケーションウィジェットをカスタマイズする](#customize-chat-widget)
+ [ステップ 2: コミュニケーションウィジェットを表示するウェブサイトのドメインを指定する](#chat-widget-domains)
+ [ステップ 3: コミュニケーションウィジェットのコードとセキュリティキーを確認してコピーする](#confirm-and-copy-chat-widget-script)
+ [エラーメッセージが表示される場合](#chat-widget-error-messages)
+ [ウィジェットの起動動作とボタンアイコンをカスタマイズする](customize-widget-launch.md)
+ [顧客の表示名を渡す](pass-display-name-chat.md)
+ [問い合わせ属性を渡す](pass-contact-attributes-chat.md)
+ [チャットウィジェットの追加のカスタマイズ](pass-customization-object.md)
+ [チャットウィジェットのトランスクリプトをダウンロードする](chat-widget-download-transcript.md)
+ [オープンソースのサンプルをダウンロードおよびカスタマイズする](download-chat-example.md)
+ [Amazon Connect API を使用して、アプリケーションでチャットを開始する](integrate-with-startchatcontact-api.md)
+ [チャットメッセージ着信時に顧客にブラウザ通知を送信する](browser-notifications-chat.md)
+ [プログラムによるチャットの切断](programmatic-chat-disconnect.md)
+ [カスタムプロパティを渡してコミュニケーションウィジェットのデフォルトをオーバーライドする](pass-custom-styles.md)
+ [CSS/JavaScript を使用してウィジェットのボタンとフレームをターゲットにする](target-widget-button.md)
+ [コミュニケーションウィジェットに関する問題のトラブルシューティング](ts-cw.md)
+ [事前コンタクトフォームまたは事前チャットフォームを追加する](add-precontact-form.md)
+ [チャット後アンケート](enable-post-chat-survey.md)

# カスタマイズできる Amazon Connect でサポートされているウィジェットのスニペットフィールド
<a name="supported-snippet-fields"></a>

カスタマイズできるコミュニケーションウィジェットのスニペットフィールドを、次の表に一覧表示します。表の後のコード例は、スニペットフィールドの使用方法を説明しています。


| スニペットフィールド | 型 | 説明 | 追加のドキュメント | 
| --- | --- | --- | --- | 
| `snippetId` | String | 必須、自動生成 | 該当なし | 
| `styles` | String | 必須、自動生成 | 該当なし | 
| `supportedMessagingContentTypes` | 配列 | 必須、自動生成 | 該当なし | 
| `customLaunchBehavior` | オブジェクト | ウェブサイトのレンダリング方法とホストウィジェットアイコンの起動方法をカスタマイズする | [Amazon Connect でホストされているウェブサイトのウィジェット起動動作とボタンアイコンをカスタマイズする](customize-widget-launch.md)、このトピックの後半 | 
| `authenticate` | 関数 | ウェブサイトで JWT セキュリティを有効にするコールバック関数 | [ステップ 2: コミュニケーションウィジェットを表示するウェブサイトのドメインを指定する](add-chat-to-website.md#chat-widget-domains)、このセクションの前半 | 
| `customerDisplayName` | 関数 | コンタクト開始時に顧客の表示名を渡す | [Amazon Connect チャットの開始時に顧客の表示名を渡す](pass-display-name-chat.md)、このセクションの後半 | 
| `customStyles` | オブジェクト | デフォルトの CSS スタイルを上書きする | [カスタムプロパティを渡して、Amazon Connect のコミュニケーションウィジェットのデフォルトを上書きする](pass-custom-styles.md)、このセクションの後半 | 
| `chatDurationInMinutes` | Number | 新しく開始されたチャットセッションの合計時間 | デフォルト: 1500 - 最小 60、最大:10080 | 
| `enableLogs` | ブール値 | デバッグログを有効にする | デフォルト: false | 
| `language` | String |  Amazon Connect は、サポートされている ISO-639 形式の言語コードの翻訳を行うことができます。詳細については、[https://en.wikipedia.org/wiki/List\$1of\$1ISO\$1639-1\$1codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) を参照してください。 これにより、カスタムテキストの上書きとメッセージコンテンツ (送受信の両方) は変換されません。  | デフォルト: en\$1US。サポート対象: 'cs\$1CZ'、'da\$1DK'、'de\$1DE'、'en\$1AU'、'en\$1CA'、'en\$1GB'、'en\$1US'、'es\$1ES'、'fi\$1FI'、'fr\$1FR'、'hu\$1HU'、'id\$1ID'、'it\$1IT'、'ja\$1JP'、'ko\$1KR'、'nl\$1NL'、'nn\$1NO' 'pt\$1BR'、'pt\$1PT'、'sk\$1SK'、'sv\$1SE'、'zh\$1CN'、'zh\$1TW' | 
| `disableCSM` | ブール値 | コミュニケーションウィジェットからクライアント側のメトリクスの追跡を無効にします。 | デフォルト: false | 
| `nonce` | String | iframe と顧客ウェブサイトの CSP ポリシー間のハンドシェイク値。例: 顧客の CSP は 1234 ノンス値を許可する一方、別のスクリプトを取り込む iframe は、iframe の親サイトによって信頼されたスクリプトであることをブラウザが認識できるように、同じ 1234 ノンス値を持つ必要があります。 | デフォルト: 不特定 | 
| `customizationObject` | オブジェクト | ウィジェットのレイアウトとトランスクリプトをカスタマイズする | 詳細については、このセクションの後半の「[Amazon Connect チャットウィジェットの追加のカスタマイズ](pass-customization-object.md)」を参照してください。 | 
| `contactAttributes` | オブジェクト | JWT の設定なしで、スニペットコードから直接コンタクトフローに属性を渡します。 | 詳細については、「[チャットの初期化時に問い合わせ属性を渡す](https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html)」を参照してください。 | 
| `customDisplayNames` | オブジェクト | Amazon Connect 管理ウェブサイトで設定されているシステムまたはボットの表示名とロゴの設定を上書きします。 | 詳細については、「[コミュニケーションウィジェットのシステムやボットの表示名とロゴをオーバーライドする方法](https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html#pass-override-system)」を参照してください。 | 
| `contactMetadataHandler` | 関数 | contactId にアクセスするためのコールバック関数。例えば、ブラウザタブが閉じられたときに contactId で StopContact 関数を呼び出したり、以前の contactId でチャットの永続性を維持するなどのシナリオを処理するようなイベントリスナーを追加します。 |  | 
| `registerCallback` | オブジェクト | これにより、公開されたライフサイクルイベントのコールバックを実行することができます。 詳細については、「[amazon-connect-chatjs](https://github.com/amazon-connect/amazon-connect-chatjs)」を参照してください。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/supported-snippet-fields.html) | 
| `initialMessage` | String | 新しく作成されたチャットに送信するメッセージ。長さの制限: 最小長は 1、最大長は 1024 | 初期メッセージを使用してコンタクトフローで設定された Lex ボットを呼び出すには、**メッセージでボットを初期化**オプションを選択して [[顧客の入力の取得] フローブロック](get-customer-input.md)を変更します。詳細については、「[[顧客の入力の取得] フローブロックの設定方法](get-customer-input.md#get-customer-input-properties)」を参照してください。 | 
| `authenticationParameters` | オブジェクト | これにより、[顧客を認証](authenticate-customer.md) フローブロックが有効になります。 | 詳細については、「[顧客認証を有効にする](enable-connect-managed-auth.md)」を参照してください。 | 
| `mockLexBotTyping` | ブール値 | Lex Bot メッセージのモック入力インジケータを有効にします。 | デフォルト: false | 
| `customStartChat` | 関数 | バックエンドから Start Chat API を呼び出すコールバック関数。 | 詳細については、「[Hosted widget UI with custom Start Chat API](https://github.com/amazon-connect/amazon-connect-chat-interface#option-3-hosted-widget-ui-with-custom-start-chat-api)」を参照してください。 | 

次の例は、チャットウィジェットをウェブサイトに追加する HTML スクリプトにスニペットフィールドを追加する方法を示しています。

```
(function(w, d, x, id) {   /* ... */})(window, document, 
'amazon_connect', 'widgetId');
 amazon_connect('snippetId', 'snippetId');
 amazon_connect('styles', /* ... */);
 amazon_connect('registerCallback', {
    // Custom event example
    // WIDGET_FRAME_CLOSED
    /**
     * This event is triggered when user clicks on the chat widget close button, 
     * either widget close button was clicked when error in the chat session or normally by the user. 
     * This event can be used for webview use cases to go back to main app
     * 
     * @param {string} status - The reason for widget closure
     *   - "error_chat": Indicates the user clicked on widget close button due to an error in the chat session
     *   - "close_chat": Indicates the user clicked on widget close button normally by the user
     */
    'WIDGET_FRAME_CLOSED': (eventName, { status }) => {
        // You can implement custom logic based on the status value(error_chat or close_chat)
        if (status == "error_chat") {
            // handle error chat
        } else if (status == "close_chat") {
            // handle close chat  
        } 
    },
    // System event example
    /**
     * chatDetails: { 
     *     contactId: string, 
     *     participantId: string,
     *     participantToken: string,
     * }
     * data: {
     *     AbsoluteTime?: string,
     *     ContentType?: string,
     *     Type?: string,
     *     ParticipantId?: string,
     *     DisplayName?: string,
     *     ParticipantRole?: string,
     *     InitialContactId?: string
     * }
     */
    'PARTICIPANT_JOINED': (eventName, { chatDetails, data }) => {
        alert(`${data.ParticipantRole} joined the chat.`);
    },
    'event_Name_3': callback(function),
    'event_Name_4': callback(function),
    // ...
}); 
amazon_connect('initialMessage', 'Your initial message string');
// ... 
amazon_connect('snippetFieldHere', /* ... */);
<script/>
```

## サポートされるブラウザ
<a name="chat-widget-supported-browsers"></a>

事前構築済みのコミュニケーションウィジェットでは、次のブラウザバージョン以降がサポートされています。
+ Google Chrome 85.0
+ Safari 13.1
+ Microsoft Edge バージョン 85
+ Mozilla Firefox 81.0

チャットウィジェットは、デスクトップデバイスでのブラウザ通知をサポートします。詳細については、「[チャットメッセージ着信時に顧客にブラウザ通知を送信する](browser-notifications-chat.md)」を参照してください。

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

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

1. https://*instance name*.my.connect.aws/ で Amazon Connect 管理者ウェブサイトにログインします。**[コミュニケーションウィジェットをカスタマイズする]** をクリックします。  
![\[[設定ガイド] ページ、[コミュニケーションウィジェットをカスタマイズする] のリンク\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-customize-chat-window-button.png)

1. **[コミュニケーションウィジェット]** ページで、**[コミュニケーションウィジェットを追加]** をクリックして、新しいコミュニケーションウィジェットエクスペリエンスのカスタマイズを開始します。既存のチャットウィジェットを編集、削除、または複製するには、次の図に示すとおり、**[アクション]** 列のオプションから選択します。  
![\[[コミュニケーションウィジェット] ページの [コミュニケーションウィジェットを追加] ボタンのリンク。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-add-chat-widget.png)

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

1. **[コミュニケーションのオプション]** セクションで、ウィジェットへの顧客のエンゲージメント方法を選択して、**[保存して続行]** をクリックします。
**注記**  
チャットと音声が有効になっていない場合にのみ、タスクまたは E メールの事前コンタクトフォームを有効にできます。

   次の図は、顧客によるチャットの利用、メッセージの受信、事前チャットフォームの作成を有効にするためのオプションを示しています。事前チャットフォームを有効にするには、まず、接続アクションボタンが含まれる[ビュー](view-resources-sg.md)を作成し、`StartChatContact` アクションを選択する必要があります。事前チャットフォームと事前コンタクトフォームの詳細については、「[Amazon Connect ウィジェットをウェブサイトに追加する](connect-widget-on-website.md)」を参照してください。  
![\[チャットとウェブ通話用に設定されたコミュニケーションウィジェットページ\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/comm-widget-page-chat.png)

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

   上記のオプションを選択すると、ウィジェットのプレビューが自動的に更新され、顧客エクスペリエンスがどのようになるかを確認できます。  
![\[コミュニケーションウィジェットのプレビュー\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/netra-chat-preview.png)

**ボタンのスタイル**

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

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

**ウィジェットヘッダー**

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

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

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

   1. ロゴバナーなどのファイルを S3 にアップロードする方法については、*Amazon Simple Storage Service ユーザーガイド*の「[オブジェクトのアップロード](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html)」を参照してください。

   1. コミュニケーションウィジェットに画像へのアクセス権限があるか、画像のアクセス権限が適切に設定されていることを確認します。S3 オブジェクトをパブリックにアクセスできるようにする方法については、「*ウェブサイトのアクセス権限の設定*」トピックの「[ステップ 2: バケットポリシーを追加する](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site)」を参照してください。

**チャットビュー**

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

1. 
   + **[システムメッセージ表示名]**: デフォルトをオーバーライドする新しい表示名を入力します。デフォルトは **[SYSTEM\$1MESSAGE]** です。
   + **[ボットメッセージ表示名]**: デフォルトをオーバーライドする新しい表示名を入力します。デフォルトは **BOT** です。
   + **[テキスト入力プレースホルダー]**: デフォルトをオーバーライドする新しいプレースホルダーテキストを入力します。デフォルトは **[メッセージを入力する]** です。
   + **[チャット終了ボタンのテキスト]**: デフォルトと置き換える新しいテキストを入力します。デフォルトは **[チャットを終了]** です。

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

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

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

## ステップ 2: コミュニケーションウィジェットを表示するウェブサイトのドメインを指定する
<a name="chat-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. **[保存]** を選択します。

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

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

### セキュリティキー
<a name="chat-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 を検索するには、「[コミュニケーションウィジェットのスクリプト](#chat-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="chat-widget-script"></a>

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

![\[コミュニケーションウィジェットのスクリプト\]](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)


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

## エラーメッセージが表示される場合
<a name="chat-widget-error-messages"></a>

エラーメッセージが表示される場合は、「[Amazon Connect コミュニケーションウィジェットに関する問題のトラブルシューティング](ts-cw.md)」を参照してください。

# Amazon Connect でホストされているウェブサイトのウィジェット起動動作とボタンアイコンをカスタマイズする
<a name="customize-widget-launch"></a>

ウェブサイトでホストウィジェットアイコンをレンダリングして起動する方法をさらにカスタマイズするには、起動動作を設定してデフォルトアイコンを非表示にすることができます。例えば、ウェブサイトに表示される **[チャットを開始]** ボタン要素から、プログラムでウィジェットを起動できます。

**Topics**
+ [ウィジェットのカスタム起動動作を設定する方法](#config-widget-launch)
+ [サポートされているオプションと制約](#launch-options-constraints)
+ [カスタムユースケース用にウィジェットの起動を設定する](#launch-usage)
+ [タブをまたいだチャットセッションの永続性を有効にする](#chat-persistence-across-tabs)

## ウィジェットのカスタム起動動作を設定する方法
<a name="config-widget-launch"></a>

カスタム起動動作を渡すには、次のサンプルコードブロックをウィジェットに埋め込みます。次の例に示すフィールドはすべてオプションです。

```
amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programmaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});
```

## サポートされているオプションと制約
<a name="launch-options-constraints"></a>

次の表は、サポートされているカスタム起動動作オプションの一覧です。フィールドはオプションで、任意に組み合わせて使用できます。


| オプション名 | 型 | 説明 | デフォルトの値 | 
| --- | --- | --- | --- | 
|  `skipIconButtonAndAutoLaunch`  | ブール値  | ユーザーがページのロードをクリックしなくてもウィジェットの自動起動を有効/無効にするフラグ。 | 未定義 | 
|  `alwaysHideWidgetButton`  | ブール値  | ウィジェットアイコンボタンのレンダリングを有効/無効にするフラグ (チャットセッションが進行中の場合を除く)。 | 未定義 | 
|  `programmaticLaunch`  | 関数  |  | 未定義 | 

## カスタムユースケース用にウィジェットの起動を設定する
<a name="launch-usage"></a>

### カスタムウィジェット起動ボタン
<a name="custom-launch-button"></a>

次の例は、ユーザーがウェブサイトの任意の場所にカスタムボタン要素をレンダリングして選択した場合に限り、ウィジェットをプログラムで起動して開くために必要な変更を示しています。例えば、ユーザーは **[お問い合わせ]** または **[チャットを開始]** という名前のボタンを選択できます。オプションで、ウィジェットを開くまで、デフォルトの Amazon Connect ウィジェットアイコンを非表示にできます。

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programmaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>
```

### ハイパーリンクサポート
<a name="hyperlink-support"></a>

次の例は、ユーザーがクリックするのを待たずにウィジェットを開くために必要な、ウィジェット設定 `auto-launch` の変更を示しています。ウェブサイトでホストされているページにデプロイして、共有可能なハイパーリンクを作成できます。

```
https://example.com/contact-us?autoLaunchMyWidget=true
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>
```

### ボタンのクリック時にウィジェットアセットを読み込む
<a name="load-assets"></a>

次の例は、ウェブサイトページのロードを加速するために、ユーザーが **[チャットを開始]** ボタンをクリックしてウィジェットの静的アセットを取得するのに必要なウィジェットの変更を示しています。通常、**[お問い合わせ]** ページにアクセスしたお客様のうち、Amazon Connect ウィジェットを開くのはごく一部です。お客様がウィジェットを開かなくても、ウィジェットが CDN からファイルを取得する際にページのロードに追加のレイテンシーが生じる場合があります。

別の解決策は、ボタンのクリック時にスニペットコードを非同期に実行する (またはまったく実行しない) ことです。

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./amazon-connect-chat-interface-client.js"
        s.async=1;
        s.id=id;
        d.getElementsByTagName("head")[0].appendChild(s);
        w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});
```

### ブラウザウィンドウで新しいチャットを起動する
<a name="new-chat-browser-window"></a>

次の例は、新しいブラウザウィンドウを起動してチャットを全画面で自動起動するために必要なウィジェットの変更を示しています。

```
<button id="openChatWindowButton">Launch a Chat</button>
```

```
<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>
```

## タブをまたいだチャットセッションの永続性を有効にする
<a name="chat-persistence-across-tabs"></a>

タブでチャットが開かれている状態で、ユーザーが新しいタブを開いて別のチャットを開始すると、デフォルトでは既存のチャットに接続せずに新しいチャットが開始されます。ユーザーが最初のタブで開始した既存のチャットに接続できるようにする場合は、タブをまたいだチャットセッションの永続性を有効にします。

チャットセッションは、ブラウザのセッションストレージに `persistedChatSession` 変数によって保存されます。この値を、ウィジェットが最初に初期化されるときに新しいタブのセッションストレージにコピーする必要があります。手順は次のとおりです。

ユーザーが別のサブドメインに移動したときに同じチャットセッションに接続できるようにするには、Cookie のドメインプロパティを設定します。例えば、`domain1.example.com` と `domain2.example.com` の 2 つのサブドメインを所有している場合、`domain=.example.com` プロパティを追加することで、すべてのサブドメインから Cookie にアクセスできるようになります。

1. ホストされたウィジェットスニペットの他の amazon\$1connect 関数の横に、次のコードをコピーします。これにより、`registerCallback` イベントハンドラーを使って `persistedChatSession` を Cookie として保存し、新しいタブでアクセスできるようにします。また、チャットの終了時には Cookie のクリーンアップも実行します。

   

   ```
   amazon_connect('registerCallback', {
   'CONNECTION_ESTABLISHED': (eventName, { chatDetails, data }) => {
    document.cookie = `activeChat=${sessionStorage.getItem("persistedChatSession")}; SameSite=None; Secure`;
   }, 
   'CHAT_ENDED': () => {
     document.cookie = "activeChat=; SameSite=None; Secure";
   }
   });
   ```

1. Cookie 値が存在する場合に値を取得し、新しいタブでセッションストレージの値を設定します。

   ```
   const cookie = document.cookie.split('; ').find(c => c.startsWith('activeChat='));
   if (cookie) {
     const activeChatValue = cookie.split('=')[1];
     sessionStorage.setItem('persistedChatSession', activeChatValue);
   }
   
   //Your hosted widget snippet should be on this page
   ```

# Amazon Connect チャットの開始時に顧客の表示名を渡す
<a name="pass-display-name-chat"></a>

よりパーソナライズされたエクスペリエンスを顧客とエージェント双方に提供するために、コンタクトの初期化中に顧客の表示名を渡すように Amazon Connect コミュニケーションウィジェットをカスタマイズできます。この名前は、チャットのやり取りの間ずっと、顧客とエージェントの両方に表示されます。この表示名は、チャットのトランスクリプトに記録されます。

次の画像は、チャットエクスペリエンスでの顧客の表示名と、エージェントの CCP での名前を示しています。

![\[チャットエクスペリエンスでの顧客の名前、エージェントの CCP での顧客の名前。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-displayname.png)


1. 顧客は、チャットのユーザーインターフェイスを使用して、顧客の表示名がどうなっているかを表示できます。

1. エージェントは、CCP を使用して、顧客の表示名がどうなっているかを表示できます。

## コミュニケーションウィジェットで顧客の表示名を渡す方法
<a name="setup-display-name"></a>

顧客の表示名を渡すには、スニペットにコールバック関数を実装します。Amazon Connect は、表示名を自動的に取得します。

1. まだ完了していない場合は、「[Amazon Connect がホストするウェブサイトにチャットユーザーインターフェイスを追加する](add-chat-to-website.md)」のステップを完了してください。

1. 既存のウィジェットスニペットを増やして、`customerDisplayName` コールバックを追加します。次の例のようになります。

   ```
   amazon_connect('customerDisplayName', function(callback) {
     const displayName = 'Jane Doe';
     callback(displayName);
   });
   ```

   重要なのは、名前が `callback(name)` に渡されるということです。

## 顧客の表示名について知っておくべきこと
<a name="setup-display-name-important-notes"></a>
+ 同時に存在できる `customerDisplayName` 関数は 1 つだけです。
+ 顧客の表示名は、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-Type-ParticipantDetails-DisplayName) API によって設定された制限に従う必要があります。つまり、名前は 1～256 文字の文字列でなければなりません。
+ 空の文字列、null、または未定義は、表示名に対する無効な入力です。これらの入力が誤って渡されないようにするため、ウィジェットは「`Invalid customerDisplayName provided`」というエラーをブラウザコンソールでログに記録し、**[Customer]** (顧客) というデフォルトの表示名でチャットを開始します。
+ スニペットはウェブサイトのフロントエンドにあるため、機密データを表示名として渡さないでください。データを安全に保ち、攻撃や不正行為者から保護するために、適切なセキュリティのプラクティスに従うようにしてください。

# チャットの開始時にコンタクトコントロールパネル (CCP) のエージェントに問い合わせ属性を渡す
<a name="pass-contact-attributes-chat"></a>

[コンタクトの属性](what-is-a-contact-attribute.md)を使用して、コミュニケーションウィジェットを使用しているコンタクトに関する情報をキャプチャできます。その後、問い合わせコントロールパネル (CCP) でその情報をエージェントに表示できます。あるいは、フロー内の他の場所でも使用できます。

例えば、「ようこそ」メッセージの中で顧客の名前を言うようにフローをカスタマイズできます。または、アカウント/メンバー ID、名前やメールなどの顧客識別子、問い合わせに関連付けられたその他のメタデータなど、自身のビジネスに固有の属性を使用できます。

## コミュニケーションウィジェットにコンタクトの属性を渡す方法
<a name="how-to-contact-attributes-chatwidget"></a>

1. コミュニケーションウィジェットでセキュリティをまだ有効にしていない場合、「[Amazon Connect がホストするウェブサイトにチャットユーザーインターフェイスを追加する](add-chat-to-website.md)」の説明に従って有効にします。

   1. ステップ 2 の **[Add security for your chat widget]** (チャットウィジェットでのセキュリティの追加) で、**[Yes]** (はい) を選択します。

   1. ステップ 3 では、セキュリティキーを使用して JSON ウェブトークンを生成します。

1. 問い合わせ属性を JWT のペイロードに `attributes` クレームとして追加します。

   Python で、問い合わせ属性を持つ JWT を生成する方法の例は次のとおりです。
**注記**  
JWT は前提条件としてインストールする必要があります。インストールするには、ターミナルで `pip install PyJWT` を実行します。

   ```
   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), 
   '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
   ```

   ペイロードでは、文字列キー `attributes` (そのまま、すべて小文字) を作成し、オブジェクトをその値にする必要があります。そのオブジェクトには、文字列と文字列のキーと値のペアが必要です。いずれかの属性に文字列以外のものが渡されると、チャットは開始されません。

   コンタクト属性は、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes) API によって設定された制限に従う必要があります。
   + キーの長さは 1 以上である必要があります
   + 値の長さは最短の場合 0 でも構いません

オプションで、ペイロードの [SegmentAttributeValue](https://docs.aws.amazon.com/connect/latest/APIReference/API_SegmentAttributeValue.html) オブジェクトマップに [segmentAttributes] 文字列を追加することができます。属性は標準 Amazon Connect 属性です。フローでアクセスできます。コンタクト属性は、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes) API によって設定された制限に従う必要があります。

## 代替方法: スニペットコードから直接コンタクト属性を渡す
<a name="pass-attributes-directly"></a>

**注記**  
スニペットコードで渡されるすべてのコンタクト属性キーの前には `HostedWidget-` が付加されます。次の例の場合、エージェント側はキーと値のペアを `HostedWidget-foo: 'bar'` として認識します。
これらの属性は、`HostedWidget-` プレフィックスでスコープが指定されますが、依然としてクライアント側では変更可能 (ミュータブル) です。フローで PII または変更不可能 (イミュータブル) なデータが必要となる場合は、JWT 設定を使用してください。

次の例は、ウィジェットのセキュリティを有効にせずに、スニペットコードから直接コンタクト属性を渡す方法を示しています。

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...

  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### フローで属性を使用する
<a name="contact-flow-usage-chat"></a>

次の画像で示すように、[[コンタクト属性の確認]](check-contact-attributes.md) フローブロックは、**[ユーザー定義]** の名前空間を使用してこれらの属性へのアクセスを提供します。このフローブロックを利用して、分岐ロジックを追加できます。フルパスは `$.Attributes.HostedWidget-attributeName` です。

![\[Valid プロンプトと Invalid プロンプトに分岐するフローブロックを示した画像。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## 注意すべき点
<a name="contact-attributes-chatwidget-important-notes"></a>
+ コミュニケーションウィジェットには、エンコードされたトークン全体に対して 6,144 バイトの制限があります。JavaScript は UTF-16 エンコーディングを使用していて、1 文字あたり 2 バイトが使用されるため、`encoded_token` の最大サイズは 3,000 文字前後になるはずです。
+ encoded\$1token を `callback(data)` に渡す必要があります。`authenticate` スニペットには追加の変更は必要ありません。例: 

  ```
  amazon_connect('authenticate', function(callback) {
    window.fetch('/token').then(res => {
      res.json().then(data => {
        callback(data.data);
      });
    });
  });
  ```
+ JWT を使用して問い合わせ属性を渡すと、データの整合性が保証されます。共有のシークレットを保護し、適切なセキュリティのプラクティスに従う限り、不正行為者がデータを操作できないことが保証されます。
+ 問い合わせ属性は JWT でのみエンコードされ、暗号化されないため、属性をデコードして読み取ることができます。
+ [シミュレートされたチャットエクスペリエンス](chat-testing.md#test-chat)を使用してチャットエクスペリエンスをテストし、コンタクト属性を含める場合は、次の画像に示すように、キーと値の両方を引用符で囲んでください。  
![\[[テスト設定] ページ、引用符で囲まれたコンタクト属性キー、引用符で囲まれた値。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/test-chat-contact-attributes.png)

# Amazon Connect チャットウィジェットの追加のカスタマイズ
<a name="pass-customization-object"></a>

必要に応じて、次のカスタマイズをチャットユーザーインターフェイスに追加できます。
+ **[チャットを終了]** ボタンをフッターではなくヘッダーのドロップダウンメニューに表示する。
+ 表示名をマスクしたり非表示にしたりする。
+ メッセージアイコンを追加する。
+ イベントメッセージをオーバーライドする。
+ 顧客が **[チャットを終了]** ボタンを選択したときに表示される確認ダイアログを設定する。このダイアログは、チャットセッションを本当に終了してもよいかを顧客に確認するためのものです。確認のダイアログ、タイトル、メッセージ、ボタンテキストをカスタマイズできます。
+ 添付ファイル拒否のメッセージをオーバーライドする。

## カスタマイズオブジェクトを設定する
<a name="configure-customization-object"></a>

この例は、一部のオプションのカスタマイズを実装する方法を示しています。考えられるすべてのカスタマイズのリストについては、「[サポートされているオプションと制約](#customization-options-constraints)」を参照してください。これらのカスタマイズはオプションのため、以下の例に示すフィールドの一部または全部を実装することができます。`eventNames.customer`、`eventNames.agent`、`eventNames.supervisor`、`eventMessages.participantJoined`、`eventMessages.participantDisconnect`、`eventMessages.participantLeft`、`eventMessages.participantIdle`、`eventMessages.participantReturned`、および `eventMessages.chatEnded` の文字列は、必要に応じて置き換えます。アイコンはパブリック URL でホストする必要があります。

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
            dynamicHeader: true,
        },
        transcript: { 
            hideDisplayNames: false, 
            eventNames: {
                customer: "User",
                agent: "Webchat Agent",
                supervisor: "Webchat Supervisor"
            },
            eventMessages: {
                participantJoined: "{name} has joined the chat",
                participantDisconnect: "",
                participantLeft: "{name} has dropped",
                participantIdle: "{name}, are you still there?",
                participantReturned: "",
                chatEnded: "Chat ended",
            },
            displayIcons: true,
            iconSources: { 
                botMessage: "imageURL",
                systemMessage: "imageURL",
                agentMessage: "imageURL",
                customerMessage: "imageURL",
            },
        },
        composer: {
            disableEmojiPicker: true,
            disableCustomerAttachments: true,
            alwaysHideToolbar: true,
            hide: false,
        },
        footer: {
            disabled:true,
            skipCloseChatButton: true,
        },
        endChat: {
            enableConfirmationDialog: true,
            confirmationDialogText: {
                title: "End Chat",
                message: "Are you sure you want to end this chat?",
                confirmButtonText: "End Chat",
                cancelButtonText: "Cancel",
        },
    },
    attachment: {
         // Default rejectedErrorMessage: Attachment was rejected.
        rejectedErrorMessage: "Custom Error Message: Files cannot exceed 15 MB." //this is customizable attribute 
    }
});
```

次の画像は、この例を使用した場合のカスタマイズの外観を示しています。

![\[カスタマイズできる表示名、メニューの場所、アイコン、およびチャット終了の確認ダイアログを示す図。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chat-customization-diagram2.png)


## サポートされているオプションと制約
<a name="customization-options-constraints"></a>

サポートされているカスタマイズフィールドと推奨される値の制約は、次の表のとおりです。


| カスタムレイアウトオプション | 型 | 説明 | 
| --- | --- | --- | 
|  `header.dropdown`  |  ブール値  |  デフォルトのフッターの代わりにヘッダードロップダウンメニューを表示します  このオプションを `true` に設定すると、**[トランスクリプトダウンロード]** ボタンが表示されます。オプションを `false` に設定するか、オプションを削除するまでこれが表示されたままになります。   | 
| `header.dynamicHeader` | ブール値 | ヘッダータイトルを「ボット/AgentNameとのチャット」に動的に設定します。 | 
| `header.hideTranscriptDownloadButton` | ブール値 | ヘッダードロップダウンメニューの[チャット記録のダウンロード](chat-widget-download-transcript.md)ボタンを非表示にします。デフォルト値は false です。 | 
|  `transcript.hideDisplayNames`  |  ブール値  |  すべての表示名を非表示にして、`eventNames` が指定されていない場合はデフォルトの名前マスクを適用します。  | 
|  `transcript.eventNames.customer`  |  String  |  顧客の表示名をマスクします。  | 
|  `transcript.eventNames.agent`  |  String  |  エージェントの表示名をマスクします。  | 
|  `transcript.eventNames.supervisor`  |  String  |  スーパーバイザーの表示名をマスクします。  | 
|  ` transcript.eventMessages.participantJoined`  |  String  |  参加者がチャットに参加したときのトランスクリプトのイベントメッセージをオーバーライドします。空の文字列を指定すると、イベントメッセージはトランスクリプトから省略されます。メッセージで `{name}` を渡して、対応する参加者の表示名に置き換えることができます。デフォルトのメッセージは `{name} has joined the chat` です。  | 
|  `transcript.eventMessages.participantDisconnect`  |  String  |  参加者がチャットから切断されたときのトランスクリプトのイベントメッセージをオーバーライドします。空の文字列を指定すると、イベントメッセージはトランスクリプトから省略されます。メッセージで `{name}` を渡して、対応する参加者の表示名に置き換えることができます。デフォルトのメッセージは \$1`name} has been idle too long, disconnecting` です。  | 
|  `transcript.eventMessages.participantLeft`  |  String  |  参加者がチャットから退出したときのトランスクリプトのイベントメッセージをオーバーライドします。空の文字列を指定すると、イベントメッセージはトランスクリプトから省略されます。メッセージで `{name}` を渡して、対応する参加者の表示名に置き換えることができます。デフォルトのメッセージは `{name} has left the chat` です。  | 
|  `transcript.eventMessages.participantIdle`  |  String  |  参加者がアイドル状態になったときのトランスクリプトのイベントメッセージをオーバーライドします。空の文字列を指定すると、イベントメッセージはトランスクリプトから省略されます。メッセージで `{name}` を渡して、対応する参加者の表示名に置き換えることができます。デフォルトのメッセージは `{name} has become idle` です。  | 
|  `transcript.eventMessages.participantReturned`  |  String  |  参加者がチャットに戻ったときのトランスクリプトのイベントメッセージをオーバーライドします。空の文字列を指定すると、イベントメッセージはトランスクリプトから省略されます。メッセージで `{name} ` を渡して、対応する参加者の表示名に置き換えることができます。デフォルトのメッセージは `{name} has returned` です。  | 
|  `transcript.eventMessages.chatEnded`  |  String  |  チャットが終了したときのトランスクリプトのイベントメッセージをオーバーライドします。空の文字列を指定すると、イベントメッセージはトランスクリプトから省略されます。メッセージで `{name}` を渡して、対応する参加者の表示名に置き換えることができます。デフォルトのメッセージは `Chat has ended!` です。  | 
|  `transcript.displayIcons`  |  ブール値  |  メッセージ表示アイコンを有効にします。  | 
|  `transcript.iconSources.botMessage`  |  String  |  ボットメッセージに表示されるアイコンは、パブリック URL でホストされている必要があります。  | 
|  `transcript.iconSources.systemMessage`  |  String  |  システムメッセージに表示されるアイコンは、パブリック URL でホストされている必要があります。  | 
|  `transcript.iconSources.agentMessage`  |  String  |  エージェントのメッセージに表示されるアイコンは、パブリック URL でホストされている必要があります。  | 
|  `transcript.iconSources.customerMessage`  |  String  |  顧客のメッセージに表示されるアイコンは、パブリック URL でホストされている必要があります。  | 
|  `composer.alwaysHideToolbar`  |  ブール値  |  太字、斜体、箇条書きリスト、番号付きリストのオプションなど、テキストの書式設定機能を含む書式設定ツールバーを非表示にします。  | 
|  `composer.disableEmojiPicker`  |  ブール値  |  [リッチテキストエディタ](enable-text-formatting-chat.md)の使用時に絵文字ピッカーを無効にします。  | 
| `composer.disableCustomerAttachments` | ブール値 | 顧客が添付ファイルを送信またはアップロードできないようにします。 | 
| `composer.hide` | ブール値 | コンポーザー (`true`) を非表示にするか、 () を表示します`false`。イベント (エージェントが参加する場合など) に基づいてコンポーザーを切り替えるには、 `hideComposer`メソッド`registerCallback`で を使用します。詳細については、「[カスタマイズできる Amazon Connect でサポートされているウィジェットのスニペットフィールド](supported-snippet-fields.md)」を参照してください。<pre>document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatInterface.hideComposer(false)</pre> | 
|  `footer.disabled`  |  ブール値  |  デフォルトのフッターと **[チャットを終了]** ボタンを非表示にします。  | 
|  `footer.skipCloseChatButton`  |  ブール値  |  **[チャットを終了]** ボタンをクリックすると、**[閉じる]** ボタンを表示せずにウィジェットを直接閉じます。  | 
| `endChat.enableConfirmationDialog` | ブール値 | チャット終了の確認ダイアログを有効にします。confirmationDialogText が指定されていない場合、デフォルトのテキストが使用されます。 | 
| `endChat.confirmationDialogText.title` | String | チャット終了の確認ダイアログのタイトルをオーバーライドします。 | 
| `endChat.confirmationDialogText.message` | String | チャット終了の確認ダイアログのメッセージをオーバーライドします。 | 
| `endChat.confirmationDialogText.confirmButtonText` | String | チャット終了の確認ダイアログに表示される確認ボタンのテキストをオーバーライドします。 | 
| `endChat.confirmationDialogText.cancelButtonText` | String | チャット終了の確認ダイアログに表示されるキャンセルボタンのテキストをオーバーライドします。 | 
| `attachment.rejectedErrorMessage` | String | チャットウィジェットの添付ファイル拒否のエラーメッセージをオーバーライドします。 | 

# Amazon Connect でチャットウィジェットのトランスクリプトをダウンロードする
<a name="chat-widget-download-transcript"></a>

チャットウィジェットでチャット記録の PDF をダウンロードできます。

**Topics**
+ [ヘッダードロップダウンを有効にする](#chat-widget-download-transcript-enable-header-dropdown)
+ [チャット記録の PDF をダウンロードする](#chat-widget-download-transcript-pdf)

## ヘッダードロップダウンを有効にする
<a name="chat-widget-download-transcript-enable-header-dropdown"></a>

チャット記録をダウンロードするボタンは、ヘッダーのドロップダウンメニュー内にあります。ヘッダーのドロップダウンメニューを有効にするには、ウィジェットスクリプトでチャットウィジェットの [CustomizationObject](pass-customization-object.md) を設定する必要があります。

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
        }
});
```

ヘッダーのドロップダウンメニューを有効にすると、**[チャットを終了]** 機能がそのドロップダウンメニューに移動するため、フッターが自動的に無効になる点に注意してください。フッターを維持したい場合は、次のようにして再び有効にすることができます。

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
        },
        footer: {
            disabled: false,
        }
});
```

## チャット記録の PDF をダウンロードする
<a name="chat-widget-download-transcript-pdf"></a>

ヘッダーのドロップダウンメニューを有効にすると、チャットウィジェットの左上に 3 点メニューが表示されるようになります。そのドロップダウンメニュー内に、**チャット記録**のダウンロードボタンが表示されます。

![\[チャット記録のダウンロードボタンを示しています。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chat-widget-download-transcript-pdf-1.png)


**チャット記録**のダウンロードボタンを選択すると、PDF のダウンロードが開始します。チャット記録の PDF には、すべてのメッセージ、表示名、タイムスタンプ、参加者の退出や参加などのメッセージイベントが表示されます。

![\[ダウンロードされたチャット記録の例。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chat-widget-download-transcript-pdf-2.png)


# Amazon Connect オープンソースのサンプルを使用してチャットをカスタマイズする
<a name="download-chat-example"></a>

顧客がエージェントとのやり取りに使用するチャットエクスペリエンスを、さらにカスタマイズできます。GitHub で [Amazon Connect のオープンソースライブラリ](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/asyncCustomerChatUX) を使用します。このプラットフォームを使用することで、すぐに作業を開始できます。処理の流れ
+ GitHub リポジトリは、CloudFormation テンプレートにリンクします。これにより、Lambda 関数を開始する Amazon API Gateway エンドポイントが開始されます。このテンプレートは、サンプルとして使用できます。
+  AWS CloudFormation スタックを作成したら、アプリからこの API を呼び出し、構築済みのコミュニケーションウィジェットをインポートし、ウィジェットにレスポンスを渡して、チャットを開始できます。

チャットエクスペリエンスのカスタマイズの詳細については、次を参照してください。
+ [Amazon Connect Service API ドキュメント](https://docs.aws.amazon.com/connect/latest/APIReference/welcome.html) (特に [StartChatConnect](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API)。
+  [Amazon Connect Participant Service API](https://docs.aws.amazon.com/connect-participant/latest/APIReference/Welcome.html)。
+  [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams)。既存のアプリケーションを Amazon Connect と統合するために使用します。問い合わせコントロールパネル (CCP) コンポーネントをアプリに埋め込むことができます。
+ [Amazon Connect Chat SDK とサンプル実装](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 

# Amazon Connect API を使用して、アプリケーションでチャットを開始する
<a name="integrate-with-startchatcontact-api"></a>

Amazon Connect API の StartChatContact API を使用して、アプリケーションでチャットを開始します。

チャットを開始するには、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API を使用します。

初めてチャットエクスペリエンスの探索を行うと、履歴メトリクスレポートの [**着信問い合わせ**] メトリクスでチャットがカウントされないことがわかります。これは、問い合わせレコードのチャットの開始メソッドが **API** であるためです。

次のコンタクト記録の画像は、*[開始方法]* が *[API]* に設定されていることを示しています。

![\[コンタクト記録、開始方法が API に設定されています。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/ctr-api.png)


チャットがエージェントに転送されると、[**着信問い合わせ**] メトリクスが増加します。転送に関する問い合わせレコードでは API の数はそれ以上増加しませんが、[**Contacts Incoming**] (着信問い合わせ) の数は増加します。

# チャットメッセージ着信時に顧客にブラウザ通知を送信する
<a name="browser-notifications-chat"></a>

コミュニケーションウィジェットは、顧客のデスクトップデバイスでのブラウザ通知をサポートします。具体的には、顧客が新しいメッセージを受信しても、チャットウィンドウがあるウェブページをアクティブにしていない場合に、ウェブブラウザを介して顧客は通知を受け取ります。顧客がこの通知をクリックまたはタップすると、チャットウィンドウがあるウェブページに自動的にリダイレクトされます。お客様は、各チャットの会話の開始時に通知を有効または無効にすることができます。

次の画像は、チャットウィンドウがあるウェブページを顧客が表示していない場合に受け取る通知バナーの例を示しています。バナーは、お客様に新しいメッセージがあることを伝え、ウェブサイトの名前を表示します。

![\[新しいメッセージを受信したことを示す Google Chrome のバナー。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-notification-banner.png)


また、コミュニケーションウィジェットを最小化すると、通知アイコン (赤い点) が表示されます。次の図は、チャットウィンドウが最小化されたときにお客様が受け取る通知アイコンの画像を示しています。

![\[通知アイコン。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-browser-notification.png)


このような機能はいずれも、コミュニケーションウィジェットに自動的に組み込まれています。お客様がそれらを使用できるようにするためのステップは必要ありません。

チャットを開始し、ウェブサイトまたはドメインからの通知をまだ許可していない場合、お客様に通知を許可/拒否するポップアップが表示されます。通知権限を付与すると、顧客がチャットウィンドウのあるウェブページにいない場合に、エージェントから送信されたメッセージまたは添付ファイルに関するブラウザ通知の受信が開始されます。この動作は、コミュニケーションウィジェットを既に実装している場合にも適用されます。

## テスト方法
<a name="test-browser-notifications-chat"></a>

1. テスト顧客として通知を許可し、エージェントがチャットに接続したら、チャットウィンドウを最小化して、新しいブラウザーインスタンスを開いて、チャットウィンドウがあるウェブページにはアクセスしません。

1. エージェントウィンドウからメッセージを送信します。

1. テスト顧客には、通知バナーが表示されます。

1. 通知バナーを選択またはタップします。チャットウィンドウがあるウェブページに自動的に移動します。

1. 前のステップでチャットウィンドウを最小化したため、コミュニケーションウィジェットには通知アイコン (赤い点) も表示されます。

ブラウザ通知が表示されない場合は、以下の点を確認します。
+ [サポートされているブラウザ](add-chat-to-website.md#chat-widget-supported-browsers)を使っていること。
+ ブラウザでチャットウィンドウのあるウェブページの通知許可が許可されるか有効になっていること。
+ チャットウィンドウがあるウェブページとは別のウェブページを閲覧している際に、エージェント (またはエージェントチャットセッションのユーザー) が新しいメッセージまたは添付ファイルを送信すること。ウィジェット上の通知アイコン (赤い点) を表示するには、チャットウィンドウを最小化します。
+ ブラウザからの通知はスヌーズされません(一時的に却下)。

# Amazon Connect コミュニケーションウィジェットのチャットセッションをプログラムで切断する
<a name="programmatic-chat-disconnect"></a>

JavaScript を使用してコミュニケーションウィジェットのチャットセッションをプログラムで切断するには、ウィジェットの `iframe` に保存されている `disconnect` メソッドを呼び出します。ウィジェットのホストドキュメントから、次のコードスニペットを使用して `disconnect` 関数を参照できます。

```
document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect()
```

この関数は既存のウィジェットスクリプトに簡単に追加できます。次にコードスニペットの例を示します。

```
<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '...');
  amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', '...');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
 
  // Add disconnect event listener
  window.addEventListener("pagehide", () => {
      document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
  });
</script>
```

## 実装とユースケース
<a name="implementation-chat-disconnect"></a>

プログラムによる disconnect の呼び出しは、さまざまな状況で便利です。`End Chat` ボタンを手動でクリックする以外の方法で、会話を終了するタイミングをより細かく制御できます。`disconnect` を呼び出す一般的なユースケースを以下に示します。

### 閉じたとき、または移動したとき
<a name="close-chat-disconnect"></a>

一般的なユースケースとして、ブラウザまたはタブのコンテキストが破棄されるときに発生するイベントに切断機能を関連付ける場合が挙げられます。ブラウザからの離脱時に発生する一般的なイベントには、`pagehide` と `beforeunload` があります。これらのイベントは、ユーザーがタブやブラウザを更新したり、閉じたり、別の URL に移動したりするとトリガーされます。どちらのイベントもブラウザのコンテキストが破棄されるときに発生しますが、ブラウザのリソースがクリーンアップされる前に `disconnect` 関数を完全に実行できる保証はありません。

`pagehide` は、より最新のページライフサイクルイベントであり、すべての主要なブラウザとオペレーティングシステムでサポートされています。`beforeunload` は、`pagehide` イベントが disconnect を一貫して呼び出せない場合に試みる代替イベントです。ブラウザが閉じる前に `disconnect` 関数を完了できない場合は、`pagehide` より先にトリガーされる `beforeunload` によって、信頼性が向上する可能性があります。ただし、`beforeunload` は特に iOS デバイスで信頼性に問題が発生することがあります。

次にコードスニペットの例を示します。

```
// Call disconnect when `beforeunload` triggers
window.addEventListener("beforeunload", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

// Call disconnect when `pagehide` triggers
window.addEventListener("pagehide", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});
```

### コンテキストを切り替えたとき
<a name="context-chat-disconnect"></a>

もう 1 つのユースケースとして、タブ/アプリの切り替えや最小化、画面のロックなど、ユーザーがコンテキストを切り替えたときに切断をトリガーする場合が挙げられます。このようにコンテキストが表示されなくなった状況は、`visibilitychange` イベントで確実に処理できます。

次にコードスニペットの例を示します。

```
window.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
        document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
    } else if (document.visibilityState === "visible") {
        ...
    }
});
```

# カスタムプロパティを渡して、Amazon Connect のコミュニケーションウィジェットのデフォルトを上書きする
<a name="pass-custom-styles"></a>

チャットのユーザーインターフェイスをさらにカスタマイズするために、独自の値を渡すことでデフォルトのプロパティをオーバーライドできます。例えば、ウィジェットの幅を 400 ピクセル、高さを 700 ピクセルに設定できます (デフォルトのサイズ 300 ピクセル x 540 ピクセル とは対照的に)。希望のフォントの色とサイズを使用することもできます。

## コミュニケーションウィジェットにカスタムスタイルを渡す方法
<a name="chat-widget-pass-custom-styles"></a>

カスタムスタイルを渡すには、次のサンプルコードブロックを使用してウィジェットに埋め込みます。 はカスタムスタイルを自動的に Amazon Connect 取得します。次の例に示されているフィールドはすべてオプションです。

```
amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: "'AmazonEmber-Light', serif",
     customTypefaceStylesheetUrl: "https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf",
     headerHeight: '120px',
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950',
     agentMessageTextColor: '#ef18d3',
     systemMessageTextColor: '#ef18d3',
     customerMessageTextColor: '#ef18d3',
     agentChatBubbleColor: '#111112',
     systemChatBubbleColor: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonBackgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     startChatButtonBorderColor: '#fe3',
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 },
  composer: {
     fontSize: '20px', 
 },
  fullscreenMode: true // Enables fullscreen mode on the widget when a mobile screen size is detected in a web browser.
})
```

## サポートされているスタイルおよび制約
<a name="chat-widget-supported-styles"></a>

次の表は、サポートされているカスタムスタイル名と推奨される値の制約を示しています。一部のスタイルはグローバルレベルとコンポーネントレベルの両方に存在します。例えば、`fontSize` スタイルはグローバルに存在し、トランスクリプトコンポーネントにも存在します。コンポーネントレベルのスタイルは優先度が高く、チャットウィジェットでも優先されます。


|  カスタムスタイル名  |  説明  |  推奨される制約  | 
| --- | --- | --- | 
|  `global.frameWidth`  |  ウィジェットフレーム全体の幅  |  最小値: 300 ピクセル 最大値: ウィンドウ幅 ウィンドウサイズに基づいて調整することをお勧めします  | 
|  `global.frameHeight`  |  ウィジェットフレーム全体の高さ  |  最小: 480 ピクセル 最大: ウィンドウの高さ ウィンドウサイズに基づいて調整することをお勧めします  | 
|  `global.textColor`  |  すべてのテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `global.fontSize`  |  すべてのテキストのフォントサイズ  |  さまざまなユースケースで 12 ピクセルから 20 ピクセルを推奨  | 
|  `global.footerHeight`  |  ウィジェットのフッターの高さ  |  最小: 50 ピクセル 最大: フレームの高さ フレームサイズに基づいて調整することをお勧めします  | 
|  `global.typeface`  |  ウィジェットで使われている書体  |  次のリスト内の任意の書体: Arial、Times New Roman、Times、Courier New、Courier、Courier、Verdana、Georgia、Palatino、Garamond、Book man、Tacoma、Trebuches MS、Arial Black、Impact、Comic Sans MS。 カスタムの書体/フォントファミリーを追加することもできますが、書体ファイルにパブリック読み取りアクセスを設定してホストする必要があります。例えば、[Amazon デベロッパーライブラリ](https://developer.amazon.com/en-US/alexa/branding/echo-guidelines/identity-guidelines/typography)で Amazon Ember フォントファミリーを使用するためのドキュメントを参照できます。  | 
|  `global.customTypefaceStylesheetUrl`  |  パブリック読み取りアクセスが可能なカスタム書体ファイルがホストされている場所  |  書体ファイルがホストされているパブリック HTTP の場所へのリンク。例えば、AmazonEmber Light 書体の CDN の場所は `https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf` です。  | 
|  `header.headerTextColor`  |  ヘッダーメッセージのテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `header.headerBackgroundColor`  |  ヘッダーの背景のテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `global.headerHeight`  |  ウィジェットのヘッダーの高さ  |  タイトル、イメージロゴ、またはその両方を使用するかどうかによって調整することをお勧めします。  | 
|  `transcript.messageFontSize`  |  すべてのテキストのフォントサイズ  |  さまざまなユースケースで 12 ピクセルから 20 ピクセルを推奨  | 
|  `transcript.messageTextColor`  |  トランスクリプトメッセージのテキストカラー  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `transcript.widgetBackgroundColor`  |  チャット記録の背景のテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `transcript.customerMessageTextColor`  |  顧客メッセージのテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `transcript.agentMessageTextColor`  |  エージェントメッセージのテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `transcript.systemMessageTextColor`  |  システムメッセージのテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `transcript.agentChatBubbleColor`  |  エージェントメッセージのバブルの背景色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `transcript.customerChatBubbleColor`  |  顧客メッセージのバブルの背景色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `transcript.systemChatBubbleColor`  |  システムメッセージのバブルの背景色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `footer.buttonFontSize`  |  アクションボタンテキストのフォントサイズ  |  フッターの高さに基づいて調整することをお勧めします  | 
|  `footer.buttonTextColor`  |  アクションボタンのテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `footer.buttonBorderColor`  |  アクションボタンの境界線の色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `footer.buttonBackgroundColor`  |  アクションボタンの背景の色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `footer.BackgroundColor`  |  フッターの背景の色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `footer.startCallButtonTextColor`  |  通話開始ボタンのテキストの色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `footer.startCallButtonBorderColor`  |  通話開始ボタンの境界線の色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `footer.startCallButtonBackgroundColor`  |  通話開始ボタンの背景の色  |  任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。  | 
|  `logo.logoMaxHeight`  |  ロゴの最大の高さ  |  最小: 0 ピクセル 最大: ヘッダーの高さ 画像のサイズとフレームの高さに基づいて調整することをお勧めします  | 
|  `logo.logoMaxWidth`  |  ロゴの最大の幅  |  最小: 0 ピクセル 最大: ヘッダーの幅 画像のサイズとフレームの幅に基づいて調整することをお勧めします  | 
|  `composer.fontSize`  |  コンポーザーテキストのフォントサイズ  |  さまざまなユースケースで 12 ピクセルから 20 ピクセルを推奨  | 
|  `fullscreenMode`  |  ウェブブラウザでモバイル画面サイズが検出された場合に、ウィジェットで全画面表示モードを有効化  |  型: ブール値  | 

コミュニケーションウィジェットの構成要素は次のとおりです。

![\[コミュニケーションウィジェットの構成要素\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-elements.png)


## コミュニケーションウィジェットのシステムやボットの表示名とロゴをオーバーライドする方法
<a name="pass-override-system"></a>

 Amazon Connect 管理ウェブサイトで設定されたシステム/ボットの表示名とロゴ設定を上書きするには、次のコードブロックをウィジェットコードスニペットに埋め込みます。次の例に示されているフィールドはすべてオプションです。

```
amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logoUrl: "https://example.com/abc.png",
     logoAltText: "Amazon Logo Banner"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Chat",      
      startCallButtonText: "Start Call"
 },
})
```

### サポートされているプロパティと制約
<a name="supported-properties-displaynames"></a>


| カスタムスタイル名 | 説明 | 推奨される制約 | 
| --- | --- | --- | 
|  `header.headerMessage`  | ヘッダーメッセージのテキスト | 最小長: 1 文字 最大長: 11 文字  ヘッダーの幅に基づいて調整することをお勧めします | 
|  `header.logoUrl`  | ロゴの画像を指す URL |  最大長: 2048 文字 .png、.jpg、または .svg ファイルを指す有効な URL を指定する必要があります | 
|  `header.logoAltText`  | ロゴバナーの alt 属性をオーバーライドするテキスト |  最大長: 2048 文字 | 
|  `transcript.systemMessageDisplayName`  | SYSTEM\$1MESSAGE 表示名をオーバーライドするテキスト | 最小長: 1 文字 最大長: 26 文字  | 
|  `transcript.botMessageDisplayName`  | ボットの表示名をオーバーライドするテキスト | 最小長: 1 文字 最大長: 26 文字  | 
|  `footer.textInputPlaceholder`  | テキスト入力のプレースホルダーをオーバーライドするテキスト | 最小長: 1 文字 最大長: 256 文字  | 
|  `footer.endChatButtonText`  | チャット終了ボタンのテキストをオーバーライドするテキスト | 最小長: 1 文字 最大長: 256 文字 ボタンの幅に基づいて調整することをお勧めします  | 
|  `footer.closeChatButtonText`  | チャット終了ボタンのテキストをオーバーライドするテキスト | 最小長: 1 文字 最大長: 256 文字 ボタンの幅に基づいて調整することをお勧めします  | 
|  `footer.startCallButtonText`  | 通話開始ボタンのテキストをオーバーライドするテキスト | 最小長: 1 文字 最大長: 256 文字 ボタンの幅に基づいて調整することをお勧めします  | 

## カスタムプロパティを指定したコミュニケーションウィジェットをプレビューする
<a name="chat-widget-preview"></a>

カスタムプロパティを指定したコミュニケーションウィジェットは、本番環境に移行する前に必ずプレビューしてください。カスタム値が適切に設定されていないと、コミュニケーションウィジェットのユーザーインターフェイスが機能しない可能性があります。カスタマーにリリースする前に、さまざまなブラウザやデバイスでテストすることをお勧めします。

以下は、不適切な値を使用すると壊れる可能性のある問題の例と、推奨される修正方法を示しています。
+ **問題:** ウィジェットウィンドウが画面の大部分を占める。

  **修正:** 小さいサイズの `frameWidth` および `frameHeight` を使用します。
+ **問題:** フォントサイズが小さすぎる、または大きすぎる。

  **修正:** フォントサイズを調整します。
+ **問題:** チャットの終了 (フッター) の下に空白の領域がある。

  **修正:**小さいサイズの `frameHeight` または大きいサイズの `footerHeight` を使用します。
+ **問題:** チャット終了ボタンが小さすぎる、または大きすぎる。

  **修正:** `buttonFontSize` を調整します。
+ **問題:** チャット終了ボタンがフッター領域の外に出ている。

  **修正:** 大きいサイズの `footerHeight` または小さいサイズの `buttonFontSize` を使用します。

# CSS/JavaScript を使用して Amazon Connect ウィジェットのボタンとフレームをターゲットにする
<a name="target-widget-button"></a>

コミュニケーションウィジェットの開閉ボタンとウィジェットフレームは、ホストウェブサイト上で直接レンダリングされます。特定のセレクタを使用すると、これらの要素を CSS を使ってターゲットにしたり、JavaScript で参照したりできます。

**ヒント**  
ウィジェットボタンの色またはウィジェット自体のスタイルを更新するには、[Amazon Connect 管理ウェブサイト](add-chat-to-website.md#customize-chat-widget)を使用します。さらにカスタマイズ可能なスタイルについては、コミュニケーションウィジェットに直接[カスタムスタイルを渡す](pass-custom-styles.md)ことができます。

## ウィジェットの要素 ID と例
<a name="widget-elementid"></a>

次の図は、チャットウィジェットのボタンがユーザーの画面にどのように表示されるかを示しています。最初の図は、チャットウィジェットを開くための [開く] ボタン、2 番目の図は、チャットウィジェットを閉じるための [閉じる] ボタンを示しています。

![\[チャットウィンドウを開く場合と閉じる場合を並べて示したチャットウィジェットの図。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/widget-elements.png)


1.  ウィジェットを開くボタン: `#amazon-connect-open-widget-button` 

1. ウィジェットを閉じるボタン: `#amazon-connect-close-widget-button`

1. ウィジェットフレーム: `#amazon-connect-widget-frame`

   1. ウィジェットフレームが開いているとき: `#amazon-connect-widget-frame.show`

   1. ウィジェットフレームが閉じているとき: `#amazon-connect-widget-frame:not(.show)`

これらの要素を変更する CSS スタイルシートの例を次に示します。

```
/* Target widget button while widget is minimized */
#amazon-connect-open-widget-button {
  ...
}

/* Target widget button while widget is showing */
#amazon-connect-close-widget-button {
  ...
}

/* Target widget frame */
#amazon-connect-widget-frame {
  ...
}

/* Target widget frame while it is showing */
#amazon-connect-widget-frame.show {
  ...
}

/* Target widget frame while it is minimized */
#amazon-connect-widget-frame:not(.show) {
  ...
}
```

JavaScript を使用してこれらの要素を参照する例を次に示します。

```
const openWidgetButton = document.getElementById("amazon-connect-open-widget-button");
const closeWidgetButton = document.getElementById("amazon-connect-close-widget-button");

const widgetFrame = document.querySelector("#amazon-connect-widget-frame");
const openWidgetFrame = document.querySelector("#amazon-connect-widget-frame.show");
const hiddenWidgetFrame = document.querySelector("#amazon-connect-widget-frame:not(.show)");
```

# Amazon Connect コミュニケーションウィジェットに関する問題のトラブルシューティング
<a name="ts-cw"></a>

このトピックは、 Amazon Connect 管理ウェブサイトでコミュニケーションウィジェットを設定するときに発生する可能性のある問題を調査する必要があるデベロッパーを対象としています。

**Topics**
+ [「問題が発生しました」](#sww)
+ [お客様にエージェントメッセージが届かない: ネットワークまたは WebSocket の切断](#mam)
+ [サードパーティーリンクを開く場合の CORS のバイパス](#bcwotpl)

## 「問題が発生しました」
<a name="sww"></a>

コミュニケーションウィジェットをロードする際に次の **[問題が発生しました]** エラーメッセージが表示された場合は、ブラウザのツールを開いてエラーログを確認します。

![\[「問題が発生しました」というエラーメッセージ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-error-message.png)


このエラーの原因となる一般的な問題は次のとおりです。

### 400 Invalid request
<a name="400-invalid-request"></a>

ログに 400 invalid request が記載されている場合、いくつかの原因が考えられます。
+ コミュニケーションウィジェットが許可されたドメインで提供されていません。ウィジェットをホストするドメインを指定する必要があります。
+ エンドポイントへのリクエストが正しくフォーマットされていません。これは通常、埋め込みスニペットの内容が変更された場合にのみ発生します。

### 401 Unauthorized
<a name="401-unauthorized"></a>

![\[「問題が発生しました」というエラーメッセージ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/something-went-wrong.png)


ログに 401 unauthorized が記載されている場合、これは JSON Web トークン (JWT) 認証の問題です。上記のエラーページが表示されます。

JWT を作成したら、それを `authenticate` コールバック関数で実装する必要があります。次の例は、トークンを取得して使用する場合の実装方法を示しています。

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

実装する必要があるものの、より基本的なバージョンを次に示します。

```
amazon_connect('authenticate', function(callback) {
   callback(token);
});
```

JWT の実装については、「[ステップ 3: コミュニケーションウィジェットのコードとセキュリティキーを確認してコピーする](add-chat-to-website.md#confirm-and-copy-chat-widget-script)」を参照してください。

既にコールバックを実装している場合は、次のシナリオでも 401 が発生する可能性があります。
+ 無効な署名
+ 期限切れのトークン

### 404 Not found
<a name="404-not-found"></a>

404 ステータスコードは通常、リクエストされたリソースが次のような理由で存在しない場合に発生します。
+ API リクエストで無効な widgetId が指定されている
+ widgetId は有効だが、関連付けられたフローが削除またはアーカイブされている
+ ウィジェットが公開されていないか、削除されている

スニペットが Amazon Connect 管理者ウェブサイトからコピーされた正確な方法であり、どの識別子も変更されていないことを確認します。

識別子が変更されていないにもかかわらず 404 が表示される場合は、 AWS サポートにご連絡ください。

### 500 Internal server error
<a name="500-internalservererror-chatwidget"></a>

これは、サービスにリンクされたロールに、チャットを開始するのに必要なアクセス許可がないことで発生します。これは、Amazon Connect インスタンスが 2018 年 10 月より前に作成されたものである場合に発生します。これらのインスタンスでは、サービスにリンクされたロールが設定されていません。

**ソリューション**: `connect:*` ポリシーを、Amazon Connect インスタンスに関連付けられたロールに設定します。詳細については、「[Amazon Connect のサービスにリンクされたロールとロールのアクセス許可](connect-slr.md)」を参照してください。

サービスにリンクされたロールに正しいアクセス許可がある場合は、 AWS サポートにご連絡ください。

## お客様にエージェントメッセージが届かない: ネットワークまたは WebSocket の切断
<a name="mam"></a>

チャットセッションの最中に、チャットアプリケーションを使用しているお客様のネットワーク/WebSocket 接続が途切れることがあります。接続はすぐに復旧しますが、その間にエージェントが送信したメッセージは、お客様のチャットインターフェースに表示されません。

次の画像では、例として、お客様のチャットインターフェイスとエージェントのコンタクトコントロールパネルを並べて表示しています。エージェントが送信したメッセージが、お客様のチャットセッションには表示されていません。しかし、エージェント側には、お客様に届いたように見えています。

![\[CCP 内の、宛先に送信されていないメッセージ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/tw-cw-001-message-not-sent.png)


お客様のチャットアプリケーションでネットワーク/WebSocket 接続が切断された場合、チャットユーザーインターフェースで以下の操作を行い、その後のメッセージと、切断中に送信されたメッセージを取得する必要があります。
+ その後に届くメッセージをあらためて受信できるように、WebSocket 接続を再確立する。
+ [chatSession.getTranscript](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript) ([getTranscripts](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) API) リクエストを行い、お客様が切断されていた間に送信された不達メッセージをすべて取得する。

お客様のチャットユーザーインターフェイスが切断されている間にエージェントがメッセージを送信した場合、そのメッセージは Amazon Connect バックエンドに無事保存されています。CCP は正常に動作し、メッセージはすべてチャット記録として保存されていますが、お客様のデバイスではメッセージを受信できません。クライアントが WebSocket に再接続した時点で、メッセージが一時途切れた状態になります。その後に届くメッセージは WebSocket から再び表示されるようになりますが、コードで明示的に [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) API を呼び出さない限り、途切れたメッセージは表示されないままです。

### ソリューション
<a name="solution-network-disconnected"></a>

[chatSession.onConnectionEstablished](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiononconnectionestablished) イベントハンドラを使用して、[GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) API を呼び出します。`chatSession.onConnectionEstablished` イベントハンドラは、WebSocket が再接続したときにトリガーされます。ChatJS には、WebSocket 接続用のハートビートおよび再試行のロジックが組み込まれています。ただし、ChatJS はチャット記録を保存しないため、手動でチャット記録を再取得するために、チャットユーザーインターフェースにカスタムコードを追加する必要があります。

次のサンプルコードは、`onConnectionEstablished` を実装して `GetTranscript` を呼び出す方法を示しています。

```
import "amazon-connect-chatjs";

const chatSession = connect.ChatSession.create({
  chatDetails: {
    ContactId: "the ID of the contact",
    ParticipantId: "the ID of the chat participant",
    ParticipantToken: "the participant token",
  },
  type: "CUSTOMER",
  options: { region: "us-west-2" },
});

// Triggered when the websocket reconnects
chatSession.onConnectionEstablished(() => {
  chatSession.getTranscript({
    scanDirection: "BACKWARD",
    sortOrder: "ASCENDING",
    maxResults: 15,
    // nextToken?: nextToken - OPTIONAL, for pagination
  })
    .then((response) => {
      const { initialContactId, nextToken, transcript } = response.data;
      // ...
    })
    .catch(() => {})
});
```

```
function loadLatestTranscript(args) {
    // Documentation: https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript
    return chatSession.getTranscript({
        scanDirection: "BACKWARD",
        sortOrder: "ASCENDING",
        maxResults: 15,
        // nextToken?: nextToken - OPTIONAL, for pagination
      })
      .then((response) => {
        const { initialContactId, nextToken, transcript } = response.data;
        
        const exampleMessageObj = transcript[0];
        const {
          DisplayName,
          ParticipantId,
          ParticipantRole, // CUSTOMER, AGENT, SUPERVISOR, SYSTEM
          Content,
          ContentType,
          Id,
          Type,
          AbsoluteTime, // sentTime = new Date(item.AbsoluteTime).getTime() / 1000
          MessageMetadata, // { Receipts: [{ RecipientParticipantId: "asdf" }] }
          Attachments,
          RelatedContactid,
        } = exampleMessageObj;

        return transcript // TODO - store the new transcript somewhere
      })
      .catch((err) => {
        console.log("CustomerUI", "ChatSession", "transcript fetch error: ", err);
      });
}
```

別の例として、[GitHub 上のこちらのオープンソース実装](https://github.com/amazon-connect/amazon-connect-chat-interface/blob/c88f854073fe6dd45546585c3bfa363d3659d73f/src/components/Chat/ChatSession.js#L408)を参照してください。

## サードパーティーリンクを開く場合の CORS のバイパス
<a name="bcwotpl"></a>

セキュリティを強化するために、コミュニケーションウィジェットはサンドボックス環境内で動作します。そのため、ウィジェット内で共有されているサードパーティーリンクは開くことができません。

**解決策**

CORS をバイパスしてサードパーティーリンクを開くには、2 つのオプションがあります。
+ **(推奨)**

  次の属性をコードスニペットに追加してサンドボックス属性を更新することで、新しいタブでリンクを開くことを許可できます。

  ```
  amazon_connect('updateSandboxAttributes', 'allow-scripts allow-same-origin allow-popups allow-downloads allow-top-navigation-by-user-activation allow-popups-to-escape-sandbox')
  ```
**注記**  
属性値は、特定のアクションを許可するために必要に応じて更新できます。これは、新しいタブでリンクを開くことを許可する場合の例です。
+ 次の属性をコードスニペットに追加してサンドボックス属性を削除します。

  ```
  amazon_connect('removeSandboxAttribute', true)
  ```

# 事前コンタクトフォームまたは事前チャットフォームを追加する
<a name="add-precontact-form"></a>

コンタクトを開始する前に、顧客情報を収集できます。
+ **事前コンタクトフォーム**: タスクや E メールでのコンタクトを開始する前に顧客から情報を収集するために追加します。
+ **事前チャットフォーム**: チャットでのコンタクトを開始する前に顧客から情報を収集するために追加します。

収集した情報は、コンタクトコントロールパネル (CCP) でエージェントに表示したり、フロー内の別の場所で使用したりできます。

フォームを作成するには、カスタムビューを作成し、接続アクションボタンコンポーネントを使用します。ビューの詳細については、「[step-by-stepガイドのリソースに Amazon Connect の UI ビルダーを使用する](no-code-ui-builder.md)」を参照してください。

接続アクションボタンを使用すると、フォームからユーザー入力情報を取得し、フォームが送信されたときに実行するアクション (タスク/E メールまたはチャットの開始) を選択できます。

# チャット後のアンケートを有効にする
<a name="enable-post-chat-survey"></a>

チャット後のアンケートでは、チャット会話が終了した直後にエンドユーザーのフィードバックを収集できます。[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API の **`DisconnectOnCustomerExit`**パラメータを使用すると、エンドカスタマーが切断されたときにエージェントの自動切断を設定し、最初に切断された参加者に関係なく切断フローが一貫してトリガーされるようにできます。

## 実装オプション
<a name="post-chat-survey-implementation"></a>

チャット後アンケートを有効にするには、次の 2 つの方法があります。

### カスタムチャットウィジェットの場合
<a name="post-chat-survey-custom-builder"></a>

カスタムチャット実装を使用している場合:

1. [amazon-connect-chatjs](https://github.com/amazon-connect/amazon-connect-chatjs) の最新バージョンにアップグレードします。

1. [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API リクエストに `DisconnectOnCustomerExit`パラメータを追加します。

   ```
   {
       "DisconnectOnCustomerExit": ["AGENT"],
       // ... other StartChatContact parameters
   }
   ```

### Amazon Connect 通信ウィジェットの場合
<a name="post-chat-survey-communication-widget"></a>

Amazon Connect 通信ウィジェットを使用している場合:

1. Amazon Connect コンソールを開き、**コミュニケーションウィジェット**に移動します。

1. コミュニケーションウィジェットページからチャット後のアンケート設定を有効にします。  
![\[チャット後のアンケートオプションを示すコミュニケーションウィジェット設定ページ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/post-chat-survey-communication-widget.png)

## 問い合わせフローを更新してチャット後のアンケートを切断フローとして追加する
<a name="post-chat-survey-disconnect-flow"></a>

チャット後のアンケートを有効にするには、チャットソリューションに接続されている切断フローを更新する必要があります。設定すると、顧客がチャットセッションを終了すると、アンケートが自動的にトリガーされます。

切断フローの作成については、「」を参照してください[チャットシナリオの例](web-and-mobile-chat.md#example-chat-scenario)。

切断フローにアンケートを実装する方法は 2 つあります。
+ **オプション \$11: ShowView ブロックの使用** - [Amazon Connect のフローブロック: ビューを表示](show-view-block.md)を使用してカスタムアンケートインターフェイスを表示します。
+ **オプション \$12: Lex** の使用 - テキストベースのアンケート収集のために Amazon Lex と統合します。詳細については、「[Amazon Connect インスタンスに Amazon Lex ボットを追加する](amazon-lex.md)」を参照してください。

**注記**  
スーパーバイザーの割り込みシナリオでは、**キューに転送**する前に[Amazon Connect のフローブロック: 作業キューの設定](set-working-queue.md)ブロックを追加してください。これを省略すると、この機能を転送せずにチャットコンタクトが終了します。  

![\[スーパーバイザーの割り込みシナリオのキューへの転送前に作業キューを設定するブロックを示すフロー図。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/post-chat-survey-set-working-queue-block.png)


**問い合わせトレースレコード**  
顧客がチャットセッションを終了すると、Amazon Connect は `CUSTOMER_DISCONNECT`の `disconnectReason`を に設定します[ContactTraceRecord](ctr-data-model.md#ctr-ContactTraceRecord)。`DisconnectOnCustomerExit` を設定すると、システムは新しい問い合わせ ID (`nextContactId`) を生成し、設定された切断フローを開始します。  
例:  

```
{
    "contactId": "104c05e3-abscdfre",
    "nextContactId": "4cbae06d-ca5b-1234567",
    "channel": "CHAT",
    "initiationMethod": "DISCONNECT",
    "disconnectReason": "CUSTOMER_DISCONNECT"
}
```
[Amazon Connect での問い合わせ属性の仕組み](what-is-a-contact-attribute.md) は、問い合わせの検索と問い合わせの詳細で更新されます。  

![\[チャット後のアンケートの問い合わせ属性を示す連絡先の詳細。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/post-chat-survey-contact-attributes.png)


## その他のリソース
<a name="post-chat-survey-additional-resources"></a>
+ [StartChatContact API](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)
+ [Amazon Connect に含まれる最初のコンタクトエクスペリエンスの着信フローのサンプル](sample-inbound-flow.md)
+ [チャットシナリオの例](web-and-mobile-chat.md#example-chat-scenario)
+ [Amazon Connect のフローブロック: 作業キューの設定](set-working-queue.md)
+ [Amazon Connect のフローブロック: キューへ転送](transfer-to-queue.md)
+ [Amazon Connect ShowView](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html)
+ [Amazon Connect と Lex](https://docs.aws.amazon.com/connect/latest/adminguide/amazon-lex.html)
+ [Amazon Connect での問い合わせ属性の仕組み](what-is-a-contact-attribute.md)

# Amazon Connect チャットをモバイルアプリケーションに統合する
<a name="integrate-chat-with-mobile"></a>

このトピックでは、Amazon Connect Chat をモバイルアプリケーションに統合する方法について説明します。次のオプションの 1 つを使用できます。
+ [WebView 統合](#webview)
+ [iOS および Android 用Amazon Connect Chat SDK](#integrate-chat-with-mobile-sdks-for-mobile)
+ [React Native 統合](#react-native-integration)

 Amazon Connect [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) APIを呼び出し、コンタクトを開始します。

**Topics**
+ [使用する統合オプション](#integrate-options)
+ [Amazon Connect チャット統合ワークフロー](#integrate-chat-with-mobile-workflow)
+ [Amazon Connect チャット統合の使用を開始する](#integrate-chat-with-mobile-getting-started)

## 使用する統合オプション
<a name="integrate-options"></a>

このセクションでは、ソリューションに使用する統合オプションを決定するのに役立つ各統合オプションについて説明します。

### WebView 統合
<a name="webview"></a>

Amazon Connect Chat WebView 統合により、最小限の開発作業で完全なチャットエクスペリエンスをモバイルアプリケーションに埋め込むことができます。このメソッドでは、Android では `WebView`、iOS では `WKWebView` を使用して、シームレスで包括的なチャットインターフェイスを提供します。これは、広範囲のカスタマイズなしでチャット機能を統合するための、既成の迅速なソリューションを求めるチームに最適です。

このアプローチにより、セキュアな通信が保証され、ウェブベースの Amazon Connect チャットインターフェイスが活用されます。ただし、Cookie と JavaScript を適切に処理するようにアプリを設定する必要があります。

WebView 統合の実装の詳細については、「Amazon Connect チャット [UI の例](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples)」GitHub リポジトリを参照してください。

**推奨事項**: WebView ベースの統合は、包括的なチャット機能を確保しながら、迅速な開発と最小限のメンテナンスに最適です。

### Amazon Connect Mobile 用チャット SDKs
<a name="integrate-chat-with-mobile-sdks-for-mobile"></a>

iOS および Android 用 Amazon Connect Chat SDKs、ネイティブモバイルアプリケーション用の Amazon Connect チャットの統合を簡素化します。SDK は、Amazon Connect ChatJS ライブラリと同様にクライアント側のチャットロジックとバックエンド通信の処理に役立ちます。

 Amazon Connect Chat SDKs Amazon Connect Participant Service APIsをラップし、チャットセッションと WebSocket の管理を抽象化します。これにより、すべてのバックエンドサービスとやり取りするために Amazon Connect Chat SDK に依存しながら、ユーザーインターフェイスとエクスペリエンスに集中できます。このアプローチでは、独自のチャットバックエンドを使用して `StartChatContact` API を呼び出し Amazon Connect て問い合わせを開始する必要があります。
+ Swift ベースの iOS SDK の詳細については、「[Amazon Connect iOS 用チャット SDK](https://github.com/amazon-connect/amazon-connect-chat-ios) GitHub」ページを参照してください。
+ Kotlin ベースの Android SDK の詳細については、「[Amazon Connect Android 用チャット SDK](https://github.com/amazon-connect/amazon-connect-chat-android) GitHub」ページを参照してください。

**メリット**: ネイティブ SDK により堅牢な機能と高いパフォーマンスを実現でき、深いカスタマイズとシームレスなユーザーエクスペリエンスを必要とするアプリケーションに最適です。

### React Native 統合
<a name="react-native-integration"></a>

Amazon Connect Chat React Native 統合は、クロスプラットフォームソリューションを提供します。これにより、チームは共有コードベースを使用して Android と iOS の両方のチャット機能を構築できます。このメソッドでは、React Native の機能を活用して堅牢なモバイルアプリケーションを作成しながら、カスタマイズと開発の効率のバランスを取ります。

この統合では、ネイティブブリッジを使用して高度な機能にアクセスし、プラットフォーム間で一貫したパフォーマンスと統一されたユーザーエクスペリエンスを実現します。`react-native-websocket` や API コールなどのライブラリを `axios` で使用すると、WebSocket 通信などの主要な機能を簡単に実装できます。

**最適**: 機能の柔軟性を維持しながらコードの再利用を最大化したいチーム。

## Amazon Connect チャット統合ワークフロー
<a name="integrate-chat-with-mobile-workflow"></a>

次の図は、モバイルアプリケーションを使用する顧客とエージェント間のプログラミングフローを示しています。図の番号付きのテキストは、画像の下にある番号付きのテキストに対応しています。

![\[Amazon Connect チャットプログラムフローを示す図。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/integrate-chat-mobile-diagram.png)


**図の説明**

1. 顧客がモバイルアプリでチャットを開始すると、アプリは [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API Amazon Connect を使用して にリクエストを送信する必要があります。これには、チャットを認証して開始するための[インスタンス](amazon-connect-instances.md)および[コンタクト](connect-contact-flows.md)フローの API エンドポイントや ID など、特定のパラメータが必要です。

1. `StartChatContact` API はバックエンドシステムとやり取りして、チャットセッションの一意の識別子として機能する参加者トークンとコンタクト ID を取得します。

1. アプリの UI は、SDK が [Amazon Connect Participant Service](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) と適切に通信し、顧客のチャットセッションを設定するために、モバイル SDK に `StartChatContact` レスポンスを送信します。

1. SDK は [chatSession](https://github.com/amazon-connect/amazon-connect-chat-ios?tab=readme-ov-file#chatsession-apis) オブジェクトを UI に公開します。UI には、チャットセッションでやり取りするための使いやすいメソッドが含まれます。

1. フードの下で、SDK は [AWS SDK](https://aws.amazon.com/developer/tools/) を使用して [Amazon Connect Participant Service](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) とやり取りします。 Amazon Connect Participant Service を利用したコミュニケーションは、チャットセッションでの顧客とのやり取りすべてを担当します。これには、`CreateParticipantConnection`、`SendMessage`、`GetTranscript`、または `DisconnectParticipant` などのアクションが含まれます。

1. SDK は、エージェントからメッセージ、イベント、添付ファイルを受信するために必要な WebSocket 接続も管理します。これらはすべて SDK によって処理および解析され、理解しやすい構造で UI に表示されます。

## Amazon Connect チャット統合の使用を開始する
<a name="integrate-chat-with-mobile-getting-started"></a>

次のステップとリソースは、 Amazon Connect チャットをネイティブモバイルアプリケーションに統合し始めるのに役立ちます。

1. GitHub の [startChatContactAPI](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI) の例を参照して、StartChatContact を呼び出すために必要なバックエンドを提供する [CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) スタックをすばやく設定できます。

1. Amazon Connect Chat SDK を活用してモバイルチャット UI を構築する方法の例については、[UI の例](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) GitHub プロジェクトを参照してください。

   Chat SDK for [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOSChatExample)/[Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/androidChatExample) を使用してチャットアプリケーションを強化する方法を示すサンプル iOS および Android Amazon Connect チャットの例を参照してください。

1. [Amazon Connect iOS 用チャット SDK](https://github.com/amazon-connect/amazon-connect-chat-ios) および [Amazon Connect Android 用チャット SDK](https://github.com/amazon-connect/amazon-connect-chat-android) GitHub のページをご覧ください。GitHub ページには、API ドキュメントと、前提条件やインストール手順を説明する実装ガイドが含まれています。

1. React Native 統合を設定する: React Native ベースのソリューションの実装に関するガイダンスについては、[React Native](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/connectReactNativeChat) の例を活用します。

1. モバイルアプリケーションでの Amazon Connect Chat SDK の設定または使用に関して質問や問題がある場合は、「[Amazon Connect iOS 用チャット SDK の問題](https://github.com/amazon-connect/amazon-connect-chat-ios/issues)」ページまたは「[Amazon Connect Android 用チャット SDK の問題](https://github.com/amazon-connect/amazon-connect-chat-android/issues)」ページのいずれかに問題を報告することができます。モバイルチャット UI の例に問題がある場合は、[Amazon Connect チャット UI の例の問題](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/issues)ページに問題を報告することができます。

# 顧客のチャットエクスペリエンスのために Amazon Connect でテキストフォーマットを有効にする
<a name="enable-text-formatting-chat"></a>

Amazon Connect メッセージの書式設定を使用すると、顧客とエージェントは、チャットメッセージに構造と明瞭さをすばやく追加できます。

**Topics**
+ [対応しているフォーマットのタイプ](#supported-format-types)
+ [メッセージの書式設定を有効にする](#how-to-enable-message-formatting)
+ [E メールと電話のリンクを追加する方法](#add-email-phone-links)
+ [チャットボットメッセージを追加する方法](#add-bot-messages)

## 対応しているフォーマットのタイプ
<a name="supported-format-types"></a>

マークダウンを使用して、チャットユーザーインターフェイスとエージェントアプリケーションの両方で、次の種類の書式を設定できます。
+ 太字
+ イタリック
+ 箇条書き
+ 番号付きリスト
+ ハイパーリンク
+ 絵文字
+ 添付ファイル。添付ファイルを有効にするには、[CCP で添付ファイルを有効にして、顧客とエージェントがファイルを共有およびアップロードできるようにします。](enable-attachments.md) に従います。

## メッセージの書式設定を有効にする方法
<a name="how-to-enable-message-formatting"></a>

1. 新しい[チャットユーザーインターフェイス](add-chat-to-website.md)を作成する場合、リッチテキストフォーマットがすぐに有効になります。追加の設定は必要ありません。

1. 既存の[チャットユーザーインターフェイス](add-chat-to-website.md)にテキストの書式設定機能を追加するには、次の太字で強調表示されているコードを使用して、[コミュニケーションウィジェットコード](add-chat-to-website.md)を更新します。

   ```
       (function(w, d, x, id){
           s=d.createElement('script');
           s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
           s.async=1;
           s.id=id;
           d.getElementsByTagName('head')[0].appendChild(s);
           w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
       })(window, document, 'amazon_connect', 'widget-id');
       amazon_connect('styles', { openChat: { color: 'white', backgroundColor: '#123456'}, closeChat: { color: 'white', backgroundColor: '#123456'} });
       amazon_connect('snippetId', 'snippet-id');
       amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
   ```

   赤くハイライトされているコードは、Amazon Connect コンソールからスニペットを取得した際に正しい値に設定されます。追加または削除するコンテンツは、`supportedMessagingContentTypes` の太字の最後の行のみです。

1. 独自のカスタムチャットユーザーインターフェイス (例えば、[チャットインターフェイス](https://github.com/amazon-connect/amazon-connect-chat-interface)または [ChatJs](https://github.com/amazon-connect/amazon-connect-chatjs) の独自の UI ソリューション) にテキストの書式設定機能を追加するには、以下の手順を実行します。

   1. [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API を呼び出します。`StartChatContact` を呼び出した際に、次の太字で示されている `SupportedMessagingContentTypes` パラメータを追加します。

      ```
      // Amazon Connect StartChatContact API
      {
          "Attributes": { 
              "string" : "string" 
          },
          "ClientToken": "string",
          "ContactFlowId": "your flow ID",
          "InitialMessage": { 
              "Content": "string",
              "ContentType": "string"
          },
          "InstanceId": "your instance ID",
          "ParticipantDetails": { 
              "DisplayName": "string"
          }
          
          // optional
         "SupportedMessagingContentTypes": [ "text/plain", "text/markdown" ]
      }
      ```

   1. 次の例に示すように、オブジェクトとして `chatjs` をインポートします。

      ```
      import "amazon-connect-chatjs";
      
      this.session = connect.ChatSession.create({
            ...
          });
      
      this.session.sendMessage({
            message: "message-in-markdown-format",
            contentType: "text/markdown"
      });
      ```

      ChatJS を使用しない場合、Amazon Connect API を介してマークダウンテキストを送信する方法については、次の「[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)」、「[SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)」のトピックを参照してください。

   1. マークダウンでメッセージを送信します。メッセージの送信方法の例として、オブジェクトとして `chatjs` をインポートするための、前のコードスニペットを参照してください。チャット内のテキストの書式設定には、シンプルなマークダウンを使用できます。既に[プレーンテキストメッセージを送信するために chatjs を使用している](https://github.com/amazon-connect/amazon-connect-chatjs/blob/master/src/core/chatController.js#L66)場合は、マークダウンメッセージを送信する際に `text/plain` の代わりに `text/markdown` を `contentType` として [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html) を呼び出すように既存のロジックを変更できます。必ず `sendMessage` パラメータを更新して、メッセージのマークダウン形式を指定してください。詳細については、「[マークダウンガイドの基本的な構文](https://www.markdownguide.org/basic-syntax/)」を参照してください。

   1. UI パッケージに独自のロジックを実装して、入力エリアとチャットトランスクリプトにマークダウンメッセージをレンダリングします。React を使用する場合は、[react-markdown](https://github.com/remarkjs/react-markdown)を参照できます。

**注記**  
テキストフォーマット機能は、顧客に対してチャットユーザーインターフェイスで有効になっている場合にのみ、エージェントに表示されます。カスタマーチャットのユーザーインターフェイスで、テキストフォーマットがサポートされていないか、有効になっていない場合は、エージェントはテキストフォーマットを使用してメッセージを作成し、送信することができません。
[クイックレスポンス](create-quick-responses.md)では、添付ファイル以外のすべてのテキスト形式機能を使用できます。

## E メールと電話のリンクを追加する方法
<a name="add-email-phone-links"></a>

次の例は、クリックおよび呼び出し可能なリンクをウェブおよびモバイルアプリケーションに追加する方法を示しています。

```
Call us today: [+1 (123) 456-7890](tel:+11234567890)
[Call Us](tel:+11234567890)
[Skype Us](callto:+91123-456-7890)
[Fax Us](fax:+91123-456-7890)
[Text Us](SMS:+91123-456-7890)
[Email Us](mailto:name@email.com)
```

## チャットボットメッセージを追加する方法
<a name="add-bot-messages"></a>

チャットメッセージのマークダウンを有効にすると、以下のタイプのチャットボットメッセージでリッチテキストフォーマットを使用できます。
+ [プロンプトの再生](play.md)フロー
+ [顧客の入力の取得](get-customer-input.md)フロー
+ `SYSTEM_MESSAGE`
+ `Lex BOT`
+ `Third Party BOT`
+ `Lex BOT Lambda`

次の画像は、[プロンプトの再生](play.md)フローブロックでプロンプトを手動で有効にする方法を示しています。

![\[フローブロックと、FAQ と電話番号の 2 つのリンクを持つプロンプトの画像。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chat-rtf-play-prompt-flow-1.png)


次の画像は、[顧客の入力の取得](get-customer-input.md)フローブロックでプロンプトを手動で有効にし、そのフローブロックを Amazon Lex ボットに関連付ける方法を示しています。

![\[フローブロックと、FAQ と電話番号の 2 つのリンクを持つプロンプトの画像。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chat-rtf-get-customer-flow.png)


次の画像は、SYSTEM\$1MESSAGE およびさまざまな BOT メッセージタイプでプロンプトがどのように表示されるかを示しています。

![\[SYSTEM および BOT メッセージの「よくある質問を確認する」と「電話で問い合わせる」リンクを示す画像。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chat-rtf-sys-bot-messages.png)


次の画像は、Amazon Lex ボットインテントでプロンプトを設定する方法を示しています。

![\[よくある質問と電話番号の 2 つのリンクを持つプロンプトを含む Amazon Lex インテントの画像。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chat-rtf-lex-flow.png)


インテントの詳細については、*「Amazon Lex V2 デベロッパーガイド」*の[「インテントの追加」](https://docs.aws.amazon.com/lexv2/latest/dg/add-intents.html)を参照してください。Lambda メッセージの詳細については、*Amazon Lex V2 デベロッパーガイド*」の[AWS 「Lambda 関数を使用したカスタムロジックの有効化](https://docs.aws.amazon.com/lexv2/latest/dg/lambda.html)」を参照してください。

# Amazon Connect でチャットの顧客の通知を有効にする
<a name="message-receipts"></a>

[チャットのユーザーインターフェイス](add-chat-to-website.md)でメッセージの *[Delivered]* (配信済み) と *[Read]* (開封確認) を有効にして、顧客が送信したメッセージのステータスを把握できます。これにより、顧客に透明性がもたらされ、全体的なチャット体験が向上します。

メッセージ受信が有効になっているかどうかにかかわらず、メッセージ受信データとイベントは常に送信され、ネットワークログに表示されます。チャットユーザーインターフェイスでメッセージ受信を有効または無効にすると、受信がコミュニケーションウィジェットトランスクリプトに表示されるかどうかにのみ影響します。

**ヒント**  
デフォルトでは、メッセージの受信は、[[Test chat]](chat-testing.md#test-chat) (チャットをテストする) エクスペリエンス、問い合わせコントロールパネル (CCP)、およびチャットウィジェットの[ダウンロード可能なオープンソースサンプル](download-chat-example.md)で既に有効になっています。

**チャットユーザーインターフェイスでメッセージの受信を有効にするには**

1. https://*インスタンス名*.my.connect.aws/ で Amazon Connect 管理ウェブサイトにログインします。**[コミュニケーションウィジェットをカスタマイズする]** をクリックします。  
![\[[設定ガイド] ページ、[コミュニケーションウィジェットをカスタマイズする] のオプション\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-customize-chat-window-button.png)

1. **[編集]** を選択します。  
![\[[保存されたチャットウィジェットのカスタマイズ] ページ、[編集] ボタン\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-edit-messagereceipt.png)

1. デフォルトでは、**[Message receipts]** (メッセージの受信) は有効になっていません。**[Enabled]** (有効) に設定します。  
![\[[メッセージ受信] オプション、有効。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-enable-messagereceipt.png)

これで、メッセージの受信が有効になりました。コミュニケーションウィジェットを使用している場合、**[配信済み] と **[読み取り済み] の受け取りが表示されるようになります。

# チャット参加者のチャットタイムアウトを設定する
<a name="setup-chat-timeouts"></a>

エージェントと顧客とのチャット会話が一定時間非アクティブ (メッセージが送信されていない) の場合は、チャット参加者をアイドル状態と見なしたり、エージェントをチャットから自動的に切断したりすることもできます。

そのためには、[UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html) アクションを使用して、アイドルタイムアウトと自動終了タイムアウトの両方を設定できます。

**ヒント**  
このトピックでは、顧客とエージェントの会話のチャットタイムアウトの設定について説明します。顧客が Lex とやり取りしているときのチャットタイムアウトの設定に関する情報をお探しの場合は、[Amazon Connect のフローブロック: 顧客の入力の取得](get-customer-input.md) ブロックの「[Lex 音声対話中のチャット入力のタイムアウトを設定可能](get-customer-input.md#get-customer-input-configurable-timeouts-chat)」セクションを参照してください。

**設定できるタイマーは、4 種類あります。**
+ アクションが実行される前に経過する時間を指定します。
+ タイマーは、任意の組み合わせで使用できます。    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/setup-chat-timeouts.html)

**すべてのタイマーは、分単位で指定します。**
+ 最小: 2 分
+ 最大: 480 分 (8 時間)

**タイマーは、チャットの有効期間中、参加者のロールに適用されます。**
+ タイマーは、個々の参加者ではなく、エージェントや顧客などの参加者ロールに対して設定します。
+  タイマーを設定すると、そのタイマーはチャットの有効期間中、適用されます。チャットが転送されると、タイマーは新しいエージェントと顧客のやり取りに適用されます。

## チャットタイマーの仕組み
<a name="how-chat-timer-work"></a>

タイマーは以下のように作動します。
+ タイマーは、エージェントと顧客の両方がチャットに接続されている場合、または顧客とカスタム参加者 (カスタムボットなど) が接続されている場合に実行されます。
+ タイマーは、エージェント/カスタム参加者がチャットに参加すると初めて開始され、エージェント/カスタム参加者がチャットを離れると停止します。
+ ロールに両方の参加者が設定されている場合、アイドルタイマーが自動接続解除タイマーより前に実行されます。例えば、両方のタイマーが設定されている場合、参加者がアイドル状態と見なされた後にのみ自動接続解除タイマーが開始されます。
+ ロールに設定されているタイマーの種類が 1 つだけの場合、そのタイマーはすぐに起動します。
+ 参加者がメッセージを送信すると常に、その参加者のタイマーはリセットされます。アイドル状態と見なされていた場合、アイドル状態と見なされなくなります。
+ 添付ファイルがメッセージに追加されると、チャットタイマーがリセットされます。
+  エージェント/カスタム参加者が参加したときに設定された設定は、エージェント/カスタム参加者がチャットに参加している限り適用されます。エージェント/カスタム参加者と顧客が既にお互いに接続しているときにタイマー設定を更新すると、新しい設定は保存されますが、新たなエージェント/カスタム参加者がチャットに接続するまでは適用されません。
+ 接続の自動解除イベントが発生すると、顧客以外のすべての参加者 (エージェントやモニタリングスーパーバイザー、カスタム参加者など) の接続は解除されます。エージェントが切断され、[切断フローの設定](set-disconnect-flow.md) ブロックが設定されている場合、チャットはそのブロックにルーティングされます。

### アイドルタイマーの有効期限
<a name="idle-timer-expiry"></a>

顧客とカスタム参加者のやり取り中にアイドルタイマーが期限切れになった場合、以下のことが発生します。

1. アイドル状態のイベントは、すべてのウェブソケット/ストリーミングエンドポイントにファンアウトされます。

1. 接続の自動解除タイマーが設定されている場合は、そのタイマーが開始されます。

1. チャットコンタクトが**待機**ブロックにある間にアイドルタイマーが期限切れになった場合、コンタクトは**期限切れ**ブランチにルーティングされません。このシナリオが発生した場合、何のアクションも取られません。

### カスタム参加者の接続の自動解除
<a name="auto-disconnecting"></a>

接続の自動解除タイマーの有効期限が切れると、カスタム参加者はチャットから切断されます。

接続の自動解除タイマーの有効期限が切れると、Amazon Connect は以下のいずれかの手順を実行します。

1. チャットは現在、カスタム参加者用に設定された [待機](wait.md) ブロックにあります。
   + カスタム参加者がチャットから切断され、チャットは **[ボット参加者が切断されました]** のブランチをとってフローを再開します。

1. チャットは現在、顧客用に設定された [待機](wait.md) ブロックに存在するか、またはチャットは **[待機]** ブロックにありません。
   + カスタム参加者はチャットから切断され、他のアクションは取られません。

## 参加者に表示されるメッセージ
<a name="chat-timeouts-events"></a>

次のいずれかのイベントが発生すると、すべての参加者にメッセージが表示されます。
+ 参加者がアイドル状態になる。
+ アイドル状態の参加者がメッセージを送信し、アイドル状態でなくなる。
+ 自動接続解除が発生する。エージェントの接続が解除されたため、エージェントをメールを表示することができなくなります。

これらのイベントはトランスクリプトに保持されないだけでなく、課金されません。

このようなイベントごとに、デフォルトのメッセージ (サポートされているすべての言語) がエージェントの問い合わせコントロールパネル (CCP) に表示されます。

次の図は、エージェントの CCP に表示されるデフォルトのアイドル状態メッセージの例を示しています。例えば、*エージェントがアイドル状態になりました*。

![\[ccp、デフォルトのアイドル状態メッセージ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chat-timeout-message.png)


## 推奨される使用方法
<a name="chat-timeouts-usage"></a>

チャットのタイムアウト機能を使用するには、次の操作を行うことをお勧めします。

1. 問い合わせフローの Lambda に [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html) アクションへの呼び出しを埋め込みます。

1. ユースケースに応じて、チャットを開始した直後 (フローの開始時) か、問い合わせをキューにルーティングする直前に Lambda を配置します。

## 接続解除イベントに備えて、顧客のチャットユーザーインターフェイスをカスタマイズする
<a name="chat-timeouts-ui"></a>

接続解除イベントに備えて顧客のチャットユーザーインターフェイスをカスタマイズするには、[ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs) で次のメソッドを参照してください。
+ `onParticipantIdle(callback)`
+ `onParticipantReturned(callback)`
+ `onAutoDisconnection(callback)`

これらのメソッドを使用して、新しいイベントが到達したときにトリガーされるコールバックハンドラーを登録します。

# モバイルチャットのプッシュ通知を有効にする
<a name="enable-push-notifications-for-mobile-chat"></a>

モバイルチャットのプッシュ通知は、[AWS End User Messaging](https://docs.aws.amazon.com/sms-voice/latest/userguide/what-is-service.html) で設定します。iOS または Android デバイスでモバイルチャットのプッシュ通知を有効にすると、モバイルアプリケーションをアクティブに使用していない場合でも、新しいメッセージについて顧客に警告できます。この機能は、[Amazon Connect モバイル SDK](https://docs.aws.amazon.com/connect/latest/adminguide/integrate-chat-with-mobile.html)、[ウェブビューソリューション](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples)、またはカスタムネイティブソリューションと統合された既存のアプリケーションで有効にできます。

 次の手順とリソースは、ネイティブモバイルアプリケーションへの Amazon Connect プッシュ通知の統合を開始するのに役立ちます。

## ステップ 1: Apple の APNs と Google の FCM コンソールから認証情報を取得する
<a name="step-1-enable-push-notifications-for-mobile-chat"></a>

アプリにプッシュ通知を送信 Amazon Connect できるように を設定するには、まず Apple の APNs と Google の FCM コンソールから認証情報を取得する必要があります。これにより、[AWS エンドユーザーメッセージング](https://docs.aws.amazon.com/sms-voice/latest/userguide/what-is-service.html)がモバイルアプリケーションに通知を送信できるようになります。提供する認証情報は、使用するプッシュ通知システムによって異なります。
+  Apple Push Notification service (APNs) 認証情報については、Apple デベロッパードキュメントの「[Obtain an encryption key and key ID from Apple](https://developer.apple.com/documentation/usernotifications/establishing-a-token-based-connection-to-apns#Obtain-an-encryption-key-and-key-ID-from-Apple)」および「[Obtain a provider certificate from Apple](https://developer.apple.com/documentation/usernotifications/establishing-a-certificate-based-connection-to-apns#Obtain-a-provider-certificate-from-Apple)」を参照してください。
+  Google の Firebase Cloud Messaging (FCM) 認証情報は、Firebase コンソールから取得できます ([「Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging)」を参照)。

## ステップ 2: AWS コンソールを使用して AWS エンドユーザーメッセージングサービスアプリケーションを作成し、FCM または APNs のプッシュ通知チャネルを有効にする
<a name="step-2-enable-push-notifications-for-mobile-chat"></a>

 Amazon Connect がプッシュ通知を送信できるようにするには、まず[AWS End User Messaging アプリケーションを作成](https://docs.aws.amazon.com/push-notifications/latest/userguide/procedure-enable-push.html)し、[AWS コンソール](https://console.aws.amazon.com/push-notifications/) でプッシュ通知チャネルを有効にする必要があります。

 アプリケーションを作成し、いずれかのプッシュチャネルを有効にするには、次の手順に従います。この手順を完了するには、アプリケーション名を入力するだけです。プッシュチャネルは、後で有効または無効にできます。

1.  [https://console.aws.amazon.com/push-notifications/](https://console.aws.amazon.com/push-notifications/) で AWS エンドユーザーメッセージングプッシュコンソールを開きます。

1.  [**アプリケーションを作成**] を選択します。

1.  **[アプリケーション名]** に、アプリケーションの名前を入力します。

1.  (オプション) このオプションのステップに従って、**Apple Push Notification service (APNs)** を有効にします。

   1.  **Apple Push Notification Service (APNs)** で **[有効化]** を選択します。

   1.  **[デフォルトの認証タイプ]** で、次のいずれかを選択します。

      1.  **キー認証情報**を選択した場合は、Apple 開発者アカウントから次の情報を入力します。 AWS エンドユーザーメッセージングプッシュでは、認証トークンを構築するためにこの情報が必要です。

         1.  [**Key ID**] – 署名キーに割り当てられた ID。

         1.  [**Bundle identifier**] – iOS アプリケーションに割り当てられた ID。

         1.  [**Team identifier**] – Apple デベロッパーアカウントチームに割り当てられた ID。

         1.  [**Authentication key**] – 認証キーを作成するときに Apple デベロッパーアカウントからダウンロードする .p8 ファイル。

      1.  [**Certificate credentials**] を選択した場合は、次の情報を入力します。

         1.  [**SSL certificate**] – TLS 証明書の .p12 ファイル。

         1.  **Certificate password** – 証明書にパスワードを指定している場合は、そのパスワードをここに入力します。

         1.  **[証明書タイプ]** – 使用する証明書の種類を選択します。

1.  (オプション) このオプションのステップに従って、**Firebase Cloud Messaging (FCM)** を有効にします。

   1.  **Firebase Cloud Messaging (FCM)** で **[有効]** を選択します。

   1.  [デフォルトの認証タイプ] で **[トークン認証情報]** を選択し、サービス JSON ファイルを選択します。

1.  [**アプリケーションを作成**] を選択します。

## ステップ 3: AWS エンドユーザーメッセージング アプリケーションを Amazon Connect インスタンスに関連付ける
<a name="step-3-enable-push-notifications-for-mobile-chat"></a>

 [Amazon Connect インスタンス](https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html)でプッシュ通知を有効にするには、 [CreateIntegrationAssociation](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html) API を `PINPOINT_APP` [IntegrationType](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html#API_CreateIntegrationAssociation_RequestSyntax) で呼び出して、 AWS エンドユーザーメッセージングアプリケーションを[Amazon Connect インスタンス](https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html)に関連付ける必要があります。この API は、[AWS CLI](https://docs.aws.amazon.com/cli/latest/reference/connect/create-integration-association.html)または [Amazon Connect SDK](https://aws.amazon.com/developer/tools/) を使用して、サポートされている任意の言語で呼び出すことができます。これは、 AWS エンドユーザーメッセージングアプリケーションと Amazon Connect インスタンスの統合ごとに必要な 1 回限りのオンボーディングステップです。

## ステップ 4: FCM または APNs を使用してデバイストークンを取得し、 に登録する Amazon Connect
<a name="step-4-enable-push-notifications-for-mobile-chat"></a>

デバイストークンを取得し、これを使用してエンドユーザーのモバイルデバイスを Amazon Connect チャット連絡先に登録して、チャットで新しいメッセージのプッシュ通知を送信する必要があります。デバイストークンの生成方法とモバイルアプリケーションからの取得方法については、以下の FCM/APNs 開発者ドキュメント を参照してください。
+  Apple Push Notification service (APNs) については、Apple デベロッパードキュメントの「[Registering your app with APNs](https://developer.apple.com/documentation/usernotifications/registering-your-app-with-apns)」を参照してください。
+  Firebase Cloud Messaging (FCM) については、「[FCM 登録トークン管理のベストプラクティス](https://firebase.google.com/docs/cloud-messaging/manage-tokens)」を参照してください。

 チャットコンタクトにデバイスを登録するには、以下を実行することをお勧めします。

1.  モバイルアプリケーションが [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API を呼び出すときに、`deviceToken` と `deviceType` を[コンタクト属性](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)として渡します。ウェブビューおよびホスト通信ウィジェットのユーザーの詳細については、「[「通信ウィジェットにコンタクト属性を渡す方法](https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html#how-to-contact-attributes-chatwidget)」を参照してください。

1.  コンタクトフローの Lambda 関数に [CreatePushNotificationRegistration](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html) アクションへの呼び出しを埋め込みます。フローブロックは、ユーザー定義のコンタクト属性から `deviceToken` と `deviceType` を読み、システム属性から `initialContactId` を読み取って、これらの値を Lambda 関数に渡します。

   1.  ユースケースに応じて、エンドユーザーに即座にプッシュ通知を受信させる場合は、チャットの開始直後 (フローの開始時) に Lambda 関数を配置し、エージェントが参加しようとしているときにのみコンタクトを受信できるようにするには、コンタクトをキューにルーティングする直前に Lambda 関数を配置します。API コールが行われると、エージェントまたはシステムから新しいメッセージが送信されたときに、デバイスはプッシュ通知の受信を開始します。デフォルトでは、プッシュ通知はすべてのシステムメッセージとエージェントメッセージで送信されます。  
![\[Amazon Connect 管理ウェブサイトのフローデザイナーで Lambda 関数フローブロックを呼び出します。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/step-4-set-up-push-notifications-for-mobile-chat-1.png)

1.  (オプション) フローの Lambda 関数で [DeletePushNotificationRegistration](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html) アクションへの呼び出しを埋め込みます。API コールが行われると、エージェントまたはシステムから新しいメッセージが送信されたときに、デバイスはプッシュ通知の受信を停止します。

## ステップ 5: モバイルアプリケーションでプッシュ通知を受信する
<a name="step-5-enable-push-notifications-for-mobile-chat"></a>

 Chat [Amazon Connect UI Examples](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) プロジェクトを確認し、プッシュ通知をオンボードおよび受信するために Amazon Connect APIs を統合する方法を紹介する [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOS-WKWebView-sample) および [Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/android-webview-sample) チャットウェブビューのサンプル例を参照してください。

## プッシュ通知の使用状況をモニタリングする
<a name="monitor-your-usage-for-push-notification"></a>

 プッシュ通知の信頼性、可用性、パフォーマンスを確保するには、その使用状況をモニタリングすることが重要です。この情報は、複数のチャネルで追跡できます。

1.  AWS には、プッシュ通知用の包括的なモニタリングツールが用意されています。 詳細については、[AWS 「エンドユーザーメッセージングプッシュのモニタリング](https://docs.aws.amazon.com/push-notifications/latest/userguide/monitoring-overview.html)」を参照してください。

1.  使用しているプッシュ通知サービスに応じて、それぞれのコンソールで追加の使用状況データにアクセスできます。

   1.  Firebase Cloud Messaging (FCM): FCM の使用状況に関するインサイトについては、FCM ドキュメントの「[メッセージ配信について](https://firebase.google.com/docs/cloud-messaging/understand-delivery?platform=android)」を参照してください。

   1.  Apple Push Notification service (APNs): 通知ステータスをモニタリングする方法については、APNs ドキュメントの「[Viewing the status of push notifications using Metrics and APNs](https://developer.apple.com/documentation/usernotifications/viewing-the-status-of-push-notifications-using-metrics-and-apns)」セクションを参照してください。

# 顧客が Amazon Connect でチャットの会話を再開できるようにする
<a name="chat-persistence"></a>

チャットを開始したお客様は、一旦会話から離れ、後から戻ってきてチャットを続けることがよくあります。このようなことは、数日、数か月、さらには数年の間に何度も起こるかもしれません。このような長時間のチャットをサポートするには、永続チャットを有効にします。

永続チャットでは、顧客はコンテキスト、メタデータ、トランスクリプトを引き継いで前の会話を再開できます。顧客はチャットに戻った際に以前の会話を繰り返す必要がなくなり、エージェントは会話履歴全体にアクセスできます。

## チャットのリハイドレート
<a name="rehydration"></a>

永続的なチャットは、チャットの復元と呼ばれるプロセスを通じて実現されます。このプロセスにより、チャットのトランスクリプトを以前のチャットコンタクトから取得して表示できます。顧客とエージェントは中断したところから会話を簡単に続けることができます。

**重要**  
トランスクリプトの生成は非同期的に発生するため、新しいチャットセッションにリハイドレートできるのは、終了しているチャットセッションのみです。  
ユーザーは、以前終了したチャットからリハイドレートを試みる前に、30～60 秒待つ必要があります。

Amazon Connect は 2 種類のリハイドレーションをサポートしています。
+ `ENTIRE_PAST_SESSION`: 新しいチャットセッションを開始し、過去のチャットセッションのすべてのチャットセグメントをリハイドレートします。
+ `FROM_SEGMENT`: 新しいセッションを開始し、指定された過去のチャットセグメントからリハイドレートします。

これらのさまざまなリハイドレートモードを示すユースケースについては、「[ユースケースの例](#persistentchatscenario)」を参照してください。

## RelatedContactId
<a name="relatedcontactid"></a>

新しいコンタクトは、`RelatedContactId` を介して既存のコンタクトに関連付けることができます。この新しい問い合わせには、関連する問い合わせの[問い合わせプロパティ](connect-attrib-list.md)のコピーが含まれています。

`RelatedContactId` が問い合わせレコードでどのようにモデル化されるかについての詳細については、「[Amazon Connect の問い合わせレコードのデータモデル](ctr-data-model.md)」を参照してください。

永続チャットの場合、`RelatedContactId` はソースチャットのリハイドレーションに使用される `contactId` を示しています。

## 常設チャットを有効にする方法
<a name="enable-persistent-chat"></a>

永続的なチャットを有効にするには、次の 2 つの方法があります。
+ 新しいチャットを作成するときに、以前のコンタクト ID を指定します。手順については、「[新しいチャットコンタクトを作成する際に永続的なチャットを有効にする](#enable-persistent-chat-creating-new-chat-contact)」を参照してください。
+ フローに[常設コンタクト関連付けの作成](create-persistent-contact-association-block.md)ブロックを追加します。手順については、「[フローで永続的なチャットを有効にする](#enable-persistent-chat-within-contact-flow)」を参照してください。

**注記**  
チャットを持続させるには、どちらかの方法を選ぶことができますが、両方を選ぶことはできません。つまり、新しいチャットで `SourceContactID` の永続化を有効にできるのは 1 度だけです。

永続的なチャットエクスペリエンスを提供するには、新しいチャットを開始する際、または[常設コンタクト関連付けの作成](create-persistent-contact-association-block.md)フローブロックを使用する際に、以前のコンタクト ID を指定する必要があります。これは自動的には行われません。コンタクトレコードデータを保存するためのリポジトリを作成することをお勧めします。リポジトリは、顧客ごとにこのデータを取り出すことができます。

 リポジトリにエントリを作成する方法は 2 つあります。
+ [チャットメッセージストリーミング](https://docs.aws.amazon.com/connect/latest/adminguide/chat-message-streaming.html)を使用して、チャットが終了したときにエントリを作成します。
+ [コンタクトイベント](https://docs.aws.amazon.com/connect/latest/adminguide/contact-events.html#contact-events-data-model)を調べ、 [AWS Lambda 関数](https://docs.aws.amazon.com/connect/latest/adminguide/connect-lambda-functions.html)を使用してリポジトリにエントリを作成します。

リポジトリのセットアップ後、顧客の以前のコンタクト ID を取得して、新しいチャットを開始する際、または[常設コンタクトの関連付けの作成](create-persistent-contact-association-block.md)フローブロック内で指定できます。

また、インスタンスの Amazon S3 バケットから過去のチャットのトランスクリプトを取得できるようにしてください。以下に挙げる 2 つのことは、Amazon Connect がトランスクリプトを取得するのを妨げ、またチャットを永続させません。
+ 複数のチャット記録のバケットを使用している。
+ Amazon Connect が生成したチャット記録のファイル名を変更する。

### 新しいチャットコンタクトを作成する際に永続的なチャットを有効にする
<a name="enable-persistent-chat-creating-new-chat-contact"></a>

新しいチャットコンタクトを作成する際に永続的なチャットエクスペリエンスを設定するには、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API の `SourceContactId` パラメータに以前の `contactId` を指定します。これにより、以前のコンタクトのチャット記録を復元することができます。記録は、顧客とエージェントの両方のチャットに表示されます。例については、[ユースケースの例](#persistentchatscenario)を参照してください。

### フローで永続的なチャットを有効にする
<a name="enable-persistent-chat-within-contact-flow"></a>

フローで永続的なチャットエクスペリエンスを設定する方法: 

1. チャットコンタクトを作成したら、[常設コンタクト関連付けの作成](create-persistent-contact-association-block.md)ブロックをフローに追加します。

1. ユーザー定義属性を使用して、ソースコンタクト ID を指定します。

または、[CreatePersistentContactAssociation](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreatePersistentContactAssociation.html) API を使用して、現在のチャットを永続化するためのソースコンタクト ID を指定することもできます。

復元は、フローブロックまたは API を使用している場合、チャットの開始後に始まります。復元が完了すると、復元イベントが発行され、通知が届きます。

## ユースケースの例
<a name="persistentchatscenario"></a>

例えば、顧客がチャットセッションを開始するとします。

1. エージェント a1 がチャットを受け入れ、顧客とエージェント a1 の間で会話が開始されます。これは、現在のチャットセッションで作成された最初の問い合わせです。例えば、`contactId` **C1** を 11111111-aaaa-bbbb-1111-1111111111111 とします。

1. その後、エージェント a1 はチャットをエージェント a2 に転送します。これにより、別の問い合わせが作成されます。例えば、`contactId` **C2** を 2222222-aaaa-bbbb-2222-222222222222222 とします。

1. エージェント a2 がチャットを終了します。

1. カスタマーは、別の問い合わせが作成されるチャット後の調査の切断フローに転送されます。例えば、`contactId` **C3** を 33333333-aaaa-bbbb-3333-3333333333333 とします。

1. チャット後の調査が表示され、チャットセッションが終了します。

1. 顧客は、後から戻って、過去のチャットセッションの再開することを希望しています。

この時点で、顧客にとって 2 つの異なるユースケースが考えられます。以下は、顧客が利用できる永続チャットのユースケースと、それらを提供するための Amazon Connect の設定方法です。

### ユースケース 1
<a name="persistentchatscenario-usecase1"></a>

顧客は過去のチャットセッションを継続し、チャット後の調査を非表示にすることを希望しています。このエクスペリエンスを提供するには、次の設定を使用します。

**リクエスト**:

```
PUT /contact/chat HTTP/1.1
Content-type: application/json
{
   "Attributes": { 
      "string" : "string" 
   },
   "ContactFlowId": "string",
   "InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   },
   "InstanceId": "string",
   ... // other chat fields
     
   // NEW Attribute for persistent chat 
   "PersistentChat" : {
       "SourceContactId":"2222222-aaaa-bbbb-2222-222222222222222" 
       "RehydrationType":"FROM_SEGMENT"
   }
}
```

#### 設定
<a name="usecase1-configuration"></a>
+ SourceContactId = 2222222-aaaa-bbbb-2222-222222222222222 (C2 の contactId)
+ RehydrationType = "`FROM_SEGMENT`"

#### 予想される動作
<a name="usecase1-behavior"></a>
+ この設定によって、指定した過去に終了した問い合わせ (例えば、2222222-aaaa-bbbb-2222-222222222222222) から永続チャットセッションが開始されます。

  過去のチャットセッション C2 (2222222-aaaa-bbbb-2222-222222222222222) と C1 (11111111-aaaa-bbbb-1111-1111111111111) のトランスクリプトには、現在の永続チャットセッションからアクセスできます。チャットセグメント C3 (33333333-aaaa-bbbb-3333-3333333333333) が永続チャットセッションから削除されていることに注意してください。
+ この場合、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) 応答は C2 (2222222-aaaa-bbbb-2222-222222222222222) を「ContinuedFromContactId」として返します。
+ この永続チャットセッションの `RelatedContactId` は 2222222-aaaa-bbbb-2222-222222222222222 (C2) です。

### ユースケース 2
<a name="persistentchatscenario-usecase2"></a>

顧客は、過去のチャットセッションを継続し、過去のエンゲージメント全体のトランスクリプトを参照することを希望しています (また、チャット後の調査を非表示にしたくありません)。このエクスペリエンスを提供するには、次の設定を使用します。

**注記**  
 `ENTIRE_PAST_SESSION` リハイドレーションタイプの場合、過去のチャットセッションの最初の問い合わせ (最初の `contactId`) を `SourceContactId` 属性として指定します。

**リクエスト**:

```
PUT /contact/chat HTTP/1.1
Content-type: application/json
{
   "Attributes": { 
      "string" : "string" 
   },
   "ContactFlowId": "string",
   "InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   },
   "InstanceId": "string",
   ... // other chat fields
     
   // NEW Attribute for persistent chat 
   "PersistentChat":{
        "SourceContactId":"11111111-aaaa-bbbb-1111-1111111111111" // (first contactId C1)
        "RehydrationType":"ENTIRE_PAST_SESSION"
   }
}
```

#### 設定
<a name="usecase2-configuration"></a>
+ SourceContactId = `11111111-aaaa-bbbb-1111-1111111111111` (C1)
+ RehydrationType = "E`NTIRE_PAST_SESSION`"

#### 予想される動作
<a name="usecase2-behavior"></a>
+ これにより、最後に終了したチャット問い合わせ (C3) から永続チャットセッションが開始されます。過去のチャットセッション C3、C2、C1 のトランスクリプトには、現在の永続チャットセッションでアクセスできます。
+ この場合、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) 応答は 33333333-aaaa-bbbb-3333-3333333333333 (C3) を「ContinuedFromContactId」として返します。
+ この永続チャットセッションの `RelatedContactId` は 33333333-aaaa-bbbb-3333-3333333333333 (C3) です

**注記**  
チャットの関連付けは累積的です。チャットセッションがリンクされると、引き継がれます。  
例えば、過去のチャットセッションに属する問い合わせ (`contactId` C2) が別の過去のチャットセッションの問い合わせ (`contactId` C1) にリンクされている場合、C2 をリンクして新しい永続チャットセッションを作成すると、C1 も暗黙的に関連付けられます。新しい永続チャットセッションでは、C3 → C2 → C1 という関連付けが作成されます。  
[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API 応答の `ContinuedFromContactId` フィールドには、永続チャットセッションの継続元の過去の contactId が公開されます。これは、問い合わせの[問い合わせレコード](ctr-data-model.md#ctr-ContactTraceRecord)の RelatedContactId フィールドでも公開されます。

## 永続チャットの過去のチャット問い合わせのトランスクリプトにアクセスする方法
<a name="access-past-chat-transcript"></a>

永続チャットの過去のチャットのトランスクリプトにアクセスするには、既存の `NextToken` ページ分割モデルを使用します。新たに開始された永続チャットセッションの [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) への最初の呼び出しでは、過去のチャットメッセージが存在する場合、応答に `NextToken` が含まれます。過去のチャットトランスクリプトにアクセスするには、後続の [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) 呼び出しで `ScanDirection` を `BACKWARD` に設定して過去のチャットメッセージを取得するとともに、`NextToken` を使用する必要があります。

過去のチャットメッセージが複数ある場合は、[GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) によって新しい `NextToken` が返され、同じプロセスを繰り返して過去のチャット履歴をさらに取得できます。

## サポート対象外: 永続チャットでの `StartPosition` および `contactId` フィルターの使用
<a name="startposition"></a>

Amazon Connect は、過去のチャットからのトランスクリプト項目属性の [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) 呼び出しでの `StartPosition`および `contactId`フィルターの使用をサポートしていません。

# Amazon Connect でリアルタイムチャットメッセージストリーミングを有効にする
<a name="chat-message-streaming"></a>

Amazon Connect Chat は [API](https://docs.aws.amazon.com/connect/latest/APIReference/Welcome.html) を提供します。ユーザーはこの API でチャットメッセージのリアルタイムストリームをサブスクライブすることができます。これらの API を使用すると、次のことができます。
+ API を使用して、新しいチャットの問い合わせが作成されたときに、リアルタイムでメッセージをストリーミングする。
+ 現在の Amazon Connect Chat 機能を拡張して、SMS ソリューションおよびサードパーティーのメッセージングアプリケーションとの統合を構築する、モバイルプッシュ通知を有効にし、チャットメッセージのアクティビティを監視および追跡するための分析ダッシュボードを作成するなどのユースケースをサポートする。

**注記**  
このページでは、Amazon Connect でチャットメッセージをリアルタイムでストリーミングするために SNS エンドポイントをサブスクライブする方法について説明します。Amazon Connect で会話 AI インタラクションのメッセージストリーミングを有効にする場合は、「」を参照してください[AI を活用したチャットのメッセージストリーミングを有効にする](message-streaming-ai-chat.md)。

## メッセージストリーミング API の仕組み
<a name="how-chat-message-streaming-apis-work"></a>

[Amazon Connect メッセージストリーミング API](https://docs.aws.amazon.com/connect/latest/APIReference/Welcome.html) は、Amazon Connect Chat の問い合わせで特定のイベントが発生したときにトリガーされます。例えば、顧客が新しいチャットメッセージを送信すると、イベントは送信したばかりのメッセージに関するデータを含む指定されたエンドポイントに[ペイロード](sns-payload.md)を送信します。メッセージは、特定のエンドポイントに対し、[Amazon Simple Notification Service](https://docs.aws.amazon.com/sns/latest/dg/welcome.html) (Amazon SNS) 使用して公開されます。

このトピックでは、Amazon Connect および Amazon SNS を使用してリアルタイムメッセージストリーミングをセットアップする方法について説明します。手順は次のとおりです。

1. Amazon SNS コンソールを使用して、新しいスタンダード SNS トピックを作成し、メッセージをセットアップします。

1. [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API を呼び出し、チャットの問い合わせを開始します。

1. [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html) API を呼び出し、メッセージストリーミングを開始します。

1. [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) API を呼び出し、参加者の接続を作成します。

## ステップ 1: スタンダード SNS トピックを作成する
<a name="step1-chat-streaming"></a>

1. Amazon SNS コンソールに移動します。

1.  AWS アカウントに [SNS トピックを作成します](https://docs.aws.amazon.com/sns/latest/dg/sns-create-topic.html)。**[Details]** (詳細) セクションで **[Type]** (タイプ) に**[Standard]** (スタンダード) を選択し、トピックの名前を入力して、続いて、**[Create topic]** (トピックを作成) を選択します。
**注記**  
現在、メッセージストリーミング API は、メッセージのリアルタイムストリーミングのためのスタンダード SNS のみをサポートしています。[Amazon SNS FIFO (First-In-First-Out) トピック](https://docs.aws.amazon.com/sns/latest/dg/sns-fifo-topics.html)はサポートされていません。

1. トピックを作成すると、その Amazon リソースネーム (ARN) が、**[Details]** (詳細) セクションに追加されます。トピック ARN をクリップボードにコピーします。トピック ARN は次のステップと[ステップ 3: 問い合わせのメッセージストリーミングを有効にする](#step3-chat-streaming)で使用します。

   トピック ARN は以下の例のようになります。

   ```
   arn:aws:sns:us-east-1:123456789012:MyTopic                                
   ```

1. **[Access policy]** (アクセスポリシー) タブで、**[Edit]** (編集) をクリックし、SNS トピックにリソースベースのポリシーを追加して、Amazon Connect がそれを公開するための許可を持てるようにします。JSON エディタにコピーして貼り付け、独自の値を使用してカスタマイズできるサンプルの SNS ポリシーを次に示します。

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement":[
         {
            "Effect":"Allow",
            "Principal":{
               "Service":"connect.amazonaws.com"
            },
            "Action":"sns:Publish",
            "Resource":"arn:aws:sns:us-east-1:111122223333:TopicName",
            "Condition":{
               "StringEquals":{
                   "aws:SourceAccount":"111122223333"
               },
               "ArnEquals":{
               "aws:SourceArn":"arn:aws:connect:us-east-1:111122223333:instance/InstanceId"
               }
            }
         }
      ]
   }
   ```

------
**注記**  
デフォルトの**アクセスポリシー**には、次に示す `sourceOwner` などに適用される条件が付属しています。  

   ```
   "Condition": {
           "StringEquals": {
             "AWS:SourceOwner": "921772911154"
           }
         }
   ```
これを削除して、`SourceAccount` に置き換えてください。例:  

   ```
   "Condition":{
               "StringEquals":{
                  "aws:SourceAccount":"YOUR_AWS_ACCOUNT_ID"
               },
               "ArnEquals":{
                  "aws:SourceArn":"YOUR_CONNECT_INSTANCE_ARN"
               }
            }
   ```
これにより、[サービス間の混乱した代理](cross-service-confused-deputy-prevention.md)問題を回避できます。

1. SNS でサーバー側の暗号化を使用している場合は、`connect.amazonaws.com` の許可が KMS keyで有効になっていることを確認してください。次に、サンプルポリシーを示します。

------
#### [ JSON ]

****  

   ```
   {
       "Version":"2012-10-17",		 	 	 
       "Id": "key-consolepolicy-3",
       "Statement": [
           {
               "Sid": "Enable IAM User Permissions",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::111122223333:root",
                   "Service": "connect.amazonaws.com"
               },
               "Action": "kms:*",
               "Resource": "*"
           },
           {
               "Sid": "Allow access for Key Administrators",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::111122223333:root",
                   "Service": "connect.amazonaws.com"
               },
               "Action": [
                   "kms:Create*",
                   "kms:Describe*",
                   "kms:Enable*",
                   "kms:List*",
                   "kms:Put*",
                   "kms:Update*",
                   "kms:Revoke*",
                   "kms:Disable*",
                   "kms:Get*",
                   "kms:Delete*",
                   "kms:TagResource",
                   "kms:UntagResource",
                   "kms:ScheduleKeyDeletion",
                   "kms:CancelKeyDeletion"
               ],
               "Resource": "*"
           }
       ]
   }
   ```

------

## ステップ 2: チャット問い合わせを開始する
<a name="step2-chat-streaming"></a>

1. Amazon Connect [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API を呼び出し、チャットの問い合わせを開始します。

   Amazon Connect API を呼び出すための SDK クライアントを作成する方法の詳細については、以下のトピックを参照してください。
   + [クラス AmazonConnectClientBuilder](https://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/connect/AmazonConnectClientBuilder.html) 
   + [サービスクライアントの作成](https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/creating-clients.html) 

1. [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) 応答からの `ContactId` と `ParticipantToken` を追跡します。これらの応答属性は、ストリーミングを有効にするために必要な他のチャット API を呼び出すために使用されるためです。これについては、次の手順で説明されます。

## ステップ 3: 問い合わせのメッセージストリーミングを有効にする
<a name="step3-chat-streaming"></a>
+ [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html) を呼び出し、SNS トピックへのリアルタイムメッセージのストリーミングを有効にします。
  + **制限**: 問い合わせごとに最大 2 つの SNS トピックをサブスクライブできます。
  + [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html) を呼び出すと、SNS トピックの Amazon リソースネーム (ARN) を指定する必要があります ([ステップ 1: スタンダード SNS トピックを作成する](#step1-chat-streaming) を参照)。

    1 つの SNS トピック ARN を複数の で使用できますが AWS アカウント、Amazon Connect インスタンスと同じリージョンに存在する必要があります。例えば、トピックの ARN が **us-east-1** の場合は、Amazon Connect インスタンスは **us-east-1** に存在する必要があります。
  + ストリーミングエンドポイントで受信されない最初のチャットメッセージについては、[GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) API を呼び出して最初のメッセージを受信できます。

## ステップ 4: 参加者の接続を作成する
<a name="step4-chat-streaming"></a>
+ [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) と true として渡された `ConnectParticipant` 属性を呼び出します。
  + チャットの作成から 5 分以内に [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) を呼び出す必要があります。
  + [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) を true に設定された `ConnectParticipant` と呼び出すことは、[ステップ 2: チャット問い合わせを開始する](#step2-chat-streaming) でストリーミングを有効にし、発信者参加者が`Customer`である場合にのみ機能します。
  + このステップ (参加者接続の作成) は、`WEBSOCKET` を使用してチャット問い合わせに正常に接続している場合は、オプションです。

## 次の手順
<a name="nextsteps-chat-streaming"></a>

メッセージストリーミング API を操作するための設定はすべて完了です。

1. 正常に動作することを確認するには、作成した SNS トピックにメッセージが公開されていることを確認します。この検証は、Amazon CloudWatch メトリクスを使用して実行できます。手順については、[CloudWatch を使用した Amazon SNS のモニタリング](https://docs.aws.amazon.com/sns/latest/dg/sns-monitoring-using-cloudwatch.html)を参照してください。

1. SNS の[保持期限に制限がある](https://aws.amazon.com/blogs//aws/sns-ttl-control/)場合は、[Amazon Simple Queue Service (Amazon SQS)](https://aws.amazon.com/sqs/) [Amazon Kinesis](https://aws.amazon.com/kinesis/)、またはメッセージを保持するための別のサービスをセットアップすることをお勧めします。

1. [StopContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StopContactStreaming.html) の使用はオプションであり、問い合わせフローでチャットが[切断されている](disconnect-hang-up.md)場合、お客様がチャットを切断した場合には不要です。ただし、`StopContactStreaming` は、チャットがアクティブで進行中であっても、SNS トピックでのメッセージのストリーミングを停止するオプションを提供します。

# Amazon Connect でメッセージストリーミングを有効にした後、Amazon SNS ペイロードを使用する
<a name="sns-payload"></a>

メッセージのストリーミングを正常に有効化した後、目的の参加者 (エージェント、お客様、またはすべて) にメッセージを送信するため、それらをフィルタリングする必要がある場合があります。

参加者でメッセージをフィルタリングするには、特定の SNS ヘッダー属性 (`MessageVisibility`) を読み取り、メッセージが顧客専用、エージェントのみ、またはすべてを対象とするかどうかを判別します。
+ お客様のみに送信する: お客様が直接目にするすべてのコードについて、クライアントはお客様向けのメッセージをフィルタリングし、メッセージを転送するための次のロジックを構築する必要があります。

  ```
  if ( ( MessageVisibility == CUSTOMER || MessageVisibility == ALL)  && ParticipantRole != CUSTOMER )
  ```
+ エージェントのみに送信する: 

  ```
  if ( ( MessageVisibility == AGENT || MessageVisibility == ALL)  && ParticipantRole != AGENT )
  ```

カスタムの[サブスクリプションフィルターポリシー](https://docs.aws.amazon.com/sns/latest/dg/sns-subscription-filter-policies.html)を構築して Amazon SNS のフィルタリング機能を活用することもできます。これにより、メッセージフィルタリングロジックが SNS トピックのサブスクライバーから SNS サービス自体にオフロードされます。

## ペイロードのメッセージ属性
<a name="sns-message-attributes"></a>

Amazon SNS ペイロードの各メッセージ属性の説明を以下に示します。
+ `InitialContactId`: チャットの最初の問い合わせ ID。
+ `ContactId`: チャットの現在の問い合わせ ID。`InitialContactId` と `ContactId` はチャットまたはキュー間の問い合わせフローに新しいエージェントが存在したかどうかで異なる場合があります。
+ `ParticipantRole`: メッセージを送信した参加者。
+ `InstanceId`: Amazon Connect インスタンス ID。
+ `AccountId`: AWS アカウント ID。
+ `Type`: 使用できる値: `EVENT`、`MESSAGE`。
+ `ContentType`: 使用できる値: `application/vnd.amazonaws.connect.event.typing`、`application/vnd.amazonaws.connect.event.participant.joined`、`application/vnd.amazonaws.connect.event.participant.left`、`application/vnd.amazonaws.connect.event.transfer.succeeded`、`application/vnd.amazonaws.connect.event.transfer.failed`、`application/vnd.amazonaws.connect.message.interactive`、`application/vnd.amazonaws.connect.event.chat.ended`、その他。
+ `MessageVisibility`: 使用できる値: `AGENT`、`CUSTOMER`、`ALL`。

## SNS ペイロードの例
<a name="sns-message-payload"></a>

```
{
  "Type" : "Notification",
  "MessageId" : "ccccccccc-cccc-cccc-cccc-ccccccccccccc",
  "TopicArn" : "arn:aws:sns:us-west-2:009969138378:connector-svc-test",
  "Message" :  "{\"AbsoluteTime\":\"2021-09-08T13:28:24.656Z\",\"Content\":\"help\",\"ContentType\":\"text/plain\",\"Id\":\"333333333-be0d-4a44-889d-d2a86fc06f0c\",\"Type\":\"MESSAGE\",\"ParticipantId\":\"bbbbbbbb-c562-4d95-b76c-dcbca8b4b5f7\",\"DisplayName\":\"Jane\",\"ParticipantRole\":\"CUSTOMER\",\"InitialContactId\":\"33333333-abc5-46db-9ad5-d772559ab556\",\"ContactId\":\"33333333-abc5-46db-9ad5-d772559ab556\"}",
  "Timestamp" : "2021-09-08T13:28:24.860Z",
  "SignatureVersion" : "1",
  "Signature" : "examplegggggg/1tEBYdiVDgJgBoJUniUFcArLFGfg5JCvpOr/v6LPCHiD7A0BWy8+ZOnGTmOjBMn80U9jSzYhKbHDbQHaNYTo9sRyQA31JtHHiIseQeMfTDpcaAXqfs8hdIXq4XZaJYqDFqosfbvh56VPh5QgmeHTltTc7eOZBUwnt/177eOTLTt2yB0ItMV3NAYuE1Tdxya1lLYZQUIMxETTVcRAZkDIu8TbRZC9a00q2RQVjXhDaU3k+tL+kk85syW/2ryjjkDYoUb+dyRGkqMy4aKA22UpfidOtdAZ/GGtXaXSKBqazZTEUuSEzt0duLtFntQiYJanU05gtDig==",
  "SigningCertURL" : "https://sns.us-west-2.amazonaws.com/SimpleNotificationService-11111111111111111111111111111111.pem",
  "UnsubscribeURL" : "https://sns.us-west-2.amazonaws.com/?Action=Unsubscribe&SubscriptionArn=arn:aws:sns:us-west-2:000000000000:connector-svc-test:22222222-aaaa-bbbb-cccc-333333333333",
  "MessageAttributes" : {
    "InitialContactId" : {"Type":"String","Value":"33333333-abc5-46db-9ad5-d772559ab556"},
    "MessageVisibility" : {"Type":"String","Value":"ALL"},
    "Type" : {"Type":"String","Value":"MESSAGE"},
    "AccountId" : {"Type":"String","Value":"999999999999"},
    "ContentType" : {"Type":"String","Value":"text/plain"},
    "InstanceId" : {"Type":"String","Value":"dddddddd-b64e-40c5-921b-109fd92499ae"},
    "ContactId" : {"Type":"String","Value":"33333333-abc5-46db-9ad5-d772559ab556"},
    "ParticipantRole" : {"Type":"String","Value":"CUSTOMER"}
  }
}
```

# Amazon Connect でのメッセージストリーミングの問題のトラブルシューティング
<a name="troubleshoot-message-streaming"></a>

## メッセージが SNS に公開されない
<a name="message-not-published-to-sns"></a>

この問題が発生した場合は、[ステップ 1: スタンダード SNS トピックを作成する](chat-message-streaming.md#step1-chat-streaming) の情報をチェックすることをお勧めします。
+ [Amazon SNS FIFO (先入れ先出し)](https://docs.aws.amazon.com/sns/latest/dg/sns-fifo-topics.html) ではなく、スタンダードの SNS を使用していることを確認します。現在、メッセージストリーミング API は、メッセージのリアルタイムストリーミングのためのスタンダード SNS のみをサポートしています。
+ SNS リソースベースの許可がアカウントに正しく適用されていることを確認します。
  + サーバー側の暗号化が有効になっている場合は、暗号化と復号化に同じ Amazon Connect サービスプリンシパルの許可を付与する必要があります。

## フローが開始しない
<a name="contact-flow-not-starting"></a>

WebSocket の代わりにメッセージストリーミング API を使用している場合は、接続確認イベントを送信します。[ステップ 4: 参加者の接続を作成する](chat-message-streaming.md#step4-chat-streaming) を参照してください。これは WebSocket に接続するのと同義です。フローは、接続確認イベントの後でのみ開始されます。

`Customer` を接続とマークするには、[StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html) の後に、[CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) を呼び出します。[ステップ 3: 問い合わせのメッセージストリーミングを有効にする](chat-message-streaming.md#step3-chat-streaming) を参照してください。これにより、お客様がメッセージを受信する準備ができていることを確認した後、メッセージが確実に送信されます。

## 問題は解決されませんか?
<a name="other-issues-message-streaming"></a>

前のソリューションを試した後でもメッセージストリーミングに問題がある場合は、 サポート にお問い合わせください。

Amazon Connect の管理者は、次のいずれかのオプションを選択して、サポートに問い合わせることができます。
+  AWS サポートアカウントをお持ちの場合は、[サポートセンター](https://console.aws.amazon.com/support/home)にアクセスしてチケットを送信してください。
+ それ以外の場合は、[AWS マネジメントコンソール](https://console.aws.amazon.com/) を開き、[**Amazon Connect**]、[**サポート**]、[**ケースを作成する**] の順に選択します。

次の情報を入力すると便利です。
+ コンタクトセンターのインスタンス ID/ARN。インスタンス ARN を確認するには、「[Amazon Connect インスタンスの ID または ARN の検索](find-instance-arn.md)」を参照してください。
+ ご利用のリージョン。
+ 問題についての詳しい説明。

# カスタム参加者を統合して Amazon Connect でのチャットフローエクスペリエンスをカスタマイズする
<a name="chat-customize-flow"></a>

ボットなどの他のソリューションを Amazon Connect チャットと統合して、カスタマイズされたチャットフローエクスペリエンスを作成できます。

チャットフローエクスペリエンスをカスタマイズする方法に関する概要は次のとおりです。チャットの会話が開始されたら、各チャットセグメントについて以下の手順を実行します。チャットフローで API を呼び出すために [AWS Lambda 関数](invoke-lambda-function-block.md) ブロックを追加することをお勧めします。

**重要**  
[プロンプトの再生](play.md) ブロックを [AWS Lambda 関数](invoke-lambda-function-block.md) ブロックの前に追加します。これは、** AWS Lambda 呼び出し**ブロックがインバウンドチャットフローの最初のブロックである場合にのみ必要です。

1.  [チャットメッセージのリアルタイムストリーミングを有効にします](chat-message-streaming.md)。

1. Amazon Connect [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html) API を呼び出して、チャット連絡先にカスタム参加者 (`ParticipantRole`=`CUSTOM_BOT`) を追加します。

   1. Amazon Connect API を呼び出すための SDK クライアントを作成する方法の詳細については、以下のトピックを参照してください。
      + [クラス AmazonConnectClientBuilder](https://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/connect/AmazonConnectClientBuilder.html)
      + [サービスクライアントの作成](https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/creating-clients.html)

   1. [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) を呼び出すには、[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html) から取得された `ParticipantToken` を保持します。`CreateParticipantConnection` は `ConnectionToken` を返します。これを使用して、他の Amazon Connect Participant API を呼び出すことができます。

      [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) を呼び出してカスタム参加者の接続を作成する場合:
      + `ConnectParticipant` を `True` に設定すると、カスタム参加者はメッセージストリーミングに接続済みとしてマークされます。
      + `Type` を `CONNECTION_CREDENTIALS` と渡して、以降の Amazon Connect Participant Service API を呼び出します。
      + `CreateParticipantConnection` は、`CreateParticipant` に電話をかけてから 15 秒以内に呼び出す必要があります。

1. 参加者が連絡先に追加された後、Amazon Connect Participant Service API を使用して顧客とメッセージを交換できます。

1. 参加者を接続解除するには、[DisconnectParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html) API を呼び出します。

**注記**  
連絡先にエージェントまたは Amazon Lex ボットが既に存在する場合、カスタム参加者をチャットに追加することはできません。
エージェントまたは Amazon Lex ボットが連絡先に参加すると、カスタム参加者は接続が切断されます。
1 件の連絡先に登録できるカスタム参加者は 1 人だけです。
カスタム参加者は、顧客がアップロードする添付ファイルにアクセスすることはできません。

カスタム参加者が連絡先とチャットできる時間を設定することをお勧めします。
+ `ParticipantRole` = `CUSTOM_BOT` の [待機](wait.md) ブロックに **[タイムアウト]** プロパティを設定します。
+ タイムアウトまでにカスタムボットの参加者が接続解除されない場合、連絡先は **[期限切れ]** ブランチにルーティングされます。これにより、顧客のクエリを解決するために次に実行するブロックを決定できます。

**注記**  
連絡先が **[期限切れ]** ブランチにルーティングされても、連絡先との接続は切断されません。参加者を接続解除するには、[DisconnectParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html) API を呼び出す必要があります。

## カスタム参加者に参加している顧客のタイマーをアクティブ化する
<a name="integrate-bot-extension-client"></a>

カスタムボットなどのカスタム参加者に参加している顧客のタイマーをアクティブ化できます。これにより、顧客が応答を停止したことを検出してボットの会話を終了し、フローの次のステップを実行することができます。アイドル状態の参加者を終了することで、応答しない顧客がカスタム参加者と関与しているオープンチャットの数を減らすことができます。

次のステップを実行して、アイドル状態の参加者カスタムボット拡張機能を統合し、オプションでカスタムタイマー値を設定します。これらのステップは、すでにチャットのカスタム参加者機能を使用していることを前提としています。

1. カスタム参加者がチャットに参加する前に、顧客の [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html) API を呼び出します。

   1. タイマーは顧客に対してのみアクティブ化されます。カスタム参加者には、アイドル状態の参加者タイマーや接続の自動解除タイマーはありません。

   1. API を呼び出す方法を選択できます。

   1. このステップで設定されたタイマー値は、チャットの有効期間中保持されます。**顧客とエージェント間の対話**に異なるタイマー値が必要な場合は、「ステップ 2」を参照してください。

   1. 顧客がすでにこのように設定されている場合、カスタム参加者を統合するために他の操作を実行する必要はありません。

1. (任意) **顧客とエージェントの対話**と**顧客とカスタム参加者の対話**にそれぞれ異なるタイマーとタイマー値を設定する方法: 
   + エージェントがチャットに参加する前に、必要な設定で [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html) API を再度呼び出します。

チャットのタイマーの詳細については、「[チャット参加者のチャットタイムアウトを設定する](setup-chat-timeouts.md)」を参照してください。

### タイマーの開始
<a name="starting-timers"></a>

カスタム参加者が [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html) API を使用して接続を確立した後にタイマーが開始します。

### 共存できない参加者がカスタム参加者のチャットに参加するとどうなるか
<a name="non-compatible-participants"></a>

エージェントまたは Lex ボット参加者がカスタム参加者のチャットに参加すると、共存できないため次のようなことが起こります。

1. カスタム参加者はチャットから自動的に切断されます。

1. それまでアクティブだったタイマーはすべて終了し、接続されている参加者のために新しいタイマーが作成されます (タイマーが設定されている場合）。

1. それぞれの新しいタイマーも最新の設定で更新されます (必要な場合）。これにより、チャットの新しいアクティブな参加者のグループの新しい「アイドルセッション」が確立されます。

### 待機ブロックタイマーとのやり取り
<a name="interaction-wait-block-timer"></a>

アイドルタイマーは、[待機](wait.md) ブロックの動作には影響しません。

チャットでの問い合わせが**待機**ブロックに入ったときに開始する**待機**ブロックタイマーは、引き続き機能します。**待機**ブロックタイマーの有効期限が切れると、アイドル状態の参加者タイマーがアクティブであるかどうかに関係なく、コンタクトはフローを再開し、**期限切れ**ブランチにルーティングされます。

## トラブルシューティングのヒント
<a name="ts-chat-custom-bot"></a>
+ `ResourceNotFoundException`: 

  `CreateParticipantConnection` API の呼び出し時にカスタム参加者に `ResourceNotFoundException` を取得した場合は、`CreateParticipantConnection` API が `CreateParticipant` API から 15 秒以内に呼び出されたかどうかを確認してください。
+ `AccessDeniedException`: 

  `AccessDeniedException` エラーが発生し、参加者ロールが CUSTOM\$1BOT の場合、ボットが添付ファイルにアクセスしようとしていることを示します。CUSTOM\$1BOT の参加者ロールは、顧客がアップロードする添付ファイルにアクセスすることはできません。

# Amazon Connect でチャットコンタクトの顧客認証を設定する
<a name="customer-auth"></a>

チャット中にサインインして認証するように顧客に求めることができます。例えば、顧客が認証せずにチャットボットを利用している場合は、エージェントにルーティングされる前にサインインを求めることができます。

この組み込み機能は、Amazon Connect Customer Profiles と [Amazon Cognito](https://aws.amazon.com/cognito/) を活用します。セットアップ時にデフォルト設定を選択した場合、Amazon Connect インスタンスで既に[有効](enable-customer-profiles.md)になっている Customer Profiles の使用に追加のコストはかかりません。Amazon Cognitoの料金については、「[Amazon Cognito の料金](https://aws.amazon.com/cognito/pricing/)」ページを参照してください。

チャットの顧客認証を設定するには:

1. Amazon Connect インスタンスで[顧客認証を有効](enable-connect-managed-auth.md#enable-customer-auth)にします。

1. [認証メッセージを有効にする](enable-connect-managed-auth.md#enable-auth-message).

1. [顧客を認証](authenticate-customer.md) ブロックをフローに追加します。

コンタクトセンターが Amazon Connect の外部にある既存の認証ソリューションを使用している場合は、「[チャット前認証](pre-chat-auth.md)」を参照してください。

# ホストされるコミュニケーションウィジェットの顧客認証を有効にする
<a name="enable-connect-managed-auth"></a>

このトピックでは、チャットに Amazon Connect がホストするコミュニケーションウィジェットを使用している場合に認証を設定する方法について説明します。Amazon Connect インスタンスの顧客認証を有効にし、Amazon Cognito がホストする UI へのポップアップを開くリンクを表示する認証メッセージを有効にします。

## 必要な IAM ポリシー
<a name="auth-page-iam-policies"></a>

カスタム IAM ポリシーを使用して Amazon Connect コンソールへのアクセスを管理する場合は、「[カスタム IAM ポリシーに必要なアクセス許可](security-iam-amazon-connect-permissions.md)」で **[顧客認証]** ページへのアクセスに必要なアクセス許可のリストを参照してください。

## Amazon Connect インスタンスで顧客認証を有効にする
<a name="enable-customer-auth"></a>

1. Amazon Connect コンソール ([https://console.aws.amazon.com/connect/](https://console.aws.amazon.com/connect/)) を開きます。

1. インスタンスページで、インスタンスエイリアスを選択します。インスタンスエイリアスは、**インスタンス名**として Amazon Connect URL にも表示されます。次の画像は、**[Amazon Connect 仮想コンタクトセンターのインスタンス]** ページを示しています。インスタンスエイリアスがボックスで囲まれています。  
![\[[Amazon Connect 仮想コンタクトセンターのインスタンス] ページ、インスタンスのエイリアス。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/instance.png)

1. 左側のナビゲーションメニューで、**[アプリケーション]**、**[顧客認証]** を選択します。このオプションが表示されない場合は、 AWS リージョンで使用できない場合があります。顧客認証を使用できる場所の詳細については、「[リージョン別の顧客認証の可用性](regions.md#customerauthentication_region)」を参照してください。

1. **[顧客認証]** ページで、**[Amazon Cognito でユーザープールを作成する]** を選択します。これで Amazon Cognito コンソールが開きます。

1. ID プロバイダを使用してユーザープールを作成します。手順については、「*Amazon Cognito デベロッパーガイド*」の「[ユーザープールの開始方法](https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-user-pools.html)」を参照してください。
**注記**  
Amazon Cognito アプリクライアントの設定時に **[クライアントのシークレットを生成しない]** を選択する必要があります。クライアントシークレットを使用しない Amazon Cognito アプリクライアントのみサポートされています。詳細については、「*Amazon Cognito デベロッパーガイド*」の「[アプリケーションクライアントによるアプリケーション固有の設定](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-client-apps.html)」を参照してください。

1. Amazon Cognito ユーザープールを作成したら、**[顧客認証]** ページに戻り、**[ユーザープールを関連付ける]** を選択します。

1. **[ユーザープール]** セクションで、ドロップダウンメニューから作成したユーザープールを選択し、**[確認]** を選択します。

   これにより、ユーザープールが Amazon Connect インスタンスに関連付けられます。これにより、[顧客を認証](authenticate-customer.md)フローブロックがユーザープールにアクセスできるようになります。

1. 次のステップ「[認証メッセージを有効にする](#enable-auth-message)」に進みます。

## 認証メッセージを有効にする
<a name="enable-auth-message"></a>

認証メッセージを有効にするには、スニペットの最後に認証パラメータスニペット変数を追加します。スニペット変数の追加については、「[カスタマイズできる Amazon Connect でサポートされているウィジェットのスニペットフィールド](supported-snippet-fields.md)」を参照してください。次のコードは、追加する必要がある認証パラメータスニペットの例です。

```
amazon_connect('authenticationParameters', { 
    redirectUri: 'your_redirect_url', // https://example.com 
    identityProvider: 'your_identity_provider_name' //optional
 });
```

コードの説明は以下のとおりです。
+ `redirectUri` は、IdP (ID プロバイダー) と Amazon Cognito で設定したリダイレクト URI です。これは、サインイン後に顧客が自動的に誘導される場所です。このページでは、URL パラメータをチェックし、コードと状態がある場合は、それらの値を使用して [UpdateParticipantAuthentication](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantAuthentication.html) API を呼び出すことができます。API コールが完了したら、ポップアップを閉じます。顧客はチャットエクスペリエンスに戻ります。
+ `identityProvider` は、Amazon Cognito で設定した ID プロバイダー名です。このフィールドはオプションです。値が指定されている場合、サインインリンクは、ログインに使用する ID プロバイダーを選択する必要がある、Amazon Cognito で管理されるログインページではなく、ID プロバイダーのログインページに顧客を自動的に誘導します。

 フローが [[顧客を認証](authenticate-customer.md)] ブロックに到達すると、次のコードスニペットの例に示すように、コールバックを登録し、状態をローカルに保存してリダイレクト URI で検証できます。

```
amazon_connect('registerCallback', {
       'AUTHENTICATION_INITIATED' : (eventName, data) => {
            console.log(data.state)
        },
      });
```

顧客認証を有効にしたら、フローに [[顧客を認証](authenticate-customer.md)] ブロックを追加します。このブロックは、フロー中にチャットコンタクトを認証し、認証結果に基づいて特定のパスにルーティングします。

# Amazon Connect StartChatContact API を使用したチャット前認証
<a name="pre-chat-auth"></a>

チャットを開始する前にウェブサイトまたはモバイルアプリケーションで認証した顧客は、チャットの開始時に認証済みとして認識されます。これを行うには、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API を使用します。

認証された顧客がチャットを開始したら、次のコードスニペットに示すように、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API のパラメータを使用してステータスを設定します。

```
"SegmentAttributes": {
    "connect:CustomerAuthentication" : { 
        "ValueMap": {
            "Status": {
                "ValueString": "AUTHENTICATED"
            }
        }
    },
    "CustomerId": "12345"
```

`CustomerId` は、顧客を識別するためのオプションフィールドです。これは、Amazon Connect Customer Profiles ID または CRM などの外部システムからのカスタム識別子のいずれかです。

# AI を活用したチャットのメッセージストリーミングを有効にする
<a name="message-streaming-ai-chat"></a>

Amazon Connect は、AI を活用したチャットインタラクションのメッセージストリーミングをサポートしています。AI エージェントからの応答は、生成されるにつれて徐々に表示され、会話中のカスタマーエクスペリエンスが向上します。

以下は、統合オプションと各オプションの機能です。
+ Amazon Connect エージェント
  + Amazon Lex のタイムアウト制限を排除
  + 処理中にフルフィルメントメッセージを提供します (「アカウントを確認する一瞬」など)
  + 部分的なレスポンスをプログレッシブテキスト (テキストバブルの増加) で表示します。
+ Amazon Lex または Lambda 経由のサードパーティーボット
  + Amazon Lex のタイムアウト制限を排除
  + 標準ボットレスポンスの動作

2025 年 12 月以降に作成されたインスタンスは、自動的にこの機能にオプトインされます。既存のインスタンスでは、 API または コンソールを使用してメッセージストリーミングを手動で有効にする必要があります。

## API を使用してメッセージストリーミングを有効にする
<a name="message-streaming-enable-api"></a>

[UpdateInstanceAttribute](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateInstanceAttribute.html) API を使用して、メッセージストリーミングを有効にします。`MESSAGE_STREAMING` 属性を `true` に設定します。

```
aws connect update-instance-attribute \
  --instance-id your-instance-id \
  --attribute-type MESSAGE_STREAMING \
  --value true
```

オプトアウトするには、 属性を に設定します`false`。

## コンソールを使用してメッセージストリーミングを有効にする
<a name="message-streaming-enable-console"></a>

新しく作成されたインスタンスの場合、メッセージストリーミングはデフォルトで有効になっています。

既存のインスタンスの場合:

1. Amazon Connect コンソールを開き、インスタンスを選択します。

1. ナビゲーションペインで、**フロー** > **Amazon Lex ボット**を選択します。

1. **Lex ボット設定**で、**Amazon Connect でメッセージストリーミングを有効にする**を選択します。

**注記**  
コンソールを使用してメッセージストリーミングを有効にすると、必要な`lex:RecognizeMessageAsync`アクセス許可がボットエイリアスリソースベースのポリシーに自動的に追加されます。API を使用する場合は、このアクセス許可を手動で追加する必要があります。

![\[Amazon Connect コンソールでメッセージストリーミングオプションを有効にします。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/message-streaming-ai-chat-enablement.png)


## Lex ボットのアクセス許可を更新する
<a name="message-streaming-lex-permissions"></a>

メッセージストリーミングを有効にすると、Amazon Connect には Amazon Lex API を呼び出すアクセス許可が必要です。

```
lex:RecognizeMessageAsync
```

Amazon Connect インスタンスで使用される各 Amazon Lex ボットエイリアスのリソースベースのポリシーを更新する必要があります。

### ボットのリソースベースのポリシーを更新するタイミング
<a name="message-streaming-when-to-update"></a>
+ **新しいインスタンス** – 新しく関連付けられた Amazon Lex ボットエイリアスは、デフォルトでエイリアスポリシー`lex:RecognizeMessageAsync`に が含まれます。
+ **既存のボットを持つ既存のインスタンス** – インスタンスが以前に Amazon Lex を使用していて、現在メッセージストリーミングを有効にしている場合は、関連付けられたすべての Amazon Lex ボットエイリアスでリソースベースのポリシーを更新して、新しいアクセス許可を含める必要があります。

### Lex ボットエイリアスリソースベースのポリシーのサンプルスニペット
<a name="message-streaming-rbp-example"></a>

```
{
  "Version": "2012-10-17",		 	 	 
  "Statement": [
    {
      "Sid": "connect-us-west-2-MYINSTANCEID",
      "Effect": "Allow",
      "Principal": {
        "Service": "connect.amazonaws.com"
      },
      "Action": [
        "lex:RecognizeMessageAsync",
        "lex:RecognizeText",
        "lex:StartConversation
      ],
      "Resource": "arn:aws:lex:us-west-2:123456789012:bot-alias/MYBOT/MYBOTALIAS",
      "Condition": {
        "StringEquals": {
          "AWS:SourceAccount": "123456789012"
        },
        "ArnEquals": {
          "AWS:SourceArn": "arn:aws:connect:us-west-2:123456789012:instance/MYINSTANCEID"
        }
      }
    }
  ]
}
```

このアクセス許可を追加するには、Amazon Lex [UpdateResourcePolicy](https://docs.aws.amazon.com/lexv2/latest/APIReference/API_UpdateResourcePolicy.html) API を呼び出して Amazon Lex ボットエイリアスリソースベースのポリシーを更新し、Amazon Connect インスタンス ARN リソースの `lex:RecognizeMessageAsync`アクションを含めます。

**重要**  
この機能は現在、同じ[Amazon Connect のフローブロック: 顧客の入力の取得](get-customer-input.md)フローブロックへのブランチバックや、別の**顧客入力**ブロックで同じエイリアスを持つ Amazon Lex ボットの再利用をサポートしていません。代わりに、別の Amazon Lex **Lex ボットエイリアスを使用して新しい顧客入力**の取得ブロックを作成します。

## タイムアウト制限
<a name="message-streaming-timeout-limits"></a>

チャットエクスペリエンスには、次のタイムアウト制限が適用されます。
+ **標準チャットエクスペリエンス** – 10 秒のタイムアウト
+ **チャットストリーミング** – 60 秒のタイムアウト

# 処理中の機密データの秘匿化とメッセージ処理を有効にする
<a name="redaction-message-processing"></a>

Amazon Connect は、参加者に到達する前にチャットメッセージを傍受および変更するメッセージ処理をサポートしています。この機能を使用すると、機密データの自動編集とカスタムメッセージ処理が可能になり、企業はコンプライアンスとセキュリティ標準を維持できます。

以下は、処理オプションと各オプションの機能です。
+ 組み込みの機密データ秘匿化
  + クレジットカード番号、社会保障番号、およびその他の PII を自動的に検出して削除します
  + 英語、フランス語、ポルトガル語、ドイツ語、イタリア語、スペイン語のバリアントなど、複数の言語をサポートします。Contact Lens の秘匿化機能がサポートしている言語の一覧については、「[Amazon Connect の機能でサポートされている言語](supported-languages.md)」を参照してください。
  + 選択したデータエンティティまたはすべての機密データエンティティを編集するには、 を選択します。
  + を汎用プレースホルダー ([PII]) またはエンティティ固有のプレースホルダー ([NAME]、[CREDIT\$1CARD]) に置き換えます。
+ カスタムメッセージプロセッサ (Lambda 経由）。詳細については、[「Lambda 開発者ガイド」の「Lambda とは](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html)**」を参照してください。 AWS 
  + 言語翻訳のためのサードパーティーサービスの統合
  + 冒涜的なフィルタリングを適用する
  + AI/LLM サービスを使用したメッセージの変換
  + ビジネス固有のメッセージ変更を実装する

メッセージ処理を設定するには、**記録と分析の動作の設定**ブロックで編集ルールを定義します。詳細については、「[機密データの秘匿化を有効にする](enable-analytics.md#enable-redaction)」を参照してください。カスタム処理用の Lambda 関数を指定することもできます。

カスタムプロセッサ Lambda は、次の形式で入力 JSON を受け取ります。

```
{
  "version": "1.0",
  "instanceId": "string",
  "associatedResourceArn": "string",
  "chatContent": {
    "absoluteTime": "string",
    "content": "string",
    "contentType": "string",
    "id": "string",
    "participantId": "string",
    "displayName": "string",
    "participantRole": "string",
    "initialContactId": "string",
    "contactId": "string"
  }
}
```

次の形式で JSON を出力します。

```
{
  "status": "string", // "PROCESSED"|"APPROVED"|"FAILED"|"REJECTED"
  "result": {
    "processedChatContent": {
      "content": "string",
      "contentType": "string" // "text/plain"|"text/markdown"|"application/json"
    }
  }
}
```

処理されたチャットコンテンツは、チャット参加者に公開されたときに元のメッセージを置き換えます。