@web-my-money/feedback
v0.12.0
Published
Standalone drop-in feedback widget for WMM mini-apps — zero runtime dependencies, app-agnostic, bring-your-own backend
Readme
@web-my-money/feedback
Drop-in feedback widget for WMM mini-apps. Zero runtime dependencies, app-agnostic, bring-your-own backend.
Not part of @web-my-money/design-system on purpose — this installs into an app that may have no design system, no Tailwind config, and no globals.css it is allowed to touch.
Install
npm install @web-my-money/feedbackThat is the whole install. No .npmrc, no token, no Vercel env var — this package is on public npm, like @web-my-money/tokens and the rest of the design system.
If you are migrating an app that still has an
@web-my-moneyscope redirect in its.npmrc, delete it. It now only routes you to a registry that will ask for auth you no longer need.
React 18 or 19 is an optional peer — the core and server entry points do not need React at all.
Two-step integration
1. Mount the widget
// app/layout.tsx
import { FeedbackWidget } from "@web-my-money/feedback/react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<FeedbackWidget appId="wmm-tasks" />
</body>
</html>
);
}The widget already carries "use client", so it mounts inside a Server Component layout with no wrapper.
2. Implement the endpoint
// app/api/feedback/route.ts
import { createFeedbackHandler } from "@web-my-money/feedback/server";
export const POST = createFeedbackHandler({
store: async (submission) => {
const { data, error } = await supabase
.from("feedback")
.upsert({
submission_id: submission.submissionId,
app_id: submission.context.appId,
page_path: submission.context.pagePath,
category: submission.category,
message: submission.message,
context: submission.context,
reporter: submission.reporter ?? null,
}, { onConflict: "submission_id" })
.select("id")
.single();
if (error) throw error;
return data.id;
},
});That is the whole integration. Defaults: POST to /api/feedback, credentials: "same-origin", all five categories, English labels.
Upsert, do not insert. The widget retries, and
submissionIdis the idempotency key. Handlers must be idempotent (WMM standard 8).
Screenshots and markup
This package ships built-in canvas capabilities for screenshot capture, file upload, paste, drag-and-drop, and markup (arrows, highlights, freehand, text pins, and solid redaction).
Out-of-the-box (default)
FeedbackWidget has ScreenshotMarkup enabled by default! You don't need to pass any custom attachment slot:
import { FeedbackWidget } from "@web-my-money/feedback/react";
<FeedbackWidget
appId="wmm-tasks"
onImprove={async (draft, context) => {
// Optional AI rewrite hook ("Improve with AI")
const res = await fetch("/api/feedback/assist", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ message: draft.message, category: draft.category, context }),
});
return res.json();
}}
/>Custom attachment slot or standalone markup component
If you want to customize the attachment renderer:
import { FeedbackWidget, ScreenshotMarkup } from "@web-my-money/feedback/react";
<FeedbackWidget
appId="wmm-tasks"
renderAttachments={(slotProps) => (
<ScreenshotMarkup {...slotProps} maxAttachments={3} />
)}
/>Low-level screenshot API
If you are building custom tooling without React:
import { startScreenshotMarkup, attachmentFromDataUrl } from "@web-my-money/feedback";
const session = await startScreenshotMarkup({ container: modalDiv });
// When user finishes markup:
const attachment = session.toAttachment({ fileName: "bug.png" });In-view Section Detection (data-feedback-section)
Tag major sections in your layout with data-feedback-section="Section Name" (e.g. <div data-feedback-section="Billing Overview">). The widget reads the nearest in-view section and includes it in context.
Portal & SSR Behavior
FeedbackWidget renders inline with position: fixed without using React portals by default. This makes it 100% safe to mount in Next.js RootLayout SSR without hydration mismatches or document.body dependencies.