Add a feedback widget to your web app

Agentback's web widget gives the people using your web app a Feedback button and a small panel. Their reports land in the same inbox as reports from agents, with the page they were on. For an overview, see the feedback widget.

Add the script tag

Add it once, just before </body> in the layout every page shares: index.html, your root layout, or your base template. The project key is safe in page source.

html
<script
  src="https://agentback.app/widget.js"
  data-project="af_..."
  data-product="Your product"
  async
></script>

Or install it from npm

If your app has a bundler, call this once in the browser (never during server rendering):

sh
npm install agentback

ts
import { createFeedbackWidget } from 'agentback/web';
createFeedbackWidget({ projectKey: 'af_...', product: 'Your product' });

Make it match your app

The panel follows the visitor's light or dark setting, uses your page's font, and is orange by default.

Attribute (npm option)	Use
`data-color` (`color`)	`neutral`, `blue`, `violet` or a hex colour to match your brand
`data-color-dark`	A different button colour in dark mode (npm: `color: { light, dark }`)
`data-text-color` (`textColor`)	The button's text colour; `data-text-color-dark` for dark mode
`data-launcher="false"`	Hide the floating button when your app has a menu or header to open it from
`data-agentback-open`	Put on your own Feedback menu item; clicking it opens the panel next to it
`data-theme` (`theme`)	`light` or `dark` when your app has its own theme switch; call `Agentback.setTheme()` on change
`data-categories`	Relabel, reorder or hide the types, e.g. `bug:Report a bug,feature_request:Suggestion`
`data-locale` (`locale`)	`en` or `zh`; defaults to the page's `lang`

Know who sent it

Reports are anonymous unless they carry a verified account. Once a person signs in, pass their account ID and a signature from your backend:

ts
window.Agentback?.identify({ account: accountId, signature });

Server-rendered pages can put data-account and data-signature on the script tag instead. See verified accounts for how to sign the ID.

Test it

Open your app, click Feedback, and send a test report. It appears in your inbox with source web and the page's address.

Hand the setup to your coding agent

Paste one prompt into Claude Code, Cursor or Codex. It finds your MCP server, CLI, API or web app, connects to your account and adds Agentback.

Create a free inbox

HTTP API Verified accounts