SDKs
featurely-feature-reporter
Embeddable feedback widget for feature requests and bug reports.
featurely-feature-reporter
Installation
npm install featurely-feature-reporterFeatures
- Embeddable floating widget button
- Feature request submission form
- Bug report submission form
- Automatic metadata collection (URL, user agent, timestamp, screen resolution)
- User information association
- 6 positions, 6 colors, 6 icons
- Draggable widget option
- Custom labels for every text string
- TypeScript support
- Zero runtime dependencies
- Mobile-responsive
Configuration options
| Option | Type | Required | Description |
|---|---|---|---|
apiKey | string | Yes | API key with features:write permission |
projectId | string | Yes | Your project ID |
apiUrl | string | No | Custom API endpoint |
position | WidgetPosition | No | Widget position. Default: bottom-right |
color | WidgetColor | No | Widget accent color. Default: blue |
icon | WidgetIcon | No | Widget button icon. Default: comment |
draggable | boolean | No | Allow the user to drag the widget. Default: false |
enableFeatureRequests | boolean | No | Show the feature request form. Default: true |
enableBugReports | boolean | No | Show the bug report form. Default: true |
showDashboardLink | boolean | No | Show a link to the public roadmap in the modal footer. Default: false |
user | { id?, email?, name? } | No | Pre-fill user information (hides the email field when email is set) |
labels | FeatureReporterConfig['labels'] | No | Override default form labels and toast text |
onSubmit | (type, data) => void | No | Called after successful submission |
onError | (error) => void | No | Called on submission errors |
Widget positions
bottom-right, bottom-left, top-right, top-left, right-center, left-center
Colors
blue, green, purple, red, orange, pink
Icons
comment, lightbulb, bug, message, plus, star
Basic usage
import { FeatureReporter } from 'featurely-feature-reporter';
const reporter = new FeatureReporter({
apiKey: 'ft_live_your_api_key_here',
projectId: 'your-project-id',
position: 'bottom-right',
color: 'blue',
user: {
id: 'usr_123',
email: 'user@example.com',
},
});
reporter.init();React integration
'use client';
import { useEffect } from 'react';
import { FeatureReporter } from 'featurely-feature-reporter';
export function FeatureReporterProvider() {
useEffect(() => {
const reporter = new FeatureReporter({
apiKey: process.env.NEXT_PUBLIC_FEATURELY_API_KEY!,
projectId: process.env.NEXT_PUBLIC_FEATURELY_PROJECT_ID!,
position: 'bottom-right',
});
reporter.init();
return () => {
reporter.destroy();
};
}, []);
return null;
}API methods
| Method | Description |
|---|---|
init() | Initialize and mount the widget into the DOM |
setUser(userId, email?, name?) | Update the associated user |
show() | Programmatically show the widget button |
hide() | Programmatically hide the widget button and close the modal |
destroy() | Remove the widget and modal from the DOM |
TypeScript exports
FeatureReporter (default), FeatureReporterConfig, SubmissionData, WidgetPosition, WidgetColor, WidgetIcon