Polls & Q&A
Learn how to create interactive polls and gather real-time feedback from participants
Overview
BaxCloud provides interactive polling functionality for hosts to gather feedback and opinions from participants. Create polls, collect votes in real-time, and view results instantly across all platforms.
💡
Important
Only hosts and co-hosts can create and end polls. All participants can vote on active polls, with each participant allowed one vote per poll. Poll results are updated in real-time as participants cast their votes.
Create Polls
Host-only feature to create polls with multiple choice options
Real-time Voting
Participants vote and see live results update instantly
Poll Management
Track responses, view history, and end polls when needed
Creating Polls
Host and co-host only feature
Only hosts and co-hosts can create polls. Provide a question and an array of options for participants to choose from.
1import { BaxCloudClient } from '@baxcloud/react-sdk';
2
3// Create a poll (host/co-host only)
4const poll = await client.createPoll({
5 question: 'What topic should we discuss next?',
6 options: [
7 'Product Roadmap',
8 'Technical Architecture',
9 'Team Building',
10 'Q&A Session'
11 ]
12});
13
14console.log('Poll created:', poll.pollId);Only hosts and co-hosts can create polls. If a regular participant attempts to create a poll, the SDK will throw a permission error.
Voting on Polls
Submit responses to active polls
All participants can vote on active polls. Each participant can vote once per poll.
1// Vote on a poll
2await client.respondToPoll({
3 pollId: 'poll-123',
4 selectedOption: 'Product Roadmap'
5});
6
7// Or vote by index
8await client.respondToPoll({
9 pollId: 'poll-123',
10 selectedOptionIndex: 0
11});Each participant can vote once per poll. Attempting to vote again will update their previous response rather than creating a duplicate vote.
Viewing Poll Results
Access active polls and real-time results
All participants can view active polls and see real-time voting results as they update.
1import { useBaxCloudPolls } from '@baxcloud/react-sdk';
2
3function PollResults() {
4 // Get all active polls
5 const activePolls = useBaxCloudPolls();
6
7 return (
8 <div>
9 {activePolls.map(poll => (
10 <div key={poll.pollId}>
11 <h3>{poll.question}</h3>
12 <p>Total Votes: {poll.totalVotes}</p>
13
14 {poll.options.map((option, index) => {
15 const voteCount = poll.responses[option] || 0;
16 const percentage = poll.totalVotes > 0
17 ? Math.round((voteCount / poll.totalVotes) * 100)
18 : 0;
19
20 return (
21 <div key={index}>
22 <span>{option}</span>
23 <span>{voteCount} votes ({percentage}%)</span>
24 <div style={{ width: `${percentage}%`, height: '20px', background: '#3b82f6' }} />
25 </div>
26 );
27 })}
28 </div>
29 ))}
30 </div>
31 );
32}Poll results are updated in real-time as participants vote. Use the
onPollResponseevent listener to trigger UI updates when new votes come in.Ending Polls
Close active polls (host/co-host only)
Only hosts and co-hosts can end active polls. Polls remain active until explicitly ended.
1// End a poll (host/co-host only)
2await client.endPoll('poll-123');
3
4console.log('Poll ended');Polls remain active until the host ends them. Once ended, participants can no longer vote, but the poll and its results remain accessible in the poll history.
Complete Poll UI Component
Interactive poll component with voting and results
Build a complete poll component that allows participants to vote and view real-time results.
1import { useState } from 'react';
2import { BaxCloudClient, useBaxCloudPolls } from '@baxcloud/react-sdk';
3
4interface PollComponentProps {
5 client: BaxCloudClient;
6}
7
8function PollComponent({ client }: PollComponentProps) {
9 const [selectedOption, setSelectedOption] = useState<string | null>(null);
10 const activePolls = useBaxCloudPolls();
11
12 const handleVote = async (pollId: string, option: string) => {
13 await client.respondToPoll({ pollId, selectedOption: option });
14 setSelectedOption(option);
15 };
16
17 return (
18 <div style={{ padding: '20px' }}>
19 {activePolls.map(poll => {
20 const userVote = poll.userResponse; // User's current vote
21 const hasVoted = !!userVote;
22
23 return (
24 <div
25 key={poll.pollId}
26 style={{
27 backgroundColor: '#1a1a1a',
28 borderRadius: '8px',
29 padding: '20px',
30 marginBottom: '16px'
31 }}
32 >
33 <h3 style={{ color: '#fff', marginBottom: '12px' }}>
34 {poll.question}
35 </h3>
36
37 <p style={{ color: '#888', fontSize: '14px', marginBottom: '16px' }}>
38 Total Votes: {poll.totalVotes}
39 </p>
40
41 {poll.options.map((option, index) => {
42 const voteCount = poll.responses[option] || 0;
43 const percentage = poll.totalVotes > 0
44 ? Math.round((voteCount / poll.totalVotes) * 100)
45 : 0;
46 const isSelected = userVote === option;
47
48 return (
49 <div
50 key={index}
51 style={{ marginBottom: '12px' }}
52 >
53 <button
54 onClick={() => handleVote(poll.pollId, option)}
55 disabled={hasVoted}
56 style={{
57 width: '100%',
58 padding: '12px',
59 backgroundColor: isSelected ? '#3b82f6' : '#333',
60 color: '#fff',
61 border: 'none',
62 borderRadius: '4px',
63 cursor: hasVoted ? 'default' : 'pointer',
64 opacity: hasVoted ? 0.8 : 1,
65 marginBottom: '4px'
66 }}
67 >
68 <div style={{
69 display: 'flex',
70 justifyContent: 'space-between',
71 alignItems: 'center'
72 }}>
73 <span>{option} {isSelected && '✓'}</span>
74 <span>{voteCount} ({percentage}%)</span>
75 </div>
76 </button>
77
78 <div style={{
79 height: '4px',
80 backgroundColor: '#333',
81 borderRadius: '2px',
82 overflow: 'hidden'
83 }}>
84 <div style={{
85 width: `${percentage}%`,
86 height: '100%',
87 backgroundColor: '#3b82f6',
88 transition: 'width 0.3s ease'
89 }} />
90 </div>
91 </div>
92 );
93 })}
94
95 {hasVoted && (
96 <p style={{
97 color: '#10b981',
98 fontSize: '14px',
99 marginTop: '12px',
100 fontWeight: 500
101 }}>
102 ✓ You voted for "{userVote}"
103 </p>
104 )}
105 </div>
106 );
107 })}
108 </div>
109 );
110}Poll Event Listeners
Listen for poll creation and response events
Subscribe to poll events to update your UI when polls are created or participants vote.
1import { useEffect } from 'react';
2import { BaxCloudClient } from '@baxcloud/react-sdk';
3
4function PollEventListeners({ client }: { client: BaxCloudClient }) {
5 useEffect(() => {
6 // Listen for new polls
7 const unsubscribePollCreated = client.onPollCreated((poll) => {
8 console.log('New poll created:', poll.question);
9 console.log('Options:', poll.options);
10 });
11
12 // Listen for poll responses
13 const unsubscribePollResponse = client.onPollResponse((response) => {
14 console.log('New vote:', response);
15 console.log('Poll ID:', response.pollId);
16 console.log('User voted for:', response.selectedOption);
17 });
18
19 // Listen for poll end
20 const unsubscribePollEnded = client.onPollEnded((pollId) => {
21 console.log('Poll ended:', pollId);
22 });
23
24 return () => {
25 unsubscribePollCreated();
26 unsubscribePollResponse();
27 unsubscribePollEnded();
28 };
29 }, [client]);
30
31 return null;
32}Use these event listeners to update your UI in real-time as polls are created, participants vote, or polls are ended.
Advanced Features
Multiple Choice Polls
Create polls that allow participants to select multiple options.
1// Create multiple choice poll
2const poll = await client.createPoll({
3 question: 'Which features are most important to you?',
4 options: [
5 'Video Quality',
6 'Low Latency',
7 'Screen Sharing',
8 'Recording'
9 ],
10 allowMultipleResponses: true,
11 maxSelections: 2
12});
13
14// Vote with multiple options
15await client.respondToPoll({
16 pollId: poll.pollId,
17 selectedOptions: ['Video Quality', 'Low Latency']
18});Poll Filtering
Filter polls by status or date range.
1// Get only active polls
2const activePolls = client.getActivePolls();
3
4// Get all polls (including ended)
5const allPolls = client.getAllPolls();
6
7// Get polls by date range
8const recentPolls = client.getPolls({
9 startDate: new Date('2024-01-01'),
10 endDate: new Date(),
11 status: 'active' // or 'ended' or 'all'
12});Real-time Results Updates
Automatically update poll results as votes come in using event listeners.
1import { useState, useEffect } from 'react';
2
3function LivePollResults({ client }) {
4 const [polls, setPolls] = useState([]);
5
6 useEffect(() => {
7 // Initial load
8 setPolls(client.getActivePolls());
9
10 // Listen for updates
11 const unsubscribe = client.onPollResponse(() => {
12 // Refresh poll data when new votes come in
13 setPolls(client.getActivePolls());
14 });
15
16 return unsubscribe;
17 }, [client]);
18
19 return (
20 <div>
21 {polls.map(poll => (
22 <PollResultCard key={poll.pollId} poll={poll} />
23 ))}
24 </div>
25 );
26}Advanced features like multiple choice polls and real-time filtering help create more interactive and engaging experiences for your participants.
Best Practices
💡
Only hosts and co-hosts can create and end polls
Implement proper permission checks in your UI to prevent regular participants from accessing poll creation controls.
💡
Poll results are updated in real-time as participants vote
Use the
onPollResponse event listener to trigger UI updates and show live voting results.💡
Each participant can vote once per poll
The SDK automatically handles duplicate vote prevention. Subsequent votes from the same participant will update their previous response.
💡
Polls remain active until the host ends them
Unlike timed polls, BaxCloud polls stay active indefinitely until explicitly ended by a host or co-host, giving you full control over poll lifecycle.