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.

  1. Create an LWC bundle. See Salesforce Trailhead: Build Lightning Web Components. In the example, the bundle is called customTextMessageBubble.

  2. 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.

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

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

  5. 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 agent and end-user message bubbles.

  6. Deploy the LWC to your org. See Salesforce Developer Guide: Introducing Lightning Web Components.

  7. 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.