> ## 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 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="Swift">
    ```swift theme={null}
    var elementEntities:[ElementEntity] = [ElementEntity]()
    let urlNavigationAction = "https://www.cometchat.com/"

    let buttonElement = ButtonElement()
    buttonElement.elementId = "idbtn"
    buttonElement.elementType = .button
    buttonElement.action = Action().type;
    buttonElement.setDisableAfterInteracted(true); // button will be disable after interacted
    buttonElement.setText("Learn more");

    elementEntities.append(buttonElement);
    // Create a new instance of CardMessage
    let cardMessage = CardMessage(receiverId, receivertype, "Decorative Text to show on Card", elementEntities);

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

### Send Card Message

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cardMessage.receiverUid = "cometchat-uid-2"
    CometChat.sendInteractiveMessage(message: interMessage, onSuccess: {
              succes in
     }, onError: {
      error in
    );
    ```
  </Tab>
</Tabs>