Sticker Bubble

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

AI Integration Quick Reference

Field	Value
Component	CometChatStickerBubble
Package	@cometchat/chat-uikit-react
Import	import { CometChatStickerBubble } from "@cometchat/chat-uikit-react";
CSS root class	.cometchat-sticker-bubble
Primary output	None — renders from the SDK message
Prerequisites	App wrapped in CometChatProvider with valid credentials + a logged-in user; plus the Stickers extension enabled in the Dashboard
Stitching	None — self-extracting from the SDK message
Full props	See Props

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.

Requires the Stickers extension enabled in the CometChat Dashboard. Sticker messages (extension_sticker) are only produced once the Stickers extension is turned on and sticker sets are configured for your app. Without it the composer’s sticker keyboard is unavailable and this bubble never renders. See the Stickers guide to enable it, and the Plugins overview for how the UI Kit auto-routes sticker messages to this bubble.

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

Enable Stickers (Dashboard)

Turn on the Stickers extension that produces these messages

Poll Bubble

Render poll messages

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing