Sticker Bubble

Renders sticker messages as images with incoming/outgoing alignment variants and lazy loading.

AI Integration Quick Reference

{
  "component": "CometChatStickerBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatStickerBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Renders sticker messages as images with alignment variants.",
  "cssRootClass": ".cometchat-sticker-bubble",
  "props": {
    "data": {
      "stickerUrl": { "type": "string", "default": "required" },
      "stickerName": { "type": "string", "default": "'Sticker'" }
    },
    "behavior": {
      "variant": { "type": "'incoming' | 'outgoing'", "default": "required" }
    }
  }
}

Where It Fits

CometChatStickerBubble is rendered by CometChatStickersPlugin inside the message list when a sticker message (extension_sticker type, custom category) is displayed. The plugin extracts the sticker URL using a priority-based fallback chain.

import { CometChatStickerBubble } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function StickerMessage({ stickerUrl, stickerName, isSentByMe }) {
  return (
    <CometChatStickerBubble
      stickerUrl={stickerUrl}
      stickerName={stickerName}
      variant={isSentByMe ? "outgoing" : "incoming"}
    />
  );
}

Minimal Render

import { CometChatStickerBubble } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo() {
  return <CometChatStickerBubble stickerUrl="https://example.com/sticker.png" variant="incoming" />;
}

Root CSS class: .cometchat-sticker-bubble

Props

---

stickerUrl

The sticker image URL. Required.

Type	string
Default	—

---

stickerName

Sticker set name, used for alt text and aria-label.

Type	string
Default	'Sticker'

---

variant

Visual variant based on sender/receiver.

Type	'incoming' | 'outgoing'
Default	—

CSS Selectors

Target	Selector
Root	.cometchat-sticker-bubble
Incoming	.cometchat-sticker-bubble--incoming
Outgoing	.cometchat-sticker-bubble--outgoing
Image	.cometchat-sticker-bubble__image