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

# User Identification

> Link widget feedback to real user accounts so you know exactly who submitted what.

## Why identify users?

When you pass user info to the widget, every feedback submission in your dashboard is attributed to a real account — name, email, and any custom fields you include. Without it, submissions are anonymous.

## UserConfig

```typescript theme={null}
interface UserConfig {
  id: string;         // Required — your internal user ID
  email?: string;     // Optional — shown in the dashboard
  name?: string;      // Optional — shown in the dashboard
  [key: string]: any; // Any extra fields you want to attach
}
```

<Note>
  `id` is the only required field. Use the user's ID from your own database so you can match submissions back to accounts.
</Note>

## Pass user info at init

Set the `user` option when initializing the widget:

```javascript theme={null}
import FeedbackfunWidget from '@feedbackfun/js';

const widget = new FeedbackfunWidget('YOUR_API_KEY', undefined, {
  user: {
    id: 'user_123',
    email: 'jane@example.com',
    name: 'Jane Doe',
  },
});
```

## Update user info at runtime

If the user logs in after the widget has already loaded, call `setUserInfo`:

```javascript theme={null}
// After login
window.feedbackfun.setUserInfo({
  id: 'user_123',
  email: 'jane@example.com',
  name: 'Jane Doe',
});
```

## Clear user info on logout

Call `clearUserInfo` when the user logs out so subsequent feedback is anonymous:

```javascript theme={null}
// After logout
window.feedbackfun.clearUserInfo();
```

## Custom fields

Pass any additional fields — they are stored with the submission and visible in your dashboard:

```javascript theme={null}
window.feedbackfun.setUserInfo({
  id: 'user_123',
  name: 'Jane Doe',
  plan: 'pro',
  company: 'Acme Inc',
  createdAt: '2024-01-15',
});
```

## Framework examples

<Tabs>
  <Tab title="React">
    ```jsx theme={null}
    import { useEffect } from 'react';
    import { useAuth } from './auth'; // your auth hook

    export function FeedbackWidget() {
      const { user } = useAuth();

      useEffect(() => {
        if (user) {
          window.feedbackfun?.setUserInfo({
            id: user.id,
            email: user.email,
            name: user.name,
          });
        } else {
          window.feedbackfun?.clearUserInfo();
        }
      }, [user]);

      return null;
    }
    ```
  </Tab>

  <Tab title="Next.js">
    ```tsx theme={null}
    'use client';
    import { useEffect } from 'react';
    import { useSession } from 'next-auth/react';

    export function FeedbackWidget() {
      const { data: session } = useSession();

      useEffect(() => {
        if (session?.user) {
          window.feedbackfun?.setUserInfo({
            id: session.user.id,
            email: session.user.email ?? undefined,
            name: session.user.name ?? undefined,
          });
        } else {
          window.feedbackfun?.clearUserInfo();
        }
      }, [session]);

      return null;
    }
    ```
  </Tab>

  <Tab title="Vue">
    ```vue theme={null}
    <script setup>
    import { watch } from 'vue';
    import { useAuth } from './composables/auth'; // your auth composable

    const { user } = useAuth();

    watch(user, (u) => {
      if (u) {
        window.feedbackfun?.setUserInfo({
          id: u.id,
          email: u.email,
          name: u.name,
        });
      } else {
        window.feedbackfun?.clearUserInfo();
      }
    }, { immediate: true });
    </script>
    ```
  </Tab>
</Tabs>