Complete customer feedback ecosystem - capture feature requests, bug reports, manage product roadmaps, and provide real-time chat support, all in one embeddable widget
npm install @feedbackfun/jsbash
npm install @feedbackfun/js
`
Features
- 🚀 Feature Requests - Collect and prioritize product ideas from your users
- 🐛 Bug Reporting - Visual bug reports with automatic screenshot capture and context
- 🗺️ Product Roadmap - Interactive roadmap with voting and status tracking
- 💬 Real-time Chat Support - Instant messaging between users and your support team
- 👤 User Authentication - Associate feedback with authenticated users for better context
- 🎯 Click-anywhere Feedback - Pin feedback to any element on your website
- 🎨 Customizable Branding - Match your brand with custom colors and themes
- 🌙 Dark Mode Support - Automatic dark/light theme detection
- 📦 Zero Configuration - Widget settings managed via dashboard
- 🔒 TypeScript Support - Full TypeScript definitions included
Quick Start
1. Install the package
`bash
npm install @feedbackfun/js
`
2. Initialize the widget
`typescript
import feedbackfun from '@feedbackfun/js';
// Initialize widget (config is fetched from your dashboard)
await feedbackfun.init({
apiKey: 'your-api-key',
projectId: 'your-project-id'
});
`
Configuration (InitConfig)
All widget configuration (colors, display mode, trigger selectors, branding, etc.) is managed via the FeedbackFun dashboard at feedbackfun.com. The init() method only requires API credentials.
| Option | Type | Required | Description |
|--------|------|----------|-------------|
| apiKey | string | Yes | Your FeedbackFun API key from the dashboard |
| projectId | string | Yes | Your project ID from the dashboard |
Example:
`typescript
await feedbackfun.init({
apiKey: 'your-api-key',
projectId: 'your-project-id'
});
`
API (FeedbackfunWidget)
| Method | Description |
|--------|-------------|
| init(config) | Initialize the widget with API credentials. Returns Promise |
| destroy() | Cleanup and destroy the widget instance. Important for SPAs to prevent memory leaks |
| getInstance() | Get the current widget instance. Returns FeedbackfunWidget \| null |
| setUserInfo(user) | Set authenticated user information to associate feedback with specific users |
| clearUserInfo() | Clear user information (useful for logout scenarios) |
| setPrimaryColor(color) | Runtime override of the primary theme color configured in dashboard |
| setPrimaryForeground(color) | Runtime override of the primary foreground color configured in dashboard |
$3
#### setUserInfo(user)
Set authenticated user information to associate feedback with specific users. You can pass any custom data fields beyond the standard ones.
Standard Parameters:
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| user.id | string | Yes | User's unique identifier |
| user.name | string | No | User's display name |
| user.email | string | No | User's email address |
Custom Fields:
You can pass any additional custom data as needed (e.g., avatar, role, plan, company, etc.). All custom fields will be stored and associated with the user's feedback.
Example:
`typescript
feedbackfun.setUserInfo({
id: 'user-123',
name: 'John Doe',
email: 'john@example.com',
// Custom fields - pass any data you want
avatar: 'https://example.com/avatar.jpg',
role: 'admin',
plan: 'premium',
company: 'Acme Inc'
});
`
#### setPrimaryColor(color)
Runtime override of the primary theme color configured in your dashboard.
Example:
`typescript
feedbackfun.setPrimaryColor('#3b82f6');
`
#### setPrimaryForeground(color)
Runtime override of the primary foreground color configured in your dashboard.
Example:
`typescript
feedbackfun.setPrimaryForeground('#ffffff');
``