# Installing and opening the widget

## The snippet

On your site's page in Userreact, copy the snippet from the **Install the widget** card. It looks like this, with your own public key:

```html
<script type="module" data-userreact
        data-key="ur_pub_…"
        src="…/widget/v1/ur.js"></script>
```

Paste it into every page where you want the widget, in the `<head>` or just before the closing `</body>` tag. Put it as early in the page as you can: the widget records JavaScript errors only from the moment it loads, so errors thrown before it runs are missed.

The page must be served from the site's domain, one of its subdomains, or one of its **Other accepted origins**; reports from anywhere else are rejected. The Dashboard's **Widget** card shows whether the widget is installed and reporting.

## Opening the widget from your own link or button

Any link with `href="#userreact"` or any element with a `data-userreact-open` attribute opens and closes the widget:

```html
<a href="#userreact">Send feedback</a>
<button data-userreact-open="suggestion">Suggest an idea</button>
```

`data-userreact-open="bug"` or `data-userreact-open="suggestion"` opens the widget on that form type, when the site collects both. These triggers work even if they are added to the page later, for example by a single-page app or a menu.

## The floating button

The **Floating button** setting (on the site's **Edit** page) decides whether the round button shows in the corner:

- **Automatic** (default): hidden when your page has its own trigger link when the widget loads, shown otherwise.
- **Always show**.
- **Never show (open it from your own link)**.

Automatic checks for a trigger only once, when the widget loads. In a single-page app whose trigger link appears later, choose **Never show** and open the widget from your link.

You can override the setting for one page with `data-launcher="show"`, `"hide"` or `"auto"` on the script tag.

## Opening the widget from JavaScript

Once the widget has loaded, `window.userreact` has:

- `window.userreact.open()` — open it, optionally with `'bug'` or `'suggestion'`
- `window.userreact.close()`
- `window.userreact.toggle()` — optionally with `'bug'` or `'suggestion'`

Calls made before the widget has loaded can be queued:

```js
(window.userreact ??= {}).q = [['open']];
```

## Language

The widget speaks English, French, Spanish and German. It picks, in order: the language the visitor chose in the widget, a `data-locale` attribute on the script tag, the site's **Widget language** setting, the visitor's browser language, then English. Visitors can switch language from the widget itself.

## Other script tag options

- `data-collects`: override what the widget collects on this page.
- `data-locale`: force a language, for example `data-locale="fr"`.
- `data-launcher`: `show`, `hide` or `auto`, as above.

Elements with the `data-ur-mask` attribute are hidden from screenshots. See [What your visitors see](widget-visitors.md).