Customizing voting and categories

Overview

Categories and voting settings are essential for organizing feedback and gauging user interest. This guide covers how to customize both to match your product's needs.

Managing Categories

Creating Categories

1. Go to your project's Categories section
2. Click Create Category
3. Configure the category:
   • Name: Clear, descriptive title
   • Slug: URL-friendly identifier (e.g., "ui-improvements")
   • Color: Hex color for visual distinction (#3b82f6, #10b981, etc.)
   • Icon: Select from available icons (lightbulb, bug, star, etc.)
   • Description: Optional context about this category
4. Click Create

Editing Categories

To update an existing category:

1. Click the category name to view details
2. Click Edit
3. Modify any field (name, color, icon, description)
4. Click Save

Category Best Practices

• Keep it simple: Start with 3-5 categories to avoid overwhelming users
• Use clear names: Avoid technical jargon; use user-friendly terms
• Assign colors: Use distinct colors for quick visual scanning
• Organize by theme: Group related feedback (e.g., "UI/UX," "Performance," "Integrations")

Configuring Voting

Voting Modes

You can configure how users interact with wishes:

• Anonymous voting: Users can vote without logging in (tracked by IP/fingerprint)
• Identified voting: Users must provide email to vote (prevents duplicate votes)
• User voting: Authenticated users vote once per wish

Enabling Anonymous Voting

In your organization settings:

1. Go to Organization Settings
2. Find Allow Anonymous Voting
3. Toggle the setting to On
4. Save changes

Anonymous voting uses a fingerprint system to prevent duplicate votes from the same device/browser.

Identified Voting

For more accurate vote tracking:

1. Ensure Allow Anonymous Voting is disabled
2. When creating votes via API, include the voter_email field
3. This prevents duplicate votes across devices for the same email

Vote Settings by SDK

React SDK

Using the useVote hook:

const { vote, unvote, hasVoted, voteCount } = useVote({
  wishId: 'wish-123',
  voterEmail: '[email protected]', // Optional, for identified voting
  skipAutoCheck: true, // Lazy check on interaction
  onVoteChange: (hasVoted, count) => {
    console.log('Vote state:', hasVoted, 'Count:', count);
  }
});

Vote Button Component

<VoteButton
  wishId="wish-123"
  voterEmail="[email protected]"
  showCount={true}
  size="md"
  onVoteChange={(hasVoted, count) => console.log(count)}
/>

Sorting by Votes

When displaying wishes, you can sort by popularity:

const { wishes } = useWishes({
  filters: {
    sort_by: 'votes',
    sort_order: 'desc'
  }
});

Available sort options include:

• votes: Sort by vote count (most popular first)
• created_at: Sort by submission date
• updated_at: Sort by last activity

Category Filtering

Filter wishes by category:

const { wishes } = useWishes({
  filters: {
    category_id: 'category-123'
  }
});

Advanced Voting Features

Vote Limits

• By default, users can vote on unlimited wishes
• Users can only vote once per specific wish
• Users can retract (unvote) their vote at any time

Vote Count Display

Control how vote counts appear:

<VoteButton
  wishId="wish-123"
  showCount={false} // Hide count, show icon only
/>

Best Practices

• Start anonymous: Enable anonymous voting to lower the barrier to participation
• Track metrics: Monitor vote trends to identify high-demand features
• Combine with status: Use both vote count and status to prioritize
• Review regularly: Periodically audit categories to ensure they remain relevant
• Respond to popular items: High-vote items deserve team attention

Next Steps

• Setting up your first feedback board
• Embedding feedback widgets
• Managing and triaging feedback