Skip to main content
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.

​
Properities

MethodsParametersDescription
messageCard MessageAn instance of the CardMessage class which holds information about the card, such as image URL, text, and action buttons.
style?CardBubbleStyleInterfaceAn instance of the CardBubbleStyle class for customizing the appearance of the card bubble.
onSubmitClick?(formData: any) => voidA function that will be called when the action button of the card is clicked. This function receives the payload of the clicked action as an argument.

​
CardBubbleStyle

CardBubbleStyle is a class containing attributes to customize the appearance of the card in the CometChatCardBubble component.
MethodsTypeDescription
backgroundColorstringUsed to set the background color of the card bubble.
borderRadiusnumberUsed to set the border radius of the card bubble.
textFontFontStyleUsed to set the font style of the title. The object should include fontFamily, fontSize, and fontWeight.
textColorstringUsed to set the color of the title.
paddingnumberUsed to set the padding of the card bubble.
buttonStyleButtonStyleInterfaceUsed to customize the style of buttons.
imageStyleImageBubbleStyleInterfaceUsed to customize the style of the image in the card.
imageResizeMode”cover” | “contain” | “stretch” | “repeat” | “center”Used to set how to resize the image in the card.

​
Usage

  • TypeScript
<CometChatCardBubble
  message={message} //message: CardMessage
  onSubmitClick={onSubmitClick} //onSubmitClick?: (data: any) => void
  style={style} //style?: CardBubbleStyle
/>