Load it in useVisibleTask$ so it never blocks resumability.
Qwik's whole pitch is that nothing runs on load unless it must. The widget fits that model: gate its init behind useVisibleTask$ so the SDK only downloads once the component is actually visible, not during resume.
npm install @usero/sdkimport { component$, useVisibleTask$ } from '@builder.io/qwik'
export default component$(() => {
// eslint-disable-next-line qwik/no-use-visible-task
useVisibleTask$(async () => {
const { initUseroFeedbackWidget } = await import('@usero/sdk')
const widget = initUseroFeedbackWidget({ clientId: 'YOUR_CLIENT_ID' })
return () => widget.destroy()
})
return <div>{/* your app */}</div>
})Replace YOUR_CLIENT_ID with the id from your Usero dashboard.
Built for Qwik
Importing the SDK inside useVisibleTask$ means Qwik does not pull the bytes during resumability. The widget code downloads only when the component becomes visible.
Qwik does not hydrate the page on load. The widget respects that: nothing of it executes until the visible task fires.
useVisibleTask$ can return a teardown. Returning widget.destroy keeps the instance count correct across client navigations.
The widget state lives in its own DOM root, not in Qwik component state, so there is nothing for Qwik to serialize or resume.
Beamer injects an eager script that defeats the point of resumability. The vanilla SDK loads lazily inside a visible task, so the page resumes with zero widget cost.
FAQ
A top-level import would bundle the SDK into the eager graph and undo resumability. The dynamic import keeps it lazy, so the bytes load only when the task runs.
Yes. Put the visible task in your root component or a layout, and every route inherits the widget without re-initializing it.
No. useVisibleTask$ only fires in the browser when the element is visible. The server render emits nothing for it.
Qwik nudges you toward useTask$ over useVisibleTask$. For a DOM-only side effect like mounting a widget, the visible task is correct, so the disable line is intentional.
Free tier. No credit card. Two-minute install. Cancel by deleting two lines of code.
Install guides