Installing and opening the widget
The install snippet, opening the widget from your own link or JavaScript, the floating button and language options.
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:
<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:
<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:
(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 exampledata-locale="fr".data-launcher:show,hideorauto, as above.
Elements with the data-ur-mask attribute are hidden from screenshots. See What your visitors see.