Containers

By default, the widget opens in a floating frame. If you want it inside your own dialog, panel, or sidebar, you can pass a custom container.

This is the most advanced level of visual control — see Look & feel for the broader picture.

How it works

Instead of the widget managing its own positioning, you provide a DOM element (or a React ref) and the widget renders inside it. You control the surrounding UI — the dialog chrome, the backdrop, the close button.

JavaScript SDK

import { createClient } from "@getuserfeedback/sdk";

const client = createClient({ apiKey: "YOUR_API_KEY" });
const run = client.flow("YOUR_FLOW_ID");
const container = document.getElementById("feedback-dialog-body");

if (container) {
  await run.open({ container });
}

See JavaScript SDK reference for the full open() options.

React SDK

import { useFlow } from "@getuserfeedback/react";

function FeedbackPanel() {
  const { containerRef, setOpen, shouldRenderContainer } = useFlow({
    flowId: "YOUR_FLOW_ID",
    container: "custom",
  });

  return (
    <>
      <button onClick={() => void setOpen(true)}>Open feedback</button>
      {shouldRenderContainer ? <div ref={containerRef} /> : null}
    </>
  );
}

The useFlow hook also returns width and height — recommended dimensions you can optionally apply to your container for the best fit.

See React SDK reference for the full useFlow() options.