Install the widget

import { useEffect } from "react";
 
type ReqioWidgetProps = {
  projectId: string;
  identityToken?: string;
};
 
export function ReqioWidget({ projectId, identityToken }: ReqioWidgetProps) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://reqio.app/widget.js";
    script.async = true;
    script.dataset.projectId = projectId;
    if (identityToken) script.dataset.identityToken = identityToken;
    document.body.appendChild(script);
 
    return () => {
      script.remove();
      document.getElementById("reqio-widget-root")?.remove();
    };
  }, [projectId, identityToken]);
 
  return null;
}

The cleanup removes both the script element and the mounted reqio-widget-root element, so navigating away, or unmounting in a test, leaves nothing behind. This also makes the component safe under React StrictMode's dev-only double-invoke: the effect tears down fully between the two runs, and even if it didn't, the widget's own mount guard means a second mount is never created.

Use next/script with the afterInteractive strategy so the widget loads after your page is interactive, without blocking hydration. This works the same way in the App Router and the Pages Router:

import Script from "next/script";
 
<Script
  src="https://reqio.app/widget.js"
  strategy="afterInteractive"
  data-project-id="YOUR_PROJECT_ID"
  data-identity-token={identityToken}
/>

Omit data-identity-token if you are not using signed identity, or pass it once your server has minted a token for the current user.

If you only want the widget on certain routes (a docs section, a signed-in area, a subset of pages), inject the script tag with JavaScript instead of hardcoding it in your HTML:

const script = document.createElement("script");
script.src = "https://reqio.app/widget.js";
script.async = true;
script.dataset.projectId = "YOUR_PROJECT_ID";
document.body.appendChild(script);

Run this wherever your routing logic decides the widget should appear, for example a page-level effect or a router navigation handler. To pass an identity token at the same time, set it before appending the script:

script.dataset.identityToken = token; // optional, minted by your server

Injecting the script this way sets document.currentScript to null, but the loader falls back to querySelector('script[data-project-id]'), so data-project-id and data-identity-token still resolve correctly as long as they are set on the element before it is appended.

You can install the widget through a tag manager instead of editing your site's code directly:

1. Create a new Custom HTML tag.
2. Paste the standard embed snippet into it (the same tag from the top of this page).
3. Choose a Page View trigger scoped to the pages you want the widget on (all pages, or a URL pattern for a subset).
4. Publish the container.

If the tag fires more than once, for example a single-page app that re-triggers page views, or two containers loading on the same page, that's harmless: the widget's mount guard means a second load never creates a second instance.

One limitation: if you're using signed identity (data-identity-token), the token has to be minted by your server for the specific signed-in user, and a tag manager has no access to your server or the current session. Tag managers work well for the anonymous embed. Identity-token setups belong in your application code, not the tag manager.

Add a data-reqio-open attribute to any element. Clicking it opens the widget directly into that flow:

<button data-reqio-open="feature">Request a feature</button>
<a href="#" data-reqio-open="bug">Report a bug</a>

The loader attaches a single delegated click listener on document, so this also works on elements added to the page after the widget script has already loaded, no re-registration needed.

window.Reqio.open("question"); // opens straight into "Ask a question"
window.Reqio.open("updates"); // opens the visitor's activity feed
window.Reqio.open(); // opens the normal chooser

window.Reqio.open is installed the same way as window.Reqio.identify: you can call it before the widget script has finished loading. Calls made early are queued and replayed, in order, once the widget initialises.