Poll Bubble - CometChat Docs

AI Integration Quick Reference

Field	Value
Component	`CometChatPollBubble`
Package	`@cometchat/chat-uikit-react`
Import	`import { CometChatPollBubble } from "@cometchat/chat-uikit-react";`
CSS root class	`.cometchat-poll-bubble`
Primary output	`onVoteSubmit: (event: CometChatPollVoteEvent) => void` — emits the submitted vote
Prerequisites	App wrapped in `CometChatProvider` with valid credentials + a logged-in user; plus the Polls extension enabled in the Dashboard
Stitching	None — self-extracting from the SDK message
Full props	See Props

Overview

CometChatPollBubble renders a poll. It is self-extracting: pass the SDK custom message and the bubble derives the question, options, per-option vote counts, total votes, and the logged-in user’s selected option entirely from the message metadata. Selecting an option submits a vote; the bar fills and counts/avatars update.

Requires the Polls extension enabled in the CometChat Dashboard. Poll messages (extension_poll) are only produced once the Polls extension is turned on for your app. Without it the composer cannot send polls and this bubble never renders. See the Polls guide to enable it, and the Plugins overview for how the UI Kit auto-routes poll messages to this bubble.

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

Usage

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

function PollMessage({ message }: { message: CometChat.CustomMessage }) {
  return (
    <CometChatPollBubble
      message={message}
      onVoteSubmit={(e) => console.log("Voted:", e.optionText)}
    />
  );
}

Props

message

The custom message containing poll data in its metadata. Drives all extraction. Required.


Type	`CometChat.CustomMessage`
Required	Yes

alignment

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


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

disableInteraction

Disable all interaction (e.g. for a thread header preview).


Type	`boolean`
Default	`false`

onVoteSubmit

Callback when a vote is submitted successfully.


Type	`(event: CometChatPollVoteEvent) => void`
Default	`undefined`

onVoteError

Callback when a vote submission fails.


Type	`(event: CometChatPollVoteErrorEvent) => void`
Default	`undefined`

className

Additional CSS class applied to the root element.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
Root	`.cometchat-poll-bubble`
Incoming / outgoing	`.cometchat-poll-bubble--incoming` / `.cometchat-poll-bubble--outgoing`
Option	`.cometchat-poll-bubble__option`
Option text	`.cometchat-poll-bubble__option-text`
Option count	`.cometchat-poll-bubble__option-count`
Option progress bar	`.cometchat-poll-bubble__option-progress-bar`
Option radio	`.cometchat-poll-bubble__option-radio`
Voter avatars	`.cometchat-poll-bubble__option-avatars`

Next Steps

Polls Plugin

Plugin behavior, context menu, and conversation preview

Enable Polls (Dashboard)

Turn on the Polls extension that produces these messages

Sticker Bubble

Render sticker messages

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing

​Overview

​Usage

​Props

​message

​alignment

​disableInteraction

​onVoteSubmit

​onVoteError

​className

​CSS Selectors

​Next Steps

Polls Plugin

Enable Polls (Dashboard)

Sticker Bubble

Message Bubble

Theming

Overview

Usage

Props

message

alignment

disableInteraction

onVoteSubmit

onVoteError

className

CSS Selectors

Next Steps