Sticker Bubble - CometChat Docs

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

​Overview

​Usage

​Props

​message

​alignment

​className

​CSS Selectors

​Next Steps

Stickers Plugin

Enable Stickers (Dashboard)

Poll Bubble

Message Bubble

Theming

Overview

Usage

Props

message

alignment

className

CSS Selectors

Next Steps