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

# Card Bubble

> Card Bubble — CometChat documentation.

The `CometChatCardBubble` component is used to display a card within a chat bubble. The card includes an image, text, and action buttons. It helps to offer action-oriented chat experiences, like booking a flight, ordering food, scheduling a meeting, etc., directly in the chat.

## Methods

| Methods        | Parameters      | Description                                                                                                                |
| -------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------- |
| setCardMessage | CardMessage     | An instance of the `CardMessage` class which holds information about the card such as image URL, text, and action buttons. |
| setStyle       | CardBubbleStyle | An instance of the `CardBubbleStyle` class for customizing the appearance of the card bubble.                              |

## CardBubbleStyle

`CardBubbleStyle` is a class containing attributes to customize the appearance of the card in the `CometChatCardBubble` component.

| Methods                   | Type             | Description                                          |
| ------------------------- | ---------------- | ---------------------------------------------------- |
| setBackground             | UIColor          | Used to set the background color of the card bubble. |
| setCornerRadius           | CGFloat          | Used to set the corner radius of the card bubble.    |
| setBorderWidth            | Int              | Used to set the Border width                         |
| setBorderColor            | UIColor          | Used to set the Border color                         |
| setTextColor              | UIColor          | Used to set the color of the title.                  |
| setButtonBackgroundColor  | UIColor          | Used to customize the style of buttons.              |
| setButtonTextColor        | UIColor          | Used to set Button text color.                       |
| setContentBackgroundColor | UIColor          | Used to set Content background color                 |
| setButtonSeparatorColor   | UIColor          | Used to set Button separator color                   |
| setProgressBarTintColor   | UIColor          | Used to set the color of the image in the card.      |
| setQuickViewStyle         | QuickViewStyle   | Used to set the QuickView style                      |
| setImageBubbleStyle       | ImageBubbleStyle | Used to set how to resize the image in the card.     |

## Usage

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let cardBubble = CometChatCardBubble()
    if let controller = controller {
        cardBubble.set(controller: controller)
    }
    if let message = message {
        cardBubble.set(cardMessage: message)
    }
    ```
  </Tab>
</Tabs>