# Widget

Add a feedback button to your site and check that reports reach Signals.

> **Plan:** Available on the Studio plan.

The widget puts a feedback button on your own website. Visitors report a bug, suggest an idea or leave feedback without leaving the page, and it lands in [User Signals](https://getfrostbyte.dev/docs/signals) like a portal post.

**When to use it.** Use the widget when people find problems inside your product, where a link to the portal would send them away. The [Feedback Portal](https://getfrostbyte.dev/docs/feedback-portal-overview) is still where they vote and follow progress.

## Install it

1. Open **User Signals → Settings** and go to the **Embed** tab.
2. Choose a **Position** and a **Button** style. Theme and accent colour come from the **Appearance** tab.
3. Choose **Copy code** and paste it before `</body>` in your site's shared layout, so it shows on every page.
4. Open your site, send a test report, and check it arrives in User Signals.

![The Embed tab of Feedback portal settings: Position and Button pickers above the installation code and Copy code.](https://getfrostbyte.dev/images/docs/portal-embed.webp "The code updates as you change options. Copy it again after any change.")

The code looks like this, with your portal's address in `data-hub`:

```html
<script
  src="https://getfrostbyte.dev/widget.js"
  data-hub="https://rollcall.getfrostbyte.dev"
  data-types="bug,feature,general">
</script>
```

## Options

The settings write these attributes for you. You can also edit them by hand.

| Attribute | Choices |
|---|---|
| `data-theme` | `light`, `dark` or `auto` (the default, follows the visitor's system) |
| `data-accent` | A hex colour such as `#4291e0` |
| `data-position` | `bottom-right` (default) or `bottom-left` |
| `data-launcher` | `icon` (default), `pill`, or `hidden` for your own button |
| `data-types` | Any of `bug`, `feature` and `general`, comma-separated |

A type you've turned off in the portal's settings never shows, even if it's listed here.

## Open it from your own button

Set `data-launcher="hidden"`, then add the attribute to any element:

```html
<button type="button" data-frostbyte-widget="bug">Report a problem</button>
```

Or open and close it from JavaScript once the script has loaded:

```js
FrostbyteWidget.open('bug');
FrostbyteWidget.close();
```

## Tell it who's signed in

If your visitors are signed in to your app, pass their details so they don't have to type an email:

```js
FrostbyteWidget.identify({ email: 'jane@example.com', name: 'Jane Doe' });
```

Or add `data-user-email` and `data-user-name` to the script tag. The name shows as **Reported by** on the signal.

## Things to note

- **Bug reports include the page and browser.** The signal shows the page address and browser, so you can reproduce the problem.
- **Identity isn't verified.** Anything passed to `identify` is taken on trust, so don't use it for decisions that need a real login.
- **Strict Content Security Policy?** Add `https://getfrostbyte.dev` to `script-src` and your portal's address to `frame-src`.
- **Nothing appears?** Check the script loads, the `data-hub` address matches your portal, the portal is enabled and User Signals is on.
- **It needs Studio.** If the project owner moves off Studio, the widget's panel stops loading on your site until they upgrade again. The portal itself keeps working.

## Related

- [Feedback Portal](https://getfrostbyte.dev/docs/feedback-portal-overview): the public page behind the widget.
- [Custom domain](https://getfrostbyte.dev/docs/feedback-portal-domains): serve the portal from your own subdomain.
- [Signals](https://getfrostbyte.dev/docs/signals): review what arrives.