Rich Text Formatting

August 9, 2023 · View on GitHub

‼️ MUST ENABLE this feature for your initiateChat() config ["see "Configuration"]

Send and receive messages with rich text formatting. By default, customer will send "text/plain" to agent.

Chat Widget with rich messaging enabled screenshot

Reference

Specification

Supported formatting (see Basic Markdown Syntax)

  • Bold
  • Italic
  • Bulleted list
  • Numbered list
  • Hyperlinks
  • Emoji
Chat Widget with rich messaging enabled screenshot 
This is some *emphasized text* and some **strongly emphasized text**

This is a bulleted list (multiline):
* item 1
* item 2
* item 3

This is a numbered list:
1. item 1
2. item 2
3. item 3

Questions? Visit https://plainlink.com/faq

[This is a link](https://aws.amazon.com)

This is <code />

const SingleLinePickerSubtitle =
  "This is some *emphasized text* and some **strongly emphasized text**\r\nThis is a bulleted list:\n* item 1\n* item 2\n* item 3\n\nThis is a numbered list:\n1. item 1\n2. item 2\n3. item 3\n\nQuestions? Visit https://plainlink.com/faq\r\n[This is a link](https://aws.amazon.com)\r\nThis is `<code />`";

Configuration

Enable/disable feature by updating the initiateChat() config:

This will render the rich toolbar used to apply markdown styling and display the emoji picker.

connect.ChatInterface.initiateChat({
    name: customerName,
    region,
    apiGatewayEndpoint,
    instanceId,
    contactFlowId,
    // ...
+   supportedMessagingContentTypes: "text/plain,text/markdown", // default: "text/plain"
});

StartChatContact Lambda Updates

‼️ If using the StartChatContact Lambda CloudFormation ui-example template, you need to make sure to add this change:

// https://github.com/amazon-connect/amazon-connect-chat-ui-examples/pull/88/files#diff-869a2945b96e9ec51371b0c2895f164a9212a4d09c55a4453ee68243e146e2bc

function startChatContact(contactFlowId, username, body, instanceId) {
    return new Promise(function (resolve, reject) {
        var startChat = {
            "InstanceId": instanceId == "" ? process.env.INSTANCE_ID : instanceId,
            "ContactFlowId": contactFlowId == "" ? process.env.CONTACT_FLOW_ID : contactFlowId,
            },
            "ParticipantDetails": {
                "DisplayName": body["ParticipantDetails"]["DisplayName"]
            },
+           ...(!!body["SupportedMessagingContentTypes"] && { "SupportedMessagingContentTypes": body["SupportedMessagingContentTypes"] })
        };

        connect.startChatContact(startChat, function(err, data) { } );
    });
}

Example Messages

Plain Text Transcript Message (existing behavior):

{
    id: "asdf9374asdf92749adsf",
    type: PARTICIPANT_MESSAGE, // "MESSAGE"
    transportDetails: {
        direction: "Incoming",
    },
    content: {
        type: ContentType.MESSAGE_CONTENT_TYPE.TEXT_PLAIN, // "text/plain"
        data: "This is just plain text message"
    }
}

Rich Text Transcript Message (new behavior):

{
    id: "asdf9374asdf92749adsf",
    type: PARTICIPANT_MESSAGE, // "MESSAGE"
    transportDetails: {
        direction: "Incoming",
    },
    content: {
        type: ContentType.MESSAGE_CONTENT_TYPE.TEXT_MARKDOWN, // "text/markdown"
        data: "*italic* **bold**"
    }
}

amazon-connect-chatjs@^1.1.9 supports rich messaging with no additional configuration. [ref]

Referencing PR#92, the following additions are needed for rich messaging support: