Sticker Bubble - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatStickerBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatStickerBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting sticker bubble. Extracts the sticker image URL and name from the message metadata.",
  "cssRootClass": ".cometchat-sticker-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.CustomMessage", "required": true, "note": "The sticker custom message; drives extraction of the image URL and name." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatStickerBubble renders a sticker. It is self-extracting: pass the SDK custom message and the bubble extracts the sticker image URL and name from its metadata, so it works standalone.

Live Preview — interact with the sticker bubble.Open in Storybook ↗

Usage

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatStickerBubble } from "@cometchat/chat-uikit-react";

function StickerMessage({ message }: { message: CometChat.CustomMessage }) {
  return <CometChatStickerBubble message={message} />;
}

Props

message

The sticker custom message. The bubble extracts the image URL and name from its metadata. Required.


Type	`CometChat.CustomMessage`
Required	Yes

alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.


Type	`"left" \| "right"`
Default	derived

className

Additional CSS class applied to the root element.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
Root	`.cometchat-sticker-bubble`
Incoming / outgoing	`.cometchat-sticker-bubble--incoming` / `.cometchat-sticker-bubble--outgoing`
Sticker image	`.cometchat-sticker-bubble__image`

Next Steps

Stickers Plugin

Plugin behavior, keyboard, and conversation preview

Poll Bubble

Render poll messages

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing

Poll Bubble

Collaborative Document Bubble

​Overview

​Usage

​Props

​message

​alignment

​className

​CSS Selectors

​Next Steps

Stickers Plugin

Poll Bubble

Message Bubble

Theming

Overview

Usage

Props

message

alignment

className

CSS Selectors

Next Steps