User Identification

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

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
}

id is the only required field. Use the user’s ID from your own database so you can match submissions back to accounts.

Pass user info at init

Set the user option when initializing the widget:

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:

// 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:

// After logout
window.feedbackfun.clearUserInfo();

Custom fields

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

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

Framework examples

React
Next.js
Vue

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;
}

'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;
}

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

Getting Started

Installation

Configuration

Framework Guides

Why identify users?

UserConfig

Pass user info at init

Update user info at runtime

Clear user info on logout

Custom fields

Framework examples

​Why identify users?

​UserConfig

​Pass user info at init

​Update user info at runtime

​Clear user info on logout

​Custom fields

​Framework examples

Why identify users?

UserConfig

Pass user info at init

Update user info at runtime

Clear user info on logout

Custom fields

Framework examples