React - feedbackfun

Install

npm install @feedbackfun/js

Basic setup

Initialize the widget once at your app’s entry point. Use a useEffect with an empty dependency array so it only runs once:

// src/App.tsx
import { useEffect } from 'react';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';

export default function App() {
  useEffect(() => {
    new FeedbackfunWidget('YOUR_API_KEY');
  }, []);

  return <div>{/* your app */}</div>;
}

With user identification

If your app has authentication, pass the current user so feedback is linked to their account:

// src/App.tsx
import { useEffect } from 'react';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';
import { useAuth } from './hooks/useAuth';

export default function App() {
  const { user } = useAuth();

  useEffect(() => {
    new FeedbackfunWidget('YOUR_API_KEY', undefined, {
      user: user
        ? { id: user.id, email: user.email, name: user.name }
        : undefined,
    });
  }, []);

  // Sync user changes (login / logout) after init
  useEffect(() => {
    if (user) {
      window.feedbackfun?.setUserInfo({ id: user.id, email: user.email, name: user.name });
    } else {
      window.feedbackfun?.clearUserInfo();
    }
  }, [user]);

  return <div>{/* your app */}</div>;
}

Reusable component

Extract the widget initialization into a dedicated component:

// src/components/FeedbackWidget.tsx
import { useEffect } from 'react';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';

interface Props {
  userId?: string;
  userEmail?: string;
  userName?: string;
}

export function FeedbackWidget({ userId, userEmail, userName }: Props) {
  useEffect(() => {
    new FeedbackfunWidget('YOUR_API_KEY', undefined, {
      user: userId ? { id: userId, email: userEmail, name: userName } : undefined,
    });
  }, []);

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

  return null;
}

Then use it at the root of your app:

// src/App.tsx
import { FeedbackWidget } from './components/FeedbackWidget';
import { useAuth } from './hooks/useAuth';

export default function App() {
  const { user } = useAuth();
  return (
    <>
      <FeedbackWidget userId={user?.id} userEmail={user?.email} userName={user?.name} />
      {/* rest of your app */}
    </>
  );
}

TypeScript

Declare the window.feedbackfun global to get type checking:

// src/types/feedbackfun.d.ts
interface Window {
  feedbackfun?: {
    setPrimaryColor(color: string): void;
    setPrimaryForeground(color: string): void;
    setUserInfo(user: { id: string; email?: string; name?: string; [key: string]: any }): void;
    clearUserInfo(): void;
  };
}