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