@usepatch/widget
v0.3.0
Published
Embeddable feedback widget for Patch. Lets clients pin annotations directly on your preview deployments.
Maintainers
simondemeulemeesterReadme
@usepatch/widget
The embeddable feedback widget for Patch. Drop it into your preview deployments and clients can pin comments directly on the page, no account required.
Works in any React app: Next.js, Vite, React Router, Astro, and more.
Install
npm install @usepatch/widgetRequires React 19 or later.
Usage
Render the Patch component once, near the root of your app:
import { Patch } from "@usepatch/widget";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<Patch />
</body>
</html>
);
}In Astro, render it as a client island in your layout:
---
import { Patch } from "@usepatch/widget";
---
<html>
<body>
<slot />
<Patch client:only="react" />
</body>
</html>The widget needs your project token, found in your Patch project settings. It resolves in this order:
- The
projectTokenprop:<Patch projectToken="pk_..." /> NEXT_PUBLIC_PATCH_TOKEN(Next.js)VITE_PATCH_TOKEN(Vite / React Router)PUBLIC_PATCH_TOKEN(Astro)
Project tokens are publishable keys, safe to expose in client-side code.
Props
| Prop | Type | Description |
| --- | --- | --- |
| projectToken | string | Project token. Overrides env-var resolution. |
| apiBase | string | Base URL for the Patch API. Defaults to https://app.usepatch.dev. |
How it works
The widget renders inside a shadow root, so its styles never collide with your app's. Visitors identify with just a name and email, leave pinned annotations, and reply in threads. You see everything in your Patch dashboard.
License
MIT