WidgetConfig
Pass these options as the third argument to theFeedbackfunWidget constructor, or configure them from your feedbackfun dashboard.
interface WidgetConfig {
triggerSelector?: string;
devDomain?: string;
primaryColor?: string;
primaryForeground?: string;
darkPrimary?: string;
darkPrimaryForeground?: string;
hideClickMode?: boolean;
hidePoweredBy?: boolean;
adminAvatars?: string[];
adminPresence?: string;
displayMode?: string;
user?: UserConfig;
}
Options reference
Appearance
| Option | Type | Default | Description |
|---|---|---|---|
primaryColor | string | Dashboard value | Primary accent color (hex). Applied to buttons and highlights in light mode. |
primaryForeground | string | #ffffff | Text/icon color on primary-colored elements in light mode. |
darkPrimary | string | Dashboard value | Primary accent color for dark mode. |
darkPrimaryForeground | string | #ffffff | Text/icon color on primary elements in dark mode. |
hidePoweredBy | boolean | false | Hide the “Powered by feedbackfun” branding. Available on paid plans. |
Behavior
| Option | Type | Default | Description |
|---|---|---|---|
displayMode | 'popover' | 'dialog' | 'popover' | How the feedback panel opens: as a popover anchored to the button, or a centered dialog. |
hideClickMode | boolean | false | Disable the click-anywhere screenshot annotation mode. |
triggerSelector | string | — | CSS selector for a custom trigger element. When set, the default floating button is hidden. |
Development
| Option | Type | Default | Description |
|---|---|---|---|
devDomain | string | — | Your production domain, used to bypass domain validation on localhost. |
Admin presence
| Option | Type | Default | Description |
|---|---|---|---|
adminPresence | 'online' | 'offline' | 'auto' | 'auto' | Controls the online/offline indicator shown next to admin avatars. auto reads from the dashboard. |
adminAvatars | string[] | Dashboard value | Array of avatar image URLs to display in the widget header. |
User
| Option | Type | Default | Description |
|---|---|---|---|
user | UserConfig | — | Identifies the currently logged-in user. See User identification. |
Example
import FeedbackfunWidget from '@feedbackfun/js';
const widget = new FeedbackfunWidget('YOUR_API_KEY', undefined, {
primaryColor: '#6366f1',
primaryForeground: '#ffffff',
displayMode: 'popover',
hidePoweredBy: true,
triggerSelector: '#feedback-btn',
user: {
id: 'user_123',
email: 'user@example.com',
name: 'Jane Doe',
},
});
Runtime updates
Change colors or user info after initialization without reloading the widget:// Update primary color
window.feedbackfun.setPrimaryColor('#10b981');
window.feedbackfun.setPrimaryForeground('#ffffff');
// Update user info (e.g. after login)
window.feedbackfun.setUserInfo({ id: 'user_456', name: 'John Smith' });
// Clear user info (e.g. after logout)
window.feedbackfun.clearUserInfo();