Send and Receive Richly Formatted Messages with Markdown

Customers, Salesforce reps, and AI agents can apply certain Markdown syntax elements, such as bulleted lists, italics, and hyperlinks, to messages instead of using plain text. As a partner, learn how to configure Markdown support in your Bring Your Own Channel for CCaaS client application.

About Markdown Support

Our demo connector client application and Salesforce rep console support these basic Markdown syntax elements.

Bulleted lists
Numbered lists
Italics
Bold text
Hyperlinks

To keep a consistent rendering experience across both the demo connector and the Salesforce internal platform, we use the marked.esm.js library, which follows the CommonMark specification. We recommend using Marked for your client applications as well.

While the demo connector supports the five basic Markdown syntax elements, you can extend your client application to support the full CommonMark specification. Note that certain Markdown syntax elements may render differently depending on your client-side language and framework, potentially requiring CSS adjustments.

Markdown Implementation Considerations

The default parser option uses GitHub Flavored Markdown (GFM).
You can customize rendering options using the Marked configuration.
For advanced Markdown types like tables, headings, and blockquotes, make sure your client-side styles support the expected output.

Add Markdown Support

Include the marked.esm.js library in your codebase.
Import the library in your code.

1import { marked } from "./marked.esm.js";

Implement a Markdown parser with this example function.

1/**
2* Converts Markdown-formatted text to HTML using the Marked parser.
3*
4* @param {string} text - The Markdown string to convert.
5* @returns {string} The rendered HTML.
6*/
7function parseMarkdownToHtml(text) {
8   if (!text) {
9       return "";
10   }
11   try {
12       // Use GitHub Flavored Markdown (GFM) by default.
13       // See available options: https://marked.js.org/using_advanced#options
14       return marked.parse(text);
15   } catch (e) {
16       LoggingUtil.logError(e, COMPONENT_NAME, {
17           method: "parseMarkdownToHtml",
18           errMessage: "Error parsing Markdown input."
19       });
20       return "";
21   }
22}

Example Usage

Here’s an example of a message that a rep sends from the console in Markdown.

1Hello **Partner** 👋
2
3Here are the steps:
41. Open the chat window
52. Type your *message*
63. Add a [link](https://salesforce.com) if needed
7- Works with bullet lists
8- Works with numbered lists

The output renders for the end user in the chat application like this.

Hello Partner 👋
Here are the steps:

Open the chat window
Type your message
Add a link if needed

Works with bullet lists
Works with numbered lists

See Also

GitHub: Demo connector implementation of marked.esm.js
GitHub: Marked
CommonMark: Markdown Reference and Tutorial