---
schema_version: "1"
id: d42534198adb9dfde0a4c652e2ff4125d1e0da43e18eadaae63b83d5d61ed1bf
title: Customize Text Message Bubbles
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/service-cloud/messaging-web/guides/customize-text-message-bubble.md
canonical_url: https://developer.salesforce.com/docs/service/messaging-web/guide/customize-text-message-bubble.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f3129b0f7d55ec950b32849eb66be573b6de9d0968e9c1d9feec14c1dc8cc472
products:
  - Enhanced Web Chat
  - Service Cloud Developer Content
---
# 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](https://trailhead.salesforce.com/content/learn/trails/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](https://help.salesforce.com/s/articleView?id=service.messaging_lightning_web_components.htm).

   ```xml
<?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightningSnapin__MessagingTextMessageBubble</target>
    </targets>
   </LightningComponentBundle>
```

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

   ```html
<template>
      <div class={generateMessageBubbleClassname}>
        <lightning-formatted-rich-text value={textContent}></lightning-formatted-rich-text>
      </div>
   </template>
```

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

   ```javascript
import { api, LightningElement } from "lwc";
    const MESSAGE_CONTENT_CLASS = "embedded-messaging-message-content";
    const ENDUSER = "EndUser";
    const AGENT = "Agent";
    const CHATBOT = "Chatbot";
    const PARTICIPANT_TYPES = [ENDUSER, AGENT, CHATBOT];

    export default class CustomTextMessageBubble extends LightningElement {
      /**
       * Deployment configuration data.
       * @type {Object}
       */
      @api configuration;

      /**
       * Conversation entry data.
       * @type {Object}
       */
      @api conversationEntry;

      /**
       * Returns the sender of this conversation entry.
       * @returns {string}
       */
      get sender() {
        return this.conversationEntry.sender && this.conversationEntry.sender.role;
      }

      /**
       * Returns the text content of the conversation entry.
       * @returns {string}
       */
      get textContent() {
        try {
          const entryPayload = JSON.parse(this.conversationEntry.entryPayload);
          if (
            entryPayload.abstractMessage &&
            entryPayload.abstractMessage.staticContent
          ) {
            const text = entryPayload.abstractMessage.staticContent.text;
            return text.replace(
              // innerText or textContent
              /(?:(?: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,
              function (imgUrl) {
                // Only switch out to specific shortened urls if the agent is the user.
                if (this.sender === AGENT) {
                  // If the url is a specific link, then return a custom shortened link.
                  if (
                    imgUrl === "https://www.test.com/specificLink" ||
                    imgUrl === "https://www.test.com/anotherSpecificLink"
                  ) {
                    return `<a target="_blank" href="${imgUrl}">View Link</a>`;
                  }
                  // Otherwise just shorten to a generic link "View Article".
                  return `<a target="_blank" href="${imgUrl}">View Article</a>`;
                }
                return imgUrl;
              }.bind(this),
            );
          }
          return "";
        } catch (e) {
          console.error(e);
        }
      }

      /**
       * Returns the class name of the message bubble.
       * @returns {string}
       */
      get generateMessageBubbleClassname() {
        if (this.isSupportedSender()) {
          return `${MESSAGE_CONTENT_CLASS} ${this.sender}`;
        } else {
          throw new Error(`Unsupported participant type passed in: ${this.sender}`);
        }
      }

      /**
       * True if the sender is a support participant type.
       * @returns {Boolean}
       */
      isSupportedSender() {
        return PARTICIPANT_TYPES.some(
          (participantType) => this.sender === participantType,
        );
      }
    }
```

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

   ```css
:host {
      display: block;
    }

    .Agent,
    .Chatbot {
      color: #FFFFFF;
      background-color: #066AFE;
      border-radius: 10px 10px 10px 0;
      float: left;
      padding: 0.5em;
    }

    .EndUser {
      background-color: #EEF4FF;
      color: black;
      margin-left: auto;
      padding: 0.5em;
      border-radius: 10px 10px 0 10px;
    }

    lightning-formatted-text {
      font-size: 0.875em;
    }
```

6. Deploy the LWC to your org.
   See [_Salesforce Developer Guide_: Introducing Lightning Web Components](https://developer.salesforce.com/docs/component-library/documentation/en/lwc).

7. Add the LWC to your Embedded Service Deployment.
   See [_Salesforce Help_: Customize Your UI with Lightning Web Components](https://help.salesforce.com/s/articleView?id=service.messaging_lightning_web_components.htm). To get custom LWC configuration details, see [_Salesforce Developer Guide_: Get Custom Lightning Web Components Configuration Details](https://developer.salesforce.com/docs/service/messaging-web/references/m4w-reference/customComponents.html).