Customize Text Message Bubbles

Customize the style of your message bubbles to match your brand’s unique look by using custom Lightning web components (LWC). This customization applies only to the message bubble. It won’t help you customize the avatar or any items around the bubble, such as read/delivery receipts, timestamps, or the resend function.

Create an LWC bundle. See Salesforce Trailhead: Build Lightning Web Components. In the example, the bundle is called customTextMessageBubble.
In the configuration file, add lightningSnapin__MessagingTextMessageBubble as a target. Adding it as a target makes the LWC component available for selection in the Custom UI Components setting under Embedded Service Deployments in Setup. See Customize your UI with Lightning Web Components.
customTextMessageBubble.js-meta.xml
1<?xml version="1.0" encoding="UTF-8"?> 2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> 3 <apiVersion>59.0</apiVersion> 4 <isExposed>true</isExposed> 5 <targets> 6 <target>lightningSnapin__MessagingTextMessageBubble</target> 7 </targets> 8</LightningComponentBundle>

Edit the HTML file to add a Lightning formatted rich text tag with the value textContent.

1<template>
2   <div class={generateMessageBubbleClassname}>
3     <lightning-formatted-rich-text value={textContent}></lightning-formatted-rich-text>
4   </div>
5</template>

Specify a function that returns the sender metadata and the text content of the conversation.

1import { api, LightningElement } from "lwc";
2 const MESSAGE_CONTENT_CLASS = "embedded-messaging-message-content";
3 const ENDUSER = "EndUser";
4 const AGENT = "Agent";
5 const CHATBOT = "Chatbot";
6 const PARTICIPANT_TYPES = [ENDUSER, AGENT, CHATBOT];
7
8 export default class CustomTextMessageBubble extends LightningElement {
9   /**
10    * Deployment configuration data.
11    * @type {Object}
12    */
13   @api configuration;
14
15   /**
16    * Conversation entry data.
17    * @type {Object}
18    */
19   @api conversationEntry;
20
21   /**
22    * Returns the sender of this conversation entry.
23    * @returns {string}
24    */
25   get sender() {
26     return this.conversationEntry.sender && this.conversationEntry.sender.role;
27   }
28
29   /**
30    * Returns the text content of the conversation entry.
31    * @returns {string}
32    */
33   get textContent() {
34     try {
35       const entryPayload = JSON.parse(this.conversationEntry.entryPayload);
36       if (
37         entryPayload.abstractMessage &&
38         entryPayload.abstractMessage.staticContent
39       ) {
40         const text = entryPayload.abstractMessage.staticContent.text;
41         return text.replace(
42           // innerText or textContent
43           /(?:(?:ht|f)tp(?:s?)\:\/\/|~\/|\/)?(?:\w+:\w+@)?((?:(?:[-\w\d{1-3}]+\.)+(?:com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|edu|co\.uk|ac\.uk|it|fr|tv|museum|asia|local|travel|[a-z]{2}))|((\b25[0-5]\b|\b[2][0-4][0-9]\b|\b[0-1]?[0-9]?[0-9]\b)(\.(\b25[0-5]\b|\b[2][0-4][0-9]\b|\b[0-1]?[0-9]?[0-9]\b)){3}))(?::[\d]{1,5})?(?:(?:(?:\/(?:[-\w~!$+|.,=]|%[a-f\d]{2})+)+|\/)+|\?|#)?(?:(?:\?(?:[-\w~!$+|.,*:]|%[a-f\d{2}])+=?(?:[-\w~!$+|.,*:=]|%[a-f\d]{2})*)(?:&(?:[-\w~!$+|.,*:]|%[a-f\d{2}])+=?(?:[-\w~!$+|.,*:=]|%[a-f\d]{2})*)*)*(?:#(?:[-\w~!$ |\/.,*:;=]|%[a-f\d]{2})*)?/g,
44           function (imgUrl) {
45             // Only switch out to specific shortened urls if the agent is the user.
46             if (this.sender === AGENT) {
47               // If the url is a specific link, then return a custom shortened link.
48               if (
49                 imgUrl === "https://www.test.com/specificLink" ||
50                 imgUrl === "https://www.test.com/anotherSpecificLink"
51               ) {
52                 return `<a target="_blank" href="${imgUrl}">View Link</a>`;
53               }
54               // Otherwise just shorten to a generic link "View Article".
55               return `<a target="_blank" href="${imgUrl}">View Article</a>`;
56             }
57             return imgUrl;
58           }.bind(this),
59         );
60       }
61       return "";
62     } catch (e) {
63       console.error(e);
64     }
65   }
66
67   /**
68    * Returns the class name of the message bubble.
69    * @returns {string}
70    */
71   get generateMessageBubbleClassname() {
72     if (this.isSupportedSender()) {
73       return `${MESSAGE_CONTENT_CLASS} ${this.sender}`;
74     } else {
75       throw new Error(`Unsupported participant type passed in: ${this.sender}`);
76     }
77   }
78
79   /**
80    * True if the sender is a support participant type.
81    * @returns {Boolean}
82    */
83   isSupportedSender() {
84     return PARTICIPANT_TYPES.some(
85       (participantType) => this.sender === participantType,
86     );
87   }
88 }

Specify the style of the message bubble in the CSS file. The code sample sets the font size to 0.875em and adds different styles to the rep and end-user message bubbles.

1:host {
2   display: block;
3 }
4
5 .Agent,
6 .Chatbot {
7   color: #FFFFFF;
8   background-color: #066AFE;
9   border-radius: 10px 10px 10px 0;
10   float: left;
11   padding: 0.5em;
12 }
13
14 .EndUser {
15   background-color: #EEF4FF;
16   color: black;
17   margin-left: auto;
18   padding: 0.5em;
19   border-radius: 10px 10px 0 10px;
20 }
21
22 lightning-formatted-text {
23   font-size: 0.875em;
24 }

Deploy the LWC to your org. See Salesforce Developer Guide: Introducing Lightning Web Components.
Add the LWC to your Embedded Service Deployment. See Salesforce Help: Customize Your UI with Lightning Web Components. To get custom LWC configuration details, see Salesforce Developer Guide: Get Custom Lightning Web Components Configuration Details.