Additional customizations for your Amazon Connect chat widget

You can add the following optional customizations to your chat user interface:

Display the End chat button in the header dropdown menu instead of in the footer.
Mask or hide display names.
Add message icons.
Override event messages.

Configure the customization object

This example shows how to implement some of the optional customizations. For a list of all possible customizations, see Supported options and constraints. Because these customizations are optional, you can implement some or all of the fields shown in the following example. Replace the eventNames.customer, eventNames.agent, eventNames.supervisor, eventMessages.participantJoined, eventMessages.participantDisconnect, eventMessages.participantLeft, eventMessages.participantIdle, eventMessages.participantReturned, and eventMessages.chatEnded strings as needed. Icons must be hosted on public URLs.


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,
        },
        footer: {
            disabled:true,
            skipCloseChatButton: true,
        }
});

The following image shows how the customizations look if you use the example:

Diagram showing the customizable display names, menu locations, and icons.

Supported options and constraints

The following table lists the supported customization fields and recommended value constraints.

Custom layout option	Type	Description
`header.dropdown`	Boolean	Renders the header dropdown menu instead of the default footer Note When you set this option to `true`, the Transcript download button appears and remains visible until you set the option to `false`, or until you remove the option.
`header.dynamicHeader`	Boolean	Dynamically sets the header title to "Chatting with Bot/AgentName"
`header.hideTranscriptDownloadButton`	Boolean	Hide the download transcript button in the header dropdown menu. The default value is `false`.
`transcript.hideDisplayNames`	Boolean	Hides all display names, will apply default name masks if `eventNames` is not provided
`transcript.eventNames.customer`	String	Masks the display name of customer
`transcript.eventNames.agent`	String	Masks the display name of agent
`transcript.eventNames.supervisor`	String	Masks the display name of supervisor
`transcript.eventMessages.participantJoined`	String	Overrides event message in the transcript for when a participant has joined the chat. If an empty string is specified, the event message will be omitted from the transcript. `{name}` can be passed in the message, and will be replaced with the display name of the corresponding participant. The default message is `{name} has joined the chat`.
`transcript.eventMessages.participantDisconnect`	String	Overrides event message in the transcript for when a participant is disconnected from the chat. If an empty string is specified, the event message will be omitted from the transcript. `{name}` can be passed in the message, and will be replaced with the display name of the corresponding participant. The default message is {`name} has been idle too long, disconnecting`.
`transcript.eventMessages.participantLeft`	String	Overrides event message in the transcript for when a participant has left the chat. If an empty string is specified, the event message will be omitted from the transcript. `{name}` can be passed in the message, and will be replaced with the display name of the corresponding participant. The default message is `{name} has left the chat`.
`transcript.eventMessages.participantIdle`	String	Overrides event message in the transcript for when a participant is idle. If an empty string is specified, the event message will be omitted from the transcript. `{name}` can be passed in the message, and will be replaced with the display name of the corresponding participant. The default message is `{name} has become idle`.
`transcript.eventMessages.participantReturned`	String	Overrides event message in the transcript for when a participant has returned to the chat. If an empty string is specified, the event message will be omitted from the transcript. `{name}` can be passed in the message, and will be replaced with the display name of the corresponding participant. The default message is `{name} has returned`.
`transcript.eventMessages.chatEnded`	String	Overrides event message in the transcript for when the chat has ended. If an empty string is specified, the event message will be omitted from the transcript. `{name}` can be passed in the message, and will be replaced with the display name of the corresponding participant. The default message is `Chat has ended!`
`transcript.displayIcons`	Boolean	Enables message display icons
`transcript.iconSources.botMessage`	String	Icon displayed for bot messages, must be hosted on a public URL
`transcript.iconSources.systemMessage`	String	Icon displayed for system message, must be hosted on a public URL
`transcript.iconSources.agentMessage`	String	Icon displayed for agent message, must be hosted on a public URL
`transcript.iconSources.customerMessage`	String	Icon displayed for customer message, must be hosted on a public URL
`composer.disableEmojiPicker`	Boolean	Disables the emoji picker when using the rich text editor
`composer.disableCustomerAttachments`	Boolean	Prevents customers from sending or uploading attachments
`footer.disabled`	Boolean	Hides the default footer and End chat button
`footer.skipCloseChatButton`	Boolean	Directly closes the widget on click of End chat button instead of showing Close button

Warning Javascript is disabled or is unavailable in your browser.

To use the Amazon Web Services Documentation, Javascript must be enabled. Please refer to your browser's Help pages for instructions.

Document Conventions

Pass contact attributes

Download the transcript for your chat widget

Select your cookie preferences

Customize cookie preferences

Essential

Performance

Functional

Advertising

Unable to save cookie preferences

Additional customizations for your Amazon Connect chat widget

Configure the customization object

Supported options and constraints

Note

Did this page help you?

Next topic:

Previous topic:

Need help?

Diagram showing the customizable display names, menu locations, and icons.