Amazon Connect チャットウィジェットの追加のカスタマイズ

必要に応じて、次のカスタマイズをチャットユーザーインターフェイスに追加できます。

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

カスタマイズオブジェクトを設定する

この例は、一部のオプションのカスタマイズを実装する方法を示しています。考えられるすべてのカスタマイズのリストについては、「サポートされているオプションと制約」を参照してください。これらのカスタマイズはオプションのため、以下の例に示すフィールドの一部または全部を実装することができます。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,
        },
        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 
    }
});

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

カスタマイズできる表示名、メニューの場所、アイコン、およびチャット終了の確認ダイアログを示す図。

サポートされているオプションと制約

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

カスタムレイアウトオプション	型	説明
`header.dropdown`	ブール値	デフォルトのフッターの代わりにヘッダードロップダウンメニューを表示します注記このオプションを `true` に設定すると、[トランスクリプトダウンロード] ボタンが表示されます。オプションを `false` に設定するか、オプションを削除するまでこれが表示されたままになります。
`header.dynamicHeader`	ブール値	ヘッダータイトルを「ボット/AgentNameとのチャット」に動的に設定します。
`header.hideTranscriptDownloadButton`	ブール値	ヘッダードロップダウンメニューのチャット記録のダウンロードボタンを非表示にします。デフォルト値は `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`	ブール値	リッチテキストエディタの使用時に絵文字ピッカーを無効にします。
`composer.disableCustomerAttachments`	ブール値	顧客が添付ファイルを送信またはアップロードできないようにします。
`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	チャットウィジェットの添付ファイル拒否のエラーメッセージをオーバーライドします。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

問い合わせ属性を渡す

チャットウィジェットのトランスクリプトをダウンロードする

Amazon Connect チャットウィジェットの追加のカスタマイズ

カスタマイズオブジェクトを設定する

サポートされているオプションと制約

注記