Sticker Bubble

A self-extracting bubble that renders a sticker image from a sticker custom message.

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