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 flow = client.flow("YOUR_FLOW_ID");const container = document.getElementById("feedback-dialog-body");if (container) {flow.open({ container });}

Both fire-and-forget and await work correctly here. See JavaScript SDK reference.

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

React SDK

import * as Dialog from "@radix-ui/react-dialog";import { useFlow } from "@getuserfeedback/react";function FeedbackDialog() {const { containerRef, setOpen, shouldRenderContainer } = useFlow({flowId: "YOUR_FLOW_ID",container: "custom",});return (<Dialog.Root onOpenChange={setOpen} open={shouldRenderContainer}><Dialog.Trigger>Open feedback</Dialog.Trigger><Dialog.Content><div ref={containerRef} /></Dialog.Content></Dialog.Root>);}

The useFlow hook also returns width and height if you want to size your container more precisely.

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