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

# Card Message

> Card Message — CometChat documentation.

The `CardMessage` class is used to create a card message for CometChat. It extends the `InteractiveMessage` class from CometChat.

### Constructor

| Name         | Type          | Description                                                  |
| ------------ | ------------- | ------------------------------------------------------------ |
| receiverId   | string        | The ID of the receiver                                       |
| receiverType | string        | The type of the receiver                                     |
| text         | string        | The text to be displayed on the card                         |
| cardActions  | ButtonElement | The actions to be performed when the card is interacted with |

### Class Usage

How to create an instance of the `CardMessage` class:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // Create instance of ButtonElement for card actions

    let cardAction = new ButtonElement(
      "1",
      new APIAction("https://example.com/api", "POST"),
      "Click Me"
    );

    // Create a new instance of CardMessage

    let cardMessage = new CardMessage(
      "receiverId",
      CometChat.RECEIVER_TYPE.USER,
      "This is a card",
      [cardAction]
    );
    ```
  </Tab>
</Tabs>

### Key Properties and Methods

#### Image Url

The `setImageUrl()` method allows to set the image URL for the card.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let cardMessage = new CardMessage(
      "receiverId",
      CometChat.RECEIVER_TYPE.USER,
      "This is a card",
      [cardAction]
    );

    cardMessage.setImageUrl("https://example.com/image.png");
    ```
  </Tab>
</Tabs>

### Example

Below is an example that showcases the creation and manipulation of an instance of `CardMessage`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // Create an instance of APIAction

    let apiAction = new APIAction("https://example.com/api", "POST");

    // Create instance of ButtonElement for card actions

    let cardAction = new ButtonElement("1", apiAction, "Click Me");

    // Create a new instance of CardMessage

    let cardMessage = new CardMessage(
      "receiverId",
      CometChat.RECEIVER_TYPE.USER,
      "customType",
      "This is a card",
      [cardAction]
    );

    cardMessage.setImageUrl("https://example.com/image.png");
    ```
  </Tab>
</Tabs>

In this example, a new instance of CardMessage is created. The text, card actions and image URL are retrieved, updated, and retrieved again. Then a new CardMessage instance is made from a JSON object, and the text is retrieved and logged.