Getting Started

Get up and running with Feedback Pulse in minutes.

What is Feedback Pulse?

Feedback Pulse is an AI-powered feedback management system that helps you collect, organize, and analyze user feedback for your web applications.

Key Features

🎯 Easy Integration - Add feedback widget with one script tag
🤖 AI-Powered - Automatic sentiment analysis and label generation
📊 Analytics Dashboard - Visualize feedback trends and insights
🏷️ Smart Labels - Auto-categorize feedback (UI/UX, bugs, performance, etc.)
🌙 Dark Mode - Widget adapts to user's system preference
🔒 Secure - GitHub OAuth authentication

Quick Start

1. Sign Up

Visit https://pulsefeedback.vercel.app and click "Sign in with GitHub".

2. Create a Project

Go to your dashboard
Click "Create New Project"
Enter project details:
- Name: Your project name
- URL: Your website URL (optional)
- Description: Brief description (optional)
Click "Create Project"
Copy your Project Key

3. Add the Widget

Add the following code to your website, just before the closing </body> tag:

html
<!-- Feedback Pulse Widget -->
<script src="https://pulsefeedback.vercel.app/widget.js"></script>
<script>
  FeedbackPulse.init({
    projectKey: 'YOUR_PROJECT_KEY',
    apiUrl: 'https://pulsefeedback.vercel.app'
  });
</script>

Replace YOUR_PROJECT_KEY with the key you copied.

4. Test It!

Reload your website. You should see a floating "Feedback" button in the bottom-right corner. Click it to submit test feedback.

5. View Feedback

Return to your dashboard and navigate to your project. You'll see all submitted feedback with:

Feedback type (Bug, Feature, Other)
Message content
Auto-generated labels
Submission time
User info (if provided)

Integration Examples

HTML Website

html
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome!</h1>
  
  <!-- Your content -->
  
  <!-- Feedback Pulse Widget -->
  <script src="https://pulsefeedback.vercel.app/widget.js"></script>
  <script>
    FeedbackPulse.init({
      projectKey: 'abc123def456',
      apiUrl: 'https://pulsefeedback.vercel.app'
    });
  </script>
</body>
</html>

React App

Step 1: Create Widget Component

src/components/FeedbackWidget.tsx:

typescript
'use client'; // For Next.js App Router

import { useEffect } from 'react';

export default function FeedbackWidget() {
  useEffect(() => {
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://pulsefeedback.vercel.app/widget.js';
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      // Initialize widget
      if (window.FeedbackPulse) {
        window.FeedbackPulse.init({
          projectKey: process.env.NEXT_PUBLIC_FEEDBACK_PULSE_KEY!,
          apiUrl: 'https://pulsefeedback.vercel.app',
        });
      }
    };

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

Step 2: Add Type Declaration

src/types/feedback-pulse.d.ts:

typescript
interface Window {
  FeedbackPulse: {
    init: (config: { projectKey: string; apiUrl: string }) => void;
  };
}

Step 3: Include in Layout

app/layout.tsx (Next.js):

typescript
import FeedbackWidget from '@/components/FeedbackWidget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <FeedbackWidget />
      </body>
    </html>
  );
}

Step 4: Environment Variable

.env.local:

bash
NEXT_PUBLIC_FEEDBACK_PULSE_KEY=your-project-key

Vue.js

App.vue:

vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://pulsefeedback.vercel.app/widget.js';
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      window.FeedbackPulse.init({
        projectKey: process.env.VUE_APP_FEEDBACK_KEY,
        apiUrl: 'https://pulsefeedback.vercel.app',
      });
    };
  },
};
</script>

Using the Dashboard

Viewing Feedback

Navigate to Dashboard → Projects
Click on a project
View all feedback with filters:
- Type: All, Bugs, Features, Other
- Search: Search by message or email

Analyzing Sentiment

Find a feedback item
Click "Analyze Sentiment"
Wait for AI analysis
View sentiment badge: 😊 Positive, 😐 Neutral, 😞 Negative

Managing Labels

Auto-Generated Labels:

Appear automatically (2-3 per feedback)
Based on keyword extraction

Custom Labels:

Click "+" button next to labels
Type your custom label
Press Enter

Remove Labels:

Click the "×" on any label

Marking as Resolved

Expand a feedback item
Click "Mark as Resolved"
Toggle back by clicking "✓ Resolved"

Analytics

Go to Dashboard → Analytics
View insights:
- Total feedback count
- Feedback by type (pie chart)
- Sentiment distribution (pie chart)
- Feedback trend (line chart)
- Top labels (bar chart)
Use filters:
- Date Range: Last 7/30/90 days or custom
- Projects: Filter by specific projects
Click "AI Summarize" for instant insights

Best Practices

Widget Placement

Default position (bottom-right) works for most sites
Widget is mobile-responsive
Dark mode adapts automatically

Feedback Management

Check daily - Respond to feedback promptly
Use labels - Organize feedback by category
Analyze sentiment - Identify user frustration early
Mark resolved - Track what's been addressed
Review analytics - Spot trends and patterns

Project Organization

One project per app - Don't mix different applications
Use descriptive names - Easy identification
Add URLs - Quick access to your application

Customization

Widget Behavior

The widget automatically:

✅ Detects dark mode
✅ Positions itself in bottom-right corner
✅ Adds accessibility features (keyboard navigation)
✅ Prevents duplicate submissions

Styling (Future)

Custom styling is planned for future releases:

Brand colors
Custom positioning
Logo integration

Troubleshooting

Widget Not Appearing

Check:

✅ Script is loading (check browser Network tab)
✅ Project key is correct
✅ No JavaScript errors in console
✅ Script is placed before </body>

Feedback Not Submitting

Check:

✅ Network request to /api/widget/[key]
✅ CORS errors (should not occur with cross-origin)
✅ Message field is not empty
✅ Project exists and is active

Sentiment Analysis Not Working

Possible causes:

⏳ AI model timeout (10 seconds)
🔌 Hugging Face API unavailable
🔑 Invalid HF API key (server-side issue)

Solution: The system falls back to "neutral" sentiment. Try again later.

Labels Not Generating

Check:

Feedback message contains relevant keywords
Label generation happens in background (may take 1-2 seconds)
Refresh the feedback page

Getting Help

📧 Email: sarbosarcar@gmail.com
🐛 Issues: GitHub Issues
💬 Widget: Use the feedback widget on our landing page

Next Steps

FAQ

Is Feedback Pulse free?

Yes, currently Feedback Pulse is completely free to use.

Can I use it on multiple websites?

Yes! Create a separate project for each website.

Is user data private?

Yes. Only you (the project owner) can see feedback for your projects.

Can I export feedback?

Export functionality is planned for a future release.

Does it work with single-page apps?

Yes! The widget works with React, Vue, Angular, and other SPAs.

Can I customize the widget design?

Custom branding is planned for a future release.

What browsers are supported?

All modern browsers (Chrome, Firefox, Safari, Edge). IE11 is not supported.

Is there a rate limit?

Currently, no rate limiting is enforced. Abuse prevention is planned.