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

# 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,
            minimizeChatHeaderButton: 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 です。 | 
| `header.minimizeChatHeaderButton` | ブール値 | チャットヘッダーに最小化ボタンを表示します。デフォルト値は 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}` を渡して、対応する参加者の表示名に置き換えることができます。デフォルトのメッセージは {`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 | チャットウィジェットの添付ファイル拒否のエラーメッセージをオーバーライドします。 |