Create Polls

AI Agent Component Spec

{
  "component": "PollsExtension",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { PollsExtension } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Enables creating and voting on polls in group conversations. Polls appear in the message composer action sheet and render as interactive message bubbles.",
  "dashboardSetup": "Enable Polls in CometChat Dashboard > Extensions > User Engagement",
  "autoIntegration": {
    "messageComposer": "Poll creation button appears in action sheet",
    "messageList": "Poll messages render with voting UI"
  },
  "configuration": {
    "PollsConfiguration": {
      "createPollIcon": "string",
      "createPollIconHoverText": "string"
    }
  }
}

Overview

This guide shows you how to add interactive polls to your chat using CometChat’s Polls extension. Polls let users create questions with multiple options and collect votes from group members. Time estimate: 5 minutes
Difficulty: Beginner

Prerequisites

React.js setup complete
Groups configured
CometChat account with Polls extension access

Steps

Step 1: Enable Polls Extension

Go to your CometChat Dashboard
Navigate to Extensions → User Engagement
Enable Polls

Step 2: Polls Auto-Integration

Once enabled, polls automatically integrate into your chat:

import {
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function GroupChatWithPolls({ group }: { group: CometChat.Group }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CometChatMessageList group={group} />
      <CometChatMessageComposer group={group} />
    </div>
  );
}

export default GroupChatWithPolls;

The poll creation button appears in the message composer’s action sheet (attachment menu).

Step 3: Create a Poll

Users can create polls through the UI:

Click the attachment/action button in the message composer
Select “Create Poll”
Enter the poll question
Add answer options (minimum 2)
Send the poll

Step 4: Vote on Polls

Poll messages render with interactive voting:

Click an option to vote
See real-time vote counts
View who voted for each option

Complete Example

Full group chat with polls:

import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatMessageHeader,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function PollsGroupChat() {
  const [group, setGroup] = useState<CometChat.Group | null>(null);

  useEffect(() => {
    // Fetch or create a group
    CometChat.getGroup("GROUP_ID").then(setGroup);
  }, []);

  if (!group) return <div>Loading...</div>;

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CometChatMessageHeader group={group} />
      
      <div style={{ flex: 1, overflow: "hidden" }}>
        <CometChatMessageList group={group} />
      </div>
      
      <CometChatMessageComposer group={group} />
    </div>
  );
}

export default PollsGroupChat;

Advanced Configuration

Create Polls Programmatically

Use the SDK to create polls:

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

interface PollData {
  question: string;
  options: string[];
  receiverId: string;
  receiverType: string;
}

async function createPoll({ question, options, receiverId, receiverType }: PollData) {
  const pollData = {
    question,
    options,
  };

  const customMessage = new CometChat.CustomMessage(
    receiverId,
    receiverType,
    "extension_poll",
    pollData
  );

  try {
    const message = await CometChat.sendCustomMessage(customMessage);
    console.log("Poll created:", message);
    return message;
  } catch (error) {
    console.error("Error creating poll:", error);
    throw error;
  }
}

// Usage
createPoll({
  question: "Where should we have lunch?",
  options: ["Italian", "Japanese", "Mexican", "Indian"],
  receiverId: "group_123",
  receiverType: CometChat.RECEIVER_TYPE.GROUP,
});

Vote on Polls Programmatically

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

async function voteOnPoll(messageId: number, optionIndex: number) {
  try {
    await CometChat.callExtension("polls", "POST", "v2/vote", {
      vote: optionIndex,
      id: messageId,
    });
    console.log("Vote recorded");
  } catch (error) {
    console.error("Error voting:", error);
  }
}

Custom Poll Configuration

Configure poll appearance:

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

function ComposerWithCustomPolls({ group }: { group: CometChat.Group }) {
  const pollsConfig = new PollsConfiguration({
    createPollIconHoverText: "Create a new poll",
  });

  return (
    <CometChatMessageComposer
      group={group}
      pollsConfiguration={pollsConfig}
    />
  );
}

Listen for Poll Events

Handle poll updates in real-time:

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

function usePollEvents() {
  useEffect(() => {
    const listenerId = "poll-listener";

    CometChat.addMessageListener(
      listenerId,
      new CometChat.MessageListener({
        onCustomMessageReceived: (message: CometChat.CustomMessage) => {
          if (message.getType() === "extension_poll") {
            console.log("New poll received:", message);
          }
        },
      })
    );

    return () => CometChat.removeMessageListener(listenerId);
  }, []);
}

Styling

Customize poll appearance:

/* Poll bubble container */
.cometchat-poll-bubble {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  max-width: 300px;
}

/* Poll question */
.cometchat-poll-bubble__question {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  color: #1a1a1a;
}

/* Poll options */
.cometchat-poll-bubble__option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin: 4px 0;
  border-radius: 8px;
  background: #f5f5f5;
  cursor: pointer;
  transition: background 0.2s;
}

.cometchat-poll-bubble__option:hover {
  background: #e8e8e8;
}

.cometchat-poll-bubble__option--selected {
  background: #e3f2fd;
  border: 1px solid #2196f3;
}

/* Vote count */
.cometchat-poll-bubble__vote-count {
  font-size: 12px;
  color: #666;
  margin-left: auto;
}

/* Progress bar */
.cometchat-poll-bubble__progress {
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin-top: 4px;
}

.cometchat-poll-bubble__progress-fill {
  height: 100%;
  background: #6852d6;
  border-radius: 2px;
  transition: width 0.3s;
}

Common Issues

Polls are only available in group conversations. The poll option won’t appear in 1:1 chats.

Issue	Solution
Poll button not showing	Ensure Polls extension is enabled in Dashboard
Can’t vote	Check if you’ve already voted (one vote per user)
Poll not updating	Verify real-time listeners are active
Only works in groups	Polls are designed for group decision-making

Overview

Prerequisites

Steps

Step 1: Enable Polls Extension

Step 2: Polls Auto-Integration

Step 3: Create a Poll

Step 4: Vote on Polls

Complete Example

Create Polls Programmatically

Vote on Polls Programmatically

Custom Poll Configuration

Listen for Poll Events

Styling

Common Issues

Next Steps

Stickers

Collaborative Whiteboard

Extensions Overview

Groups

Message Composer

​Overview

​Prerequisites

​Steps

​Step 1: Enable Polls Extension

​Step 2: Polls Auto-Integration

​Step 3: Create a Poll

​Step 4: Vote on Polls

​Complete Example

​Create Polls Programmatically

​Vote on Polls Programmatically

​Custom Poll Configuration

​Listen for Poll Events

​Styling

​Common Issues

​Next Steps

Stickers

Collaborative Whiteboard

​Related Guides

Extensions Overview

Groups

Message Composer

Overview

Prerequisites

Steps

Step 1: Enable Polls Extension

Step 2: Polls Auto-Integration

Step 3: Create a Poll

Step 4: Vote on Polls

Complete Example

Create Polls Programmatically

Vote on Polls Programmatically

Custom Poll Configuration

Listen for Poll Events

Styling

Common Issues

Next Steps

Related Guides