> ## 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.

# npm Package

> Install @feedbackfun/js for use with React, Next.js, Vue, and other JavaScript frameworks.

## Install

<CodeGroup>
  ```bash npm theme={null}
  npm install @feedbackfun/js
  ```

  ```bash yarn theme={null}
  yarn add @feedbackfun/js
  ```

  ```bash pnpm theme={null}
  pnpm add @feedbackfun/js
  ```
</CodeGroup>

## Basic usage

Import and initialize the widget in your app's entry point:

```javascript theme={null}
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';

const widget = new FeedbackfunWidget('YOUR_API_KEY', 'https://feedbackfun.com', {
  // optional config
});
```

<Note>
  Looking for framework-specific examples? See the [React](/frameworks/react), [Next.js](/frameworks/nextjs), and [Vue](/frameworks/vue) guides.
</Note>

## Constructor

```typescript theme={null}
new FeedbackfunWidget(
  apiKey: string,
  apiUrl?: string,    // default: "https://feedbackfun.com"
  config?: WidgetConfig
)
```

| Parameter | Type           | Required | Description                                                                |
| --------- | -------------- | -------- | -------------------------------------------------------------------------- |
| `apiKey`  | `string`       | Yes      | Your project API key                                                       |
| `apiUrl`  | `string`       | No       | API base URL (default: `https://feedbackfun.com`)                          |
| `config`  | `WidgetConfig` | No       | Widget configuration options — see [Configuration](/configuration/options) |

## TypeScript support

`@feedbackfun/js` ships with full TypeScript declarations:

```typescript theme={null}
import FeedbackfunWidget, { WidgetConfig, UserConfig } from '@feedbackfun/js';

const config: WidgetConfig = {
  primaryColor: '#6366f1',
  displayMode: 'popover',
  user: {
    id: 'user_123',
    email: 'user@example.com',
    name: 'Jane Doe',
  },
};

const widget = new FeedbackfunWidget('YOUR_API_KEY', undefined, config);
```

## Next steps

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/configuration/options">
    See all available config options.
  </Card>

  <Card title="User identification" icon="user" href="/configuration/user-identification">
    Link feedback to real user accounts.
  </Card>
</CardGroup>