spencerlepine
commented
1 year ago Hi @reziakk,
There is currently no way to configure SYSTEM_MESSAGE or BOT name in your contact flow. This is hard-coded internally and customizing this is unfortunately not a feature. You will need to hardcode this in the UI, and we provide open source code for you to customize.
Can you include details about your setup? Are you using the customChatWidget ui-example code, referring to this file? - https://github.com/amazon-connect/amazon-connect-chat-ui-examples/blob/master/customChatWidget/src/constants/index.js
customChatWidget updates
You can fork the open source code and generate a custom amazon-connect-chat-interface.js bundle file.
You could hard code new displayName for the incoming messages, in this ChatMessage.js#L175 file:
An incoming transcript item over the websocket will look like this:
{
transportDetails: {
direction: 'Incoming',
status: 'SendSuccess',
},
AbsoluteTime: AbsoluteTime + 4000,
MessageMetadata: {
MessageId: '31bf18c9-d80b-4f75-8145-c47946a26e03',
Receipts: [],
},
Content:
'Hello, Welcome to our Contact Center, connecting you with an agent now',
ContentType: 'text/plain',
DisplayName: 'SYSTEM_MESSAGE',
Id: '31bf18c9-d80b-4f75-8145-c47946a26e03',
ParticipantId: 'bcd32342-dd03-42ce-9288-9c44ebf81c4e',
ParticipantRole: 'SYSTEM',
Type: 'MESSAGE',
},{
Id: 'bulletedList2',
Type: 'message',
ParticipantId: '123',
AbsoluteTime: AbsoluteTime + 5000,
ParticipantRole: 'CUSTOMER',
transportDetails: {
direction: 'Outgoing',
status: 'SendSuccess',
},
content: {
type: ContentType.MESSAGE_CONTENT_TYPE.TEXT_MARKDOWN,
data: '* item3 \n * item4',
},
}- Clone the open source code
$ git clone https://github.com/amazon-connect/amazon-connect-chat-interface.git
$ cd amazon-connect-chat-interface
$ npm install- Edit the
ChatMessage.jscomponent
// https://github.com/amazon-connect/amazon-connect-chat-interface/src/components/Chat/ChatTranscriptor/ChatMessages/ChatMessage.js
export class ParticipantMessage {
static propTypes = {
messageDetails: PT.object.isRequired,
incomingMsgStyle: PT.object,
outgoingMsgStyle: PT.object,
mediaOperations: PT.object,
isLatestMessage: PT.bool,
shouldShowMessageReceipts: PT.bool,
sendReadReceipt: PT.func.isRequired,
};
constructor(props) {
super(props);
}
renderHeader() {
const isOutgoingMsg = this.props.messageDetails.transportDetails.direction === Direction.Outgoing;
+ let displayName = this.props.messageDetails.displayName || (isOutgoingMsg ? "Customer" : "Agent");
+ if (displayName === "BOT" || displayName === "SYSTEM_MESSAGE") {
+ displayName = "ALEXA"
+ }
const transportDetails = this.props.messageDetails.transportDetails;
return (
<React.Fragment>
<Header.Sender>{ displayName } < /Header.Sender>
< Header.Status > { transportStatusElement } < /Header.Status>
< /React.Fragment>
);
}
// ...
}- Generate a new bundle file
$ npm run release
# open the build output folder- Replace the old
amazon-connect-chat-interface.js: https://github.com/amazon-connect/amazon-connect-chat-ui-examples/blob/master/customChatWidget/public/amazon-connect-chat-interface.js
Hosted Widget Updates
Otherwise, if you are using the OOTB Amazon Connect Hosted Chat Widget, you can follow the documentation to customize SYSTEM_MESSAGE and BOT name: https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html#customize-chat-widget
Please let us know if this is help resolve your use case, or you had further questions.
Thanks, Spencer
reziakk
Hi, I'm looking for a way to replace the "SYSTEM_MESSAGE" and "BOT" when receiving messages. Already tried to replace the values in constants/index.js
export const chatParties = { SYSTEM_MESSAGE: 'Another value', BOT: 'Another value' }
Is there a way to replace it? To change for a custom value to display when the user receive the message from the system, meaning Contact Flow or the Bot?