Add PinMarks to your web app

Install via npm, identify signed-in users and attach context from your own app.

Updated October 2026

Install

npm install @pinmarks/widget

'use client';
import { useEffect } from 'react';
import pinmarks from '@pinmarks/widget';

export function Feedback({ user }: { user?: { name: string; email: string } }) {
  useEffect(() => {
    void pinmarks.ioit({ projectKey: process.env.NEXT_PUBLIC_PINMARKS_KEY!, user });
    return () => pinmarks.destroy();
  }, [user]);
  return null;
}

Identify the user

Pass user to init(), or call setUser() after sign-in. The widget then hides the name and email fields. Details in Identify reporters automatically.

Attach context

Add your own data to every report, such as the plan or account id, with setMetadata(). It is stored when Developer tools → Custom metadata is on for the project (Agency plan).

widget?.setMetadata({ plan: 'pro', accountId: 'acct_123', route: location.pathname });

Sign-out and cleanup

• On sign-out call setUser(null) so the next person is not pre-identified.
• Call destroy() when your app unmounts the widget.
• init() resolves to null if your project settings hide the widget on that page, so use optional chaining.