User Voting System

​

User Voting Feature Overview

PreLaunch includes a powerful user voting system that allows potential users to vote on which features they would like to see implemented in your product. This provides valuable feedback during the product validation phase and helps you prioritize your development efforts.

​

Key Benefits

• Understand User Preferences: Get direct feedback on which features matter most to your audience
• Data-Driven Prioritization: Make product decisions based on actual user feedback
• Engage Potential Users: Keep early adopters engaged with your product development
• Demonstrate Responsiveness: Show that you value user input in your product roadmap

​

Implementation Methods

PreLaunch’s user voting functionality is implemented through Typeform integration:

​

Typeform Voting Component

The easiest way to add voting functionality is using the built-in TypeformVote component:

import { TypeformVote } from '@/components/landing/TypeformVote';

export default function VotingSection() {
  return (
    <div className="voting-section">
      <h2>Help Shape Our Product</h2>
      <p>Vote for features you'd like to see in our upcoming release!</p>
      
      <TypeformVote />
    </div>
  );
}

​

Configuration

​

Basic Setup

1. Create a form on Typeform with multiple-choice or ranking questions for feature voting
2. Set up the required environment variables in your .env.local file:

# Typeform Configuration
TYPEFORM_ACCESS_TOKEN=your_typeform_access_token
TYPEFORM_VOTE_FORM_ID=your_vote_form_id

​

Customizing the Voting Form

You can customize the voting functionality by modifying the TypeformVote.tsx component:

// Customize button text
<TypeformVote buttonText="Vote for Features" />

// Customize styles
<TypeformVote className="bg-blue-500 hover:bg-blue-600" />

// Customize modal size
<TypeformVote modalHeight="600px" modalWidth="100%" />

​

Collecting and Analyzing Results

Typeform provides several ways to access and analyze voting results:

1. Typeform Dashboard: View and export results directly from your Typeform account
2. Typeform API: Set up webhooks to receive results in real-time
3. PreLaunch Webhook Integration: PreLaunch includes a pre-configured webhook endpoint at /api/typeform/webhook that can process incoming results

​

Processing Webhook Data

Typeform can send voting data to your application’s webhook endpoint:

// pages/api/typeform/webhook.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({
      success: false,
      error: {
        code: 'METHOD_NOT_ALLOWED',
        message: 'Only POST requests are allowed',
      },
    });
  }

  try {
    // Process incoming Typeform data
    const data = req.body;
    // Store in your database, update voting counts, etc.
    
    return res.status(200).json({ success: true });
  } catch (error) {
    console.error('Error processing webhook:', error);
    return res.status(500).json({
      success: false,
      error: {
        code: 'INTERNAL_SERVER_ERROR',
        message: 'Error processing webhook data',
      },
    });
  }
}

​

Displaying Voting Results

You can display voting results on your roadmap or dedicated results page:

import { VotingResults } from '@/components/VotingResults';

export default function ResultsPage() {
  return (
    <div className="results-page">
      <h1>Feature Voting Results</h1>
      <p>See what features our community wants most!</p>
      
      <VotingResults />
    </div>
  );
}

​

Common Questions

​

Related Links