JavaScript snippet

The lowest-level way to load the widget — a script tag with no SDK or GTM.

Last reviewed

JavaScript snippet

This is the lowest-level way to load the widget. A single script tag, no package manager, no GTM, no SDK — just a URL and a browser global.

Most teams are better served by the Google Tag Manager, React SDK, or JavaScript SDK. Use the snippet when none of those fit your setup.

Add the script

HTMLindex.html
<scriptasyncsrc="https://cdn.getuserfeedback.com/widget/loader/v1/YOUR_API_KEY/loader.js"data-api-key="YOUR_API_KEY"></script>

If a survey should only display after the current app version supports a feature, send capabilities on the script tag:

HTMLindex.html
<scriptasyncsrc="https://cdn.getuserfeedback.com/widget/loader/v1/YOUR_API_KEY/loader.js"data-api-key="YOUR_API_KEY"data-capabilities="checkout.drawer,messages.compose"></script>

You can also pass JSON when you need extra metadata:

HTMLindex.html
<scriptasyncsrc="https://cdn.getuserfeedback.com/widget/loader/v1/YOUR_API_KEY/loader.js"data-api-key="YOUR_API_KEY"data-capabilities='[{"key":"checkout.drawer","source":"host-app"}]'></script>

See Capabilities.

Browser global

Once loaded, the widget exposes window.__getuserfeedback with the same capabilities as the SDK:

Main methods

  • flow(flowId).open()
  • flow(flowId).prefetch()
  • flow(flowId).prerender()
  • flow(flowId).close()
  • identify(userId, traits?, options?)
  • identify(traits, options?)
  • identify(traits, undefined, options?)
  • track(eventName, properties?, options?)
  • configure(updates)
  • reset()

configure(updates) accepts the same runtime updates as the SDK, including capabilities:

HTMLindex.html
<script>window.__getuserfeedback?.configure({capabilities: ["checkout.drawer", "messages.compose.v2"],});</script>

Multi-instance helpers

If you run more than one instance on the same page:

  • instances() — list active instance IDs
  • use(instanceId) — target a specific instance

Open-request hook

onOpenRequested(callback) lets you observe open requests before the survey renders. Use it when your app needs to coordinate the opening behavior with its own UI.

Track events

We recommend sending product events server-side through an integration such as Segment. If client-side tracking fits your app better, use track().

HTMLindex.html
<script>window.__getuserfeedback?.track("Checkout Started", {plan: "pro",source: "billing_page",});</script>

Events sent before and after login can resolve into the same profile through Identity resolution. See Events for reference.

Use options.externalIds when an identify or track call carries an identifier from another system. The traits-only form can take options as the second argument. Do not put Segment-shaped externalIds in traits or event properties:

HTMLindex.html
<script>window.__getuserfeedback?.identify({ email: "jane@example.com" }, {externalIds: [{id: "gid://shopify/Customer/123",type: "shopify_customer_id",collection: "users",encoding: "none",},],});</script>