> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-ios-per-entity-link-colors.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Bubble Styling

> Customize CometChat iOS UI Kit message bubbles with incoming and outgoing styles, borders, corner radius, per-message-type styling, and link, phone number and email colors.

<Accordion title="AI Integration Quick Reference">
  | Field             | Value                                                                                                                                                                                        |
  | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Platform          | iOS UI Kit                                                                                                                                                                                   |
  | Incoming Style    | `CometChatMessageBubble.style.incoming`                                                                                                                                                      |
  | Outgoing Style    | `CometChatMessageBubble.style.outgoing`                                                                                                                                                      |
  | Global Properties | `backgroundColor`, `borderWidth`, `borderColor`, `cornerRadius`                                                                                                                              |
  | Bubble Types      | `textBubbleStyle`, `imageBubbleStyle`, `videoBubbleStyle`, `audioBubbleStyle`, `fileBubbleStyle`, `pollBubbleStyle`, `linkPreviewBubbleStyle`, `deleteBubbleStyle`, `aiAssistantBubbleStyle` |
  | Action Bubble     | `CometChatMessageBubble.actionBubbleStyle`                                                                                                                                                   |
  | Link Colors       | `textLinkColor`, `textPhoneNumberColor`, `textEmailColor` on `textBubbleStyle` and `linkPreviewBubbleStyle`                                                                                  |
</Accordion>

## Overview

The MessageBubble styling API allows developers to customize the appearance of incoming and outgoing message bubbles globally or at the component level. This includes various message types such as text, image, video, audio, file, and document bubbles.

There are two primary classes for styling message bubbles:

* **CometChat Incoming Message Bubble Style**
* **CometChat Outgoing Message Bubble Style**

Both classes provide properties for customizing background color, border, corner radius, and specific styles for individual message types.

***

## Properties

### Global Styling (Static Variables)

| Property               | Description                                 |
| ---------------------- | ------------------------------------------- |
| **backgroundColor**    | The background color for message bubbles    |
| **backgroundDrawable** | A background image for message bubbles      |
| **borderWidth**        | The width of the border for message bubbles |
| **borderColor**        | The color of the border for message bubbles |
| **cornerRadius**       | The corner radius for message bubbles       |

### Specific Message Type Styles

| Property                | Description                        |
| ----------------------- | ---------------------------------- |
| **textBubbleStyle**     | Style for text message bubbles     |
| **imageBubbleStyle**    | Style for image message bubbles    |
| **videoBubbleStyle**    | Style for video message bubbles    |
| **audioBubbleStyle**    | Style for audio message bubbles    |
| **fileBubbleStyle**     | Style for file message bubbles     |
| **documentBubbleStyle** | Style for document message bubbles |

***

## Customization Examples

### Customizing Incoming Message Bubble

The following code snippet shows how to customize the incoming message bubble style:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize incoming message bubble appearance
    CometChatMessageBubble.style.incoming.backgroundColor = UIColor(hexString: "#F76808")
    CometChatMessageBubble.style.incoming.borderWidth = 2
    CometChatMessageBubble.style.incoming.borderColor = UIColor.black
    ```
  </Tab>
</Tabs>

### Customizing Outgoing Message Bubble

The following code snippet shows how to customize the outgoing message bubble style:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize outgoing message bubble appearance
    CometChatMessageBubble.style.outgoing.backgroundColor = UIColor(hexString: "#F76808")
    CometChatMessageBubble.style.outgoing.borderWidth = 2
    CometChatMessageBubble.style.outgoing.borderColor = UIColor.black
    ```
  </Tab>
</Tabs>

***

## Text Bubble

Text bubbles display plain text messages, which are the most common message type.

The following code snippet shows how to customize the text message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize text bubble for incoming messages
    CometChatMessageBubble.style.incoming.textBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")

    // Customize text bubble for outgoing messages
    CometChatMessageBubble.style.outgoing.textBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/Sq9YnOvD08eQArzc/images/c6450e91-wMz744vX0SPYAAAAABJRU5ErkJggg.png?fit=max&auto=format&n=Sq9YnOvD08eQArzc&q=85&s=c59fab2e5f34d66913c0c137b4ccfd04" width="600" height="198" data-path="images/c6450e91-wMz744vX0SPYAAAAABJRU5ErkJggg.png" />
</Frame>

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/Rqqh4Zi8fMCZVsqe/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=Rqqh4Zi8fMCZVsqe&q=85&s=901769a0cb65353e45099167f8f2f79b" width="600" height="198" data-path="images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### Link, Phone Number and Email Colors

Text bubbles automatically detect URLs, phone numbers and email addresses and render them as tappable links. Each entity type has its own color property, so links can be styled independently of phone numbers and emails.

| Property               | Type       | Applies to                                      |
| ---------------------- | ---------- | ----------------------------------------------- |
| `textLinkColor`        | `UIColor?` | Detected URLs and markdown links                |
| `textPhoneNumberColor` | `UIColor?` | Detected phone numbers                          |
| `textEmailColor`       | `UIColor?` | Detected email addresses                        |
| `textHighlightColor`   | `UIColor`  | Fallback for all three when they are left unset |

All three properties are optional. When one is `nil`, that entity falls back to `textHighlightColor`, which resolves to the theme's info color for incoming bubbles and white for outgoing bubbles — the default appearance. Underlines follow the resolved text color automatically.

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Global — set before any message list is created
    CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
    CometChatMessageBubble.style.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
    CometChatMessageBubble.style.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

    CometChatMessageBubble.style.outgoing.textBubbleStyle.textLinkColor = UIColor(hex: "#FFF9F5")
    ```
  </Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    var bubbleStyle = CometChatMessageBubble.style

    bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
    bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
    bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

    messageList.messageBubbleStyle = bubbleStyle
    ```
  </Tab>
</Tabs>

<Note>
  Messages that render a [Link Preview Bubble](#link-preview-bubble) inherit these three colors from `textBubbleStyle`, so setting them once covers both plain text messages and messages with a preview card. Set them on `linkPreviewBubbleStyle` only when preview messages need different colors — see [Link Colors in the Preview Bubble](#link-colors-in-the-preview-bubble).
</Note>

***

## Image Bubble

Image bubbles display messages with images.

The following code snippet shows how to customize the image message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize image bubble for incoming messages
    CometChatMessageBubble.style.incoming.imageBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")

    // Customize image bubble for outgoing messages
    CometChatMessageBubble.style.outgoing.imageBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/gIYWdLy1oLUmCoqs/images/6ab961bb-image_bubble_default-b8bf23f5b33c822970c4406e84033a28.png?fit=max&auto=format&n=gIYWdLy1oLUmCoqs&q=85&s=363a2a6b2aadbb4aba478b6f46cad4fc" width="600" height="696" data-path="images/6ab961bb-image_bubble_default-b8bf23f5b33c822970c4406e84033a28.png" />
</Frame>

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/debIOSgRgAqO5N_i/images/0142ad15-image_bubble_style-ec93facaf1e770da88edab989870f404.png?fit=max&auto=format&n=debIOSgRgAqO5N_i&q=85&s=79f27e218e04fed5a9ecbea64c6e9d58" width="600" height="696" data-path="images/0142ad15-image_bubble_style-ec93facaf1e770da88edab989870f404.png" />
</Frame>

***

## Video Bubble

Video bubbles display messages with video clips.

The following code snippet shows how to customize the video message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize video bubble for incoming messages
    CometChatMessageBubble.style.incoming.videoBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
    CometChatMessageBubble.style.incoming.videoBubbleStyle.playButtonTint = UIColor(hexString: "#F76808")

    // Customize video bubble for outgoing messages
    CometChatMessageBubble.style.outgoing.deleteBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
    CometChatMessageBubble.style.outgoing.videoBubbleStyle.playButtonTint = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/iA6nIPgiAsWNTE3w/images/2ddc55f3-video_bubble_default-802ce2f4539acfd1a9874646228aecc5.png?fit=max&auto=format&n=iA6nIPgiAsWNTE3w&q=85&s=0886511c9185ed618d42ee56a0ec3033" width="600" height="508" data-path="images/2ddc55f3-video_bubble_default-802ce2f4539acfd1a9874646228aecc5.png" />
</Frame>

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/4FOKyG0Xo3cun020/images/5c1f63aa-video_bubble_style-17dcea3ad41de405d7ff1f44287c7310.png?fit=max&auto=format&n=4FOKyG0Xo3cun020&q=85&s=bf6576c0795180fce94763ee075b1d13" width="600" height="508" data-path="images/5c1f63aa-video_bubble_style-17dcea3ad41de405d7ff1f44287c7310.png" />
</Frame>

***

## Audio Bubble

Audio bubbles display audio messages.

The following code snippet shows how to customize the audio message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize audio bubble for incoming messages
    CometChatMessageBubble.style.incoming.audioBubbleStyle.audioWaveFormTintColor = UIColor(hexString: "#F76808")
    CometChatMessageBubble.style.incoming.audioBubbleStyle.playImageTintColor = UIColor(hexString: "#F76808")
    CometChatMessageBubble.style.incoming.audioBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")

    // Customize audio bubble for outgoing messages
    CometChatMessageBubble.style.outgoing.audioBubbleStyle.playImageTintColor = UIColor(hexString: "#F76808")
    CometChatMessageBubble.style.outgoing.audioBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/RWY548NHmY3_-J6j/images/ce95a207-audio_bubble_default-064a425c69bc5d1d6fc838e58832bd68.png?fit=max&auto=format&n=RWY548NHmY3_-J6j&q=85&s=e68807450e47c49a33684f8ebe9526a3" width="600" height="320" data-path="images/ce95a207-audio_bubble_default-064a425c69bc5d1d6fc838e58832bd68.png" />
</Frame>

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/QRRTd5DSSlMcWxkw/images/89ee34eb-audio_bubble_style-0f06f06eb50d3c50004cabcf6b310a79.png?fit=max&auto=format&n=QRRTd5DSSlMcWxkw&q=85&s=27c59a67d17ac6b7ba8f780c027a2e97" width="600" height="320" data-path="images/89ee34eb-audio_bubble_style-0f06f06eb50d3c50004cabcf6b310a79.png" />
</Frame>

***

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/smJtjjHq3E8OEhVW/images/ios_imagesbubble.png?fit=max&auto=format&n=smJtjjHq3E8OEhVW&q=85&s=b18cbc796853ea7d0b42f970f9f4616b" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" width="1200" height="1392" data-path="images/ios_imagesbubble.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/smJtjjHq3E8OEhVW/images/ios_videosbubble.png?fit=max&auto=format&n=smJtjjHq3E8OEhVW&q=85&s=dca17b22d94c8329349f155962a79ef6" alt="Media grid bubbles rendering multiple video attachments with play badges on each tile and a +3 overflow badge on the last tile, shown for both incoming and outgoing messages" width="1200" height="1384" data-path="images/ios_videosbubble.png" />
</Frame>

Grid layout and colors come from `GalleryBubbleStyle`:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    var style = GalleryBubbleStyle()
    style.gridSpacing = 4
    style.tileCornerRadius = 8
    style.overflowOverlayColor = UIColor.black.withAlphaComponent(0.6)
    style.playIconTint = .white
    ```
  </Tab>
</Tabs>

Key `GalleryBubbleStyle` properties for the grid:

| Property                                   | Type                 | Description                                                                                                                                         |
| ------------------------------------------ | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `bubbleWidth`                              | `CGFloat`            | Content width of the media grid — screen-relative (≈62% of screen width, clamped 210–300) so the bubble keeps its proportion across iPhone and iPad |
| `gridSpacing`                              | `CGFloat`            | Gap between tiles                                                                                                                                   |
| `containerCornerRadius`                    | `CGFloat`            | Corner radius of the whole grid container                                                                                                           |
| `tileCornerRadius`                         | `CGFloat`            | Corner radius of each media tile                                                                                                                    |
| `singleAspectRatio`                        | `CGFloat`            | Height/width ratio when a single item is shown full width                                                                                           |
| `placeholderColor`                         | `UIColor`            | Shown while a tile's media loads                                                                                                                    |
| `overflowOverlayColor`                     | `UIColor`            | Dark scrim over the last tile when items overflow                                                                                                   |
| `overflowTextColor` / `overflowTextFont`   | `UIColor` / `UIFont` | The "+N" overflow label                                                                                                                             |
| `playIconTint` / `playIconBackgroundColor` | `UIColor`            | The play badge on video tiles                                                                                                                       |

***

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/smJtjjHq3E8OEhVW/images/ios_audiobubble.png?fit=max&auto=format&n=smJtjjHq3E8OEhVW&q=85&s=02fc6c27b577b056d9206adb817f3145" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" width="1200" height="1520" data-path="images/ios_audiobubble.png" />
</Frame>

<Note>
  This bubble is distinct from the [Audio Bubble](#audio-bubble) above, which renders **voice notes** recorded with the composer's microphone. Voice notes keep their waveform look and are never grouped with other attachments.
</Note>

Audio rows share the caption and section styling of `GalleryBubbleStyle` (`sectionSpacing`, `captionFont`, `captionColor`), and flip their colors automatically on outgoing bubbles.

***

## Files Bubble

Files bubbles render messages carrying **document attachments** as a connected stack of file cards — each with a file-type icon (PDF, Word, Excel, PowerPoint, ZIP, …), the file name, and its metadata. Four or more files collapse behind a "+N more" toggle. Tapping a card opens the file: a downloaded copy previews in-app, otherwise the file is offered through the share sheet.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/smJtjjHq3E8OEhVW/images/ios_filesbubble.png?fit=max&auto=format&n=smJtjjHq3E8OEhVW&q=85&s=75916ea5e5eaf7fb1dcbb580fb514fe1" alt="Files bubble showing a connected stack of document cards, each with a file-type icon, name, size and download control, plus a Show 2 more toggle, shown for both incoming and outgoing messages" width="1200" height="1240" data-path="images/ios_filesbubble.png" />
</Frame>

File card styling comes from `GalleryBubbleStyle`:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    var style = GalleryBubbleStyle()
    style.fileCardBackgroundColor = UIColor(hexString: "#FEEDE1")
    style.fileNameFont = .systemFont(ofSize: 15, weight: .semibold)
    style.expandButtonColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

Key `GalleryBubbleStyle` properties for file cards and the shared caption row:

| Property                                 | Type                 | Description                                                       |
| ---------------------------------------- | -------------------- | ----------------------------------------------------------------- |
| `fileCardBackgroundColor`                | `UIColor`            | Background of each file card                                      |
| `fileCardSpacing`                        | `CGFloat`            | Gap between cards in the stack                                    |
| `fileIconTint`                           | `UIColor`            | Tint of the file-type icon                                        |
| `fileNameFont` / `fileNameColor`         | `UIFont` / `UIColor` | File name text                                                    |
| `fileMetaFont` / `fileMetaColor`         | `UIFont` / `UIColor` | File size/type metadata text                                      |
| `expandButtonFont` / `expandButtonColor` | `UIFont` / `UIColor` | The "+N more" / "Show less" toggle                                |
| `sectionSpacing`                         | `CGFloat`            | Vertical spacing between media, audio, files and caption sections |
| `captionFont` / `captionColor`           | `UIFont` / `UIColor` | The shared caption row under the attachments                      |
| `captionDividerColor`                    | `UIColor`            | The divider line above the caption                                |

<Note>
  Captions containing rich text (code blocks, quote blocks, inline code) render through the same pipeline as [Text Bubbles](#text-bubble), so their formatting looks identical across message types.
</Note>

***

## Poll Bubble

Poll bubbles display messages with polling options.

The following code snippet shows how to customize the poll message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize poll bubble for incoming messages
    CometChatMessageBubble.style.incoming.pollBubbleStyle.optionProgressTintColor = UIColor(hexString: "#F76808")
    CometChatMessageBubble.style.incoming.pollBubbleStyle.selectedPollImageTint = UIColor(hexString: "#F76808")
    CometChatMessageBubble.style.incoming.pollBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")

    // Customize poll bubble for outgoing messages
    CometChatMessageBubble.style.outgoing.pollBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/1VBmW-ZPDUnlpCDu/images/9ca30347-poll_bubble_default-ed3d0e2eec56286b6b944df6d8b2c9fc.png?fit=max&auto=format&n=1VBmW-ZPDUnlpCDu&q=85&s=18a4d03c6ceccbe1c8b87d2aab29b218" width="600" height="706" data-path="images/9ca30347-poll_bubble_default-ed3d0e2eec56286b6b944df6d8b2c9fc.png" />
</Frame>

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/gIYWdLy1oLUmCoqs/images/66eccf81-poll_bubble_style-f1d67fdb83c780340642b9e3b8181468.png?fit=max&auto=format&n=gIYWdLy1oLUmCoqs&q=85&s=03e6e4d0a95831a9022d8b5bef2cd6d8" width="600" height="706" data-path="images/66eccf81-poll_bubble_style-f1d67fdb83c780340642b9e3b8181468.png" />
</Frame>

***

## Link Preview Bubble

The Link Preview Bubble displays a preview of links shared in messages. It enriches the messaging experience by showing details such as the page title, description, and an image from the linked content, making links more engaging and informative.

The following code snippet shows how to customize the link preview message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize link preview bubble for incoming messages
    CometChatMessageBubble.style.incoming.linkPreviewBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")

    // Customize link preview bubble for outgoing messages
    CometChatMessageBubble.style.outgoing.linkPreviewBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/1VBmW-ZPDUnlpCDu/images/9f0430e3-link_bubble_default-829d740912ff67a49ecef68209afa36a.png?fit=max&auto=format&n=1VBmW-ZPDUnlpCDu&q=85&s=a878aa22149b5333c339be0a6bdfd6e3" width="600" height="918" data-path="images/9f0430e3-link_bubble_default-829d740912ff67a49ecef68209afa36a.png" />
</Frame>

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/5F4UhSYAv8VfA84k/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png?fit=max&auto=format&n=5F4UhSYAv8VfA84k&q=85&s=c62327defdaf50e33724de49b0268f26" width="600" height="918" data-path="images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### Link Colors in the Preview Bubble

`LinkPreviewBubbleStyle` exposes the same three entity color properties as [Text Bubble](#link-phone-number-and-email-colors), so the message text inside a preview bubble can be colored the same way.

These colors are inherited from `textBubbleStyle` automatically. Assigning them on the text bubble style applies them to preview bubbles too, so plain text messages and preview messages match without configuring both:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Applies to text bubbles AND to messages that render a link preview
    CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
    ```
  </Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    var bubbleStyle = CometChatMessageBubble.style

    bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
    // Preview messages use teal instead of the inherited orange
    bubbleStyle.incoming.linkPreviewBubbleStyle.textLinkColor = UIColor(hex: "#0B7B69")

    messageList.messageBubbleStyle = bubbleStyle
    ```
  </Tab>
</Tabs>

<Note>
  Inheritance runs each time `textBubbleStyle` is written and only fills colors still unset on `linkPreviewBubbleStyle`. Once a preview color is set explicitly it is never overwritten, so later changes to the text bubble's link colors will not reach it.
</Note>

#### Preview card labels

The properties above color the tappable link inside the message text. The preview card's own labels are separate and unaffected:

| Property            | Type      | Applies to                                           | Android equivalent                               |
| ------------------- | --------- | ---------------------------------------------------- | ------------------------------------------------ |
| `titleTextColor`    | `UIColor` | Card title                                           | `cometchatTextBubbleLinkPreviewTitleColor`       |
| `subtitleTextColor` | `UIColor` | Card description                                     | `cometchatTextBubbleLinkPreviewDescriptionColor` |
| `linkTextColor`     | `UIColor` | URL caption beneath the card — not the tappable link | `cometchatTextBubbleLinkPreviewLinkColor`        |

<Note>
  `linkTextColor` and `textLinkColor` are easy to confuse. `linkTextColor` styles the static URL caption printed under the preview card; `textLinkColor` styles the tappable link in the message text.
</Note>

***

## Action Bubble

Action bubbles provide a customizable interface for displaying a variety of actions, such as group actions, within a chat.

The following code snippet shows how to customize the action message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize action bubble appearance
    CometChatMessageBubble.actionBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
    CometChatMessageBubble.actionBubbleStyle.bubbleTextColor = UIColor(hexString: "#F76808")
    CometChatMessageBubble.actionBubbleStyle.borderColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/gIYWdLy1oLUmCoqs/images/691bff05-J0foAAAAASUVORK5CYII.png?fit=max&auto=format&n=gIYWdLy1oLUmCoqs&q=85&s=335ad4a0beadbabae8b3b4fd78958131" width="600" height="238" data-path="images/691bff05-J0foAAAAASUVORK5CYII.png" />
</Frame>

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/LTU0KUOt9JLWRY1S/images/58253a0a-QIdveaFpdAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=LTU0KUOt9JLWRY1S&q=85&s=f97e1bc5ce426d68a0eb8eb7aff8278f" width="600" height="238" data-path="images/58253a0a-QIdveaFpdAAAAAElFTkSuQmCC.png" />
</Frame>

***

## Delete Bubble

Delete bubbles display messages that have been deleted by the sender. These indicate the message removal within the chat interface.

The following code snippet shows how to customize the delete message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize delete bubble for incoming messages
    CometChatMessageBubble.style.incoming.deleteBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")

    // Customize delete bubble for outgoing messages
    CometChatMessageBubble.style.outgoing.deleteBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/yZq99y1C2dHXlzGe/images/856c509c-QEXxv1GpEWvXgAAAABJRU5ErkJggg.png?fit=max&auto=format&n=yZq99y1C2dHXlzGe&q=85&s=8fcbb53cf28db962392c51eac9d16f5c" width="600" height="198" data-path="images/856c509c-QEXxv1GpEWvXgAAAABJRU5ErkJggg.png" />
</Frame>

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-per-entity-link-colors/CMqru6nyF-urMZcE/images/e1714523-f767O9MAoLntcG84t3IpBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYP8PV4qoNg55LO0AAAAASUVORK5CYII.png?fit=max&auto=format&n=CMqru6nyF-urMZcE&q=85&s=71d10e73bc287b2278774f8c2f09f2b7" width="600" height="198" data-path="images/e1714523-f767O9MAoLntcG84t3IpBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYP8PV4qoNg55LO0AAAAASUVORK5CYII.png" />
</Frame>

***

## AI Assistant Bubble

The AI Assistant Bubble displays responses or messages sent by the AI assistant within the chat interface. These bubbles are designed to visually distinguish AI-generated messages from user messages, maintaining a clear and intuitive conversation flow.

You can customize the appearance of the AI Assistant message bubble to match your app's theme — including background color, text color, font, and border styling.

The following code snippet shows how to customize the AI Assistant message bubble:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    // Customize AI assistant bubble for incoming messages
    CometChatMessageBubble.style.incoming.aiAssistantBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")

    // Customize AI assistant bubble for outgoing messages
    CometChatMessageBubble.style.outgoing.aiAssistantBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
    ```
  </Tab>
</Tabs>

***

## Next Steps

<CardGroup cols={3}>
  <Card title="Message List" href="/ui-kit/ios/message-list">
    Display and customize the message list component
  </Card>

  <Card title="Message Composer" href="/ui-kit/ios/message-composer">
    Customize the message input component
  </Card>

  <Card title="Component Styling" href="/ui-kit/ios/component-styling">
    Learn about global styling options
  </Card>
</CardGroup>