v0.4.8 Features Demo

Display Modes, Success Banner & Confetti (Mock Data)

📝 Note: This demo uses mock data to ensure features work reliably without blockchain dependency. All interactions are simulated client-side only.

New in v0.4.8

Explore the new customization options for poll widgets

Display Modes

Control how the poll widget displays voting and results interfaces

Vote Mode

Shows only voting interface, auto-switches to results after voting

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Cast your vote

Next.js
React
Vue.js
Svelte
<PollWidget
  pollId={1n}
  displayMode="vote"
/>

Result Mode

Always shows results interface (no voting)

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Results

Next.js
45 votes42.1%
React
32 votes29.9%
Vue.js
18 votes16.8%
Svelte
12 votes11.2%
Total votes: 107
<PollWidget
  pollId={1n}
  displayMode="result"
/>

Mixed Mode (Default)

Auto-switches based on vote status

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Cast your vote

Next.js
React
Vue.js
Svelte
<PollWidget
  pollId={1n}
  displayMode="mixed"
/>

Results Visibility Control

Hide results data while showing vote status

Results Hidden

Shows "You've voted" message without revealing data

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Cast your vote

Next.js
React
Vue.js
Svelte
<PollWidget
  pollId={1n}
  displayMode="mixed"
  showResults={false}
/>

Custom Hidden Message

Customize the message shown when results are hidden

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Results

Results will be revealed after the poll closes!

<PollWidget
  pollId={1n}
  displayMode="result"
  showResults={false}
  resultsHiddenMessage="..."
/>

Vote Success Effects

Celebrate successful votes with banners and confetti

Success Banner

Shows a slide-in banner with custom message

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Cast your vote

Next.js
React
Vue.js
Svelte
<PollWidget
  pollId={1n}
  displayMode="vote"
  successMessage="Your vote!"
/>

Confetti Celebration

Trigger confetti animation on successful vote

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Cast your vote

Next.js
React
Vue.js
Svelte
<PollWidget
  pollId={1n}
  displayMode="vote"
  enableConfetti={true}
/>

No Success Banner

Disable the success banner completely

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Cast your vote

Next.js
React
Vue.js
Svelte
<PollWidget
  pollId={1n}
  displayMode="vote"
  showSuccessBanner={false}
/>

Custom Banner Duration

Control how long the success banner stays visible

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Cast your vote

Next.js
React
Vue.js
Svelte
<PollWidget
  pollId={1n}
  successDuration={5000}
/>

Complete Example

All features combined

What is your favorite web3 framework?

Active

Category: Development

Ends in 6d 23h 59m

Cast your vote

Next.js
React
Vue.js
Svelte

Full Configuration:

<PollWidget
  pollId={1n}
  displayMode="vote"
  showResults={true}
  successMessage="Thank you for participating!"
  successDuration={4000}
  enableConfetti={true}
  onVoteSuccess={() => console.log('Success!')}
  onVoteError={(error) => console.error(error)}
/>

Display Mode Behavior Reference

displayModeshowResultsBefore VoteAfter Vote
votetrueVoting UI"You voted" + Results Data
votefalseVoting UI"You voted" (no data)
resulttrueResults DataResults Data
resultfalse"Results hidden""You voted" (no data)
mixedtrueVoting UIResults Data
mixedfalseVoting UI"You voted" (no data)