---
title: Collect feedback right where users are | Make This Better
description: One script tag. Screenshot, console logs, and metadata — captured automatically.
url: https://makethisbetter.dev/widget.md
canonical: https://makethisbetter.dev/widget
locale: en
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/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>
```

~23 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"
  data-project="your-project-key"></script>
```

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

## Identity verification

For authenticated users, pass identity data to link feedback to your user records:

```javascript
MakeThisBetter.identify({
  id: "user_123",
  email: "user@example.com",
  name: "Jane Doe"
});
```

## 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/.md)
- [Privacy](https://makethisbetter.dev/privacy.md)
- [Terms](https://makethisbetter.dev/terms.md)
- [Site index for agents](https://makethisbetter.dev/llms.txt)

Contact: contact@makethisbetter.dev