---
title: 在用户所在的地方收集反馈 | Make This Better
description: 一个 script 标签。截图、控制台日志和元数据——自动捕获。
url: https://makethisbetter.dev/zh-CN/widget.md
canonical: https://makethisbetter.dev/zh-CN/widget
locale: zh-CN
site: Make This Better
image: https://makethisbetter.dev/assets/opengraph-5c1e3cac.png
alternates:
  en: https://makethisbetter.dev/widget
  zh-CN: https://makethisbetter.dev/zh-CN/widget
  x-default: https://makethisbetter.dev/widget
---

> HTML version: https://makethisbetter.dev/zh-CN/widget
> Site index for agents: https://makethisbetter.dev/llms.txt

# Widget SDK

Collect feedback right where users are. One script tag. Screenshot, console logs, and metadata — captured automatically.

## Install

```html
<script src="https://unpkg.com/makethisbetter@1"></script>
```

~42 kB gzipped. No dependencies. Works everywhere.

## What it captures

Every feedback submission automatically includes:

- **Screenshot** — Full-page or element-level, with user annotations (pins, circles, text)
- **DOM snapshot** — The HTML state at the moment of report, including CSS selectors for pinned elements
- **Console errors** — JavaScript errors and warnings from the browser console
- **URL** — The page URL where the feedback was submitted
- **Viewport** — Browser window dimensions and device pixel ratio
- **User agent** — Browser and OS information
- **Metadata** — Custom data you attach via the SDK API

## Configuration

```html
<script src="https://unpkg.com/makethisbetter@1"></script>
<script>
  MakeThisBetter.init({
    projectKey: "mtb_proj_YOUR_KEY",
    tabText: "Report a problem",
    brandColors: {
      primary: "#2563eb",
      hover: "#1d4ed8",
      active: "#1e40af",
      onPrimary: "#ffffff"
    }
  })
</script>
```

`tabText` changes the docked button label. Leave it out to use the visitor's
language. `brandColors` applies an explicit `primary`, `hover`, `active`, and
`onPrimary` semantic group across the complete Widget. Every value must be a
six-digit hex color; the Widget uses the group as supplied and does not invent
missing shades. Status colors for success, errors, warnings, and recording stay
unchanged.

Project Settings generates a minimal project-key snippet; color configuration
lives in the installation code and Dashboard changes do not update deployed
scripts. When you install with
`/makethisbetter setup`, the agent recommends `brandColors` only when your
design system already exposes the complete semantic group.

The widget appears as a floating button. Users can:

1. Click any element to pin it
2. Draw circles or rectangles to highlight areas
3. Add text annotations
4. Write a description of the issue

## Reporter identity

For authenticated users, use `userTokenFn` to return a short-lived JWT created by
your server. Never put the Signing Secret in browser code.

```javascript
MakeThisBetter.init({
  projectKey: "mtb_proj_YOUR_KEY",
  userTokenFn: async () => {
    const response = await fetch("/feedback/identity-token")
    return (await response.json()).token
  }
})
```

## npm package

```bash
npm install makethisbetter
```

- Package: [makethisbetter on npm](https://www.npmjs.com/package/makethisbetter)
- Source: [github.com/makethisbetter/makethisbetter-js](https://github.com/makethisbetter/makethisbetter-js)


---

## More from Make This Better

- [Home](https://makethisbetter.dev/zh-CN/.md)
- [隐私](https://makethisbetter.dev/zh-CN/privacy.md)
- [条款](https://makethisbetter.dev/zh-CN/terms.md)
- [Site index for agents](https://makethisbetter.dev/llms.txt)

Contact: contact@makethisbetter.dev