Add a web feedback widget (agentback/web and widget.js), release 0.3.0

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.3.0
+
+- Web feedback widget for the people using your web app: `agentback/web` (`createFeedbackWidget`) and a script-tag build at `agentback/widget.js`, served at https://agentback.app/widget.js.
+- New `web` source and `page` field on reports.
+
 ## 0.1.1
 
 - Fix release package checks for npm 12's JSON output.

README.md

@@ -1,13 +1,13 @@
 # agentback
 
-Collect feedback from AI agents inside the MCP server, CLI, or API you already ship, and manage it in the [Agentback](https://agentback.app) inbox.
+Collect feedback from AI agents and the people using your product, inside the MCP server, CLI, API, or web app you already ship, and manage it in the [Agentback](https://agentback.app) inbox.
 
 ```sh
 npm install agentback
 ```
 
-Requires Node.js 20 or newer; the core client also runs on Cloudflare Workers,
-Deno, and Bun. The MCP integration also needs the MCP TypeScript SDK (either
+Requires Node.js 20 or newer; the core client also runs in browsers, Cloudflare
+Workers, Deno, and Bun. The MCP integration also needs the MCP TypeScript SDK (either
 `@modelcontextprotocol/sdk` 1.23+ or `@modelcontextprotocol/server` 2.x) and
 `zod` 4.2+; the core client and CLI helpers can be used without those optional
 peers.
@@ -60,6 +60,54 @@ program
 
 `mycli feedback [--category bug|feature_request|docs|other] [--intent text] [--request-id id] [--model name] [--json] <message>`; use `-` to read the message from stdin.
 
+## Web app
+
+Let the people using your web app send feedback from a small panel. One script tag, using the public key:
+
+```html
+<script
+  src="https://agentback.app/widget.js"
+  data-project="af_..."
+  async
+></script>
+```
+
+Or from npm, in apps with a bundler:
+
+```ts
+import { createFeedbackWidget } from 'agentback/web';
+
+const feedback = createFeedbackWidget({
+  projectKey: 'af_...',
+  product: 'My product',
+});
+```
+
+A floating Feedback button opens the panel. Reports carry source `web` and the page's address (origin and path, never the query string). The panel follows the visitor's light or dark setting and uses your page's font.
+
+| Option (`data-` attribute) | Default                     |                                                                                                                                     |
+| -------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `color`                    | `orange`                    | `orange`, `neutral`, `blue`, `violet`, or any hex colour                                                                            |
+| `launcher`                 | `true`                      | `false` hides the floating button; open the panel from your own menu                                                                |
+| `position`                 | `bottom-right`              | or `bottom-left`                                                                                                                    |
+| `theme`                    | `auto`                      | `light` or `dark` to match your app's own switch                                                                                    |
+| `categories`               | `bug,feature_request,other` | order, relabel (`bug:Report a bug,other`) or hide (`false`) the types; stored values stay `bug`, `feature_request`, `docs`, `other` |
+| `product`                  |                             | your product's name, used in the thank-you message                                                                                  |
+| `locale`                   | page `lang`                 | `en` or `zh`; override any string with the `text` option                                                                            |
+| `page`                     | `true`                      | `false` leaves out the page address                                                                                                 |
+
+To open it from your own button, mark the element; no code needed:
+
+```html
+<button data-agentback-open>Feedback</button>
+```
+
+The widget is also available as `window.Agentback` after the `agentback:ready` event (the return value of `createFeedbackWidget` from npm): `open(anchor?)`, `close()`, `toggle()`, `identify(identity | null)`, `setTheme(theme)` and `destroy()`.
+
+To attach the signed-in user, sign their account on your backend as in [Verified accounts](#verified-accounts), then pass both to the page: `data-account` and `data-signature` on the script tag, or `Agentback.identify({ account, signature })` after sign-in. Without a signature, reports stay anonymous.
+
+To build your own form instead, call `send()` from the browser with `{ source: 'web' }` and an optional `page`.
+
 ## Verified accounts
 
 To know which of your users sent a report, sign their account reference on your backend and pass it to the integration: