Container Options

This page is only about one decision: should the widget use its default container or render inside yours?

1. Default widget container

This is the fastest path. The SDK opens the flow in its standard floating container and uses the configured theme.

2. Your own container

Use this when the flow should render inside your dialog or panel instead of the default frame.

JavaScript SDK:

const run = client.flow("YOUR_FLOW_ID");
const container = document.getElementById("feedback-dialog-body");

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

React SDK:

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}
    </>
  );
}

Separate path: hosted embeds

If you want a hosted iframe or link instead of the widget container, that is a different install path. Use Embed Surveys instead.