Conditional Display: Show Feedback at the Right Time

The script tag starts the widget on every page it is on. To show it only on some pages, or only to some people, start it yourself.

Start the widget in code

Replace the script tag with a module script that imports the class and creates the widget:

<script type="module">
  import { QaidFeedback } from "https://unpkg.com/@qaiddev/thumbs-embed@1.9.0/dist/loader.js";

  const hiddenOn = ["/checkout", "/login", "/signup"];
  const path = window.location.pathname;

  if (!hiddenOn.some((prefix) => path.startsWith(prefix))) {
    window.qaidFeedback = new QaidFeedback({
      endpoint: "https://qaid.dev/api/feedback",
      apiKey: "YOUR_PROJECT_KEY",
    });
  }
</script>

With a bundler, import { QaidFeedback } from "@qaiddev/thumbs-embed" gives you the same class. Take the old script tag out: it starts a widget of its own, and the two do not know about each other.

Nothing appears until new runs. Common conditions:

Show it	Test before new
Only to signed-in people	Your own session check
Only in one part of the site	location.pathname.startsWith("/app")
Everywhere but checkout and sign-in	A list of prefixes to skip, as above
After onboarding is finished	A flag from your user record
To half your visitors	A stable hash of the user id, so a person sees the same thing on every visit

Take it down and put it back

destroy() removes the buttons and the covering layer, stops recording the console, and drops every listener the widget added. Nothing stops you creating two widgets, so keep one reference and check it:

let widget = null;

export function showFeedback() {
  if (widget) return;
  widget = new QaidFeedback({
    endpoint: "https://qaid.dev/api/feedback",
    apiKey: "YOUR_PROJECT_KEY",
  });
}

export function hideFeedback() {
  widget?.destroy();
  widget = null;
}

Call hideFeedback() on the way into checkout or on sign-out, and showFeedback() when you want it back.

The widget stays on the screen through client-side page changes: Astro’s view transitions and routers that swap out the page body don’t remove it. If it should come and go with the route, call the two functions from your router’s navigation hook.

A vote is saved before the message box opens, so destroy() with the box open loses only the unsent message. Console lines logged while the widget was down are not in the next report.

Let visitors hide it

The × at the start of the row shows when the pointer or keyboard focus is on the row. Clicking it hides the widget in that browser for good. The choice is stored under qaid_hide_feedback_ plus your project key in localStorage, and nothing in the widget brings it back.

To take the × away, set hideDismiss: true (data-hide-dismiss="true"). A widget mounted in a container never has one, and ignores a stored choice.

To let people undo it, give them a link of your own that clears the choice and starts the widget again:

function bringFeedbackBack() {
  localStorage.removeItem("qaid_hide_feedback_YOUR_PROJECT_KEY");
  hideFeedback();
  showFeedback();
}

A widget with no apiKey stores the choice under qaid_hide_feedback.

Keep it out of sight until it is wanted

incognito: true (data-incognito="true") draws the buttons fully transparent until the pointer or keyboard focus reaches them. Clicking one makes them visible for the rest of that page view.

They still take up their corner and still catch clicks meant for anything under them. On a touch screen there is no pointer to reveal them, so they cannot be found. For a page where the widget should not be seen at all, don’t start it there.