> ## Documentation Index
> Fetch the complete documentation index at: https://feedbackfun.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration Options

> All available options for customizing the feedbackfun widget.

## WidgetConfig

Pass these options as the third argument to the `FeedbackfunWidget` constructor, or configure them from your feedbackfun dashboard.

```typescript theme={null}
interface WidgetConfig {
  triggerSelector?: string;
  devDomain?: string;
  primaryColor?: string;
  primaryForeground?: string;
  darkPrimary?: string;
  darkPrimaryForeground?: string;
  hideClickMode?: boolean;
  hidePoweredBy?: boolean;
  adminAvatars?: string[];
  adminPresence?: string;
  displayMode?: string;
  enableDevMode?: boolean;
  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. |
| `enableDevMode`   | `boolean`               | `false`     | Opens the widget automatically on load. Useful during development.                          |

### 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](/configuration/user-identification). |

***

## Example

```javascript theme={null}
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:

```javascript theme={null}
// 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();
```