Poll Bubble - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatPollBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatPollBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting poll bubble. Derives the question, options, vote counts, totals, and the logged-in user's vote from the message metadata.",
  "cssRootClass": ".cometchat-poll-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.CustomMessage", "required": true, "note": "Contains poll data in its metadata; drives all extraction." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "disableInteraction": { "type": "boolean", "default": false },
      "onVoteSubmit": { "type": "(event: CometChatPollVoteEvent) => void" },
      "onVoteError": { "type": "(event: CometChatPollVoteErrorEvent) => void" },
      "className": { "type": "string" }
    }
  }
}

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.

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

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

Sticker Bubble

Message Bubble

Theming

Overview

Usage

Props

message

alignment

disableInteraction

onVoteSubmit

onVoteError

className

CSS Selectors

Next Steps