@conclude-fyi/react is the recommended way to integrate Conclude into a React or Next.js application. The widget renders directly into your DOM (Shadow DOM for CSS isolation), giving you native screenshot capture without browser prompts and a tighter integration with your auth and state.
Install
npm install @conclude-fyi/react
# or
pnpm add @conclude-fyi/react
Add the Provider
Wrap your app with ConcludeProvider. In Next.js, put it in a "use client" providers file.
// app/providers.tsx
"use client";
import { ConcludeProvider } from "@conclude-fyi/react";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ConcludeProvider
apiKey={process.env.NEXT_PUBLIC_CONCLUDE_API_KEY!}
submitter={{
externalId: currentUser.id,
name: currentUser.name,
email: currentUser.email,
companies: [
{ id: "co_acme", name: "Acme Inc", monthlySpend: 5000 }
],
}}
>
{children}
</ConcludeProvider>
);
}
// app/layout.tsx
import { Providers } from "./providers";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
Add the feedback button
Drop FeedbackButton anywhere in your tree. Theme, label, position, and enabled modes are pulled from your dashboard config automatically.
import { FeedbackButton } from "@conclude-fyi/react";
// Uses your dashboard config (theme, modes, colors):
<FeedbackButton />
// Override specific props if needed:
<FeedbackButton position="bottom-left" label="Bug report" accentColor="#6366f1" />
Other components
Inline board
Render the full feedback board inline (uses an iframe).
import { FeedbackBoard } from "@conclude-fyi/react";
<FeedbackBoard sort="most_voted" />
Custom form
A bare form you style yourself.
import { FeedbackForm } from "@conclude-fyi/react";
<FeedbackForm
onSubmit={(item) => console.log("Submitted:", item)}
placeholder="What can we improve?"
/>
Programmatic submission
Submit feedback from your own UI (or an event handler) using the useConclude hook.
import { useConclude } from "@conclude-fyi/react";
function MyComponent() {
const { submitFeedback } = useConclude();
async function handleClick() {
await submitFeedback({
title: "Feature request",
body: "I would love to see...",
});
}
}
Capabilities
Native rendering
The SDK renders directly in your app using Shadow DOM. CSS isolation means your styles don't bleed in and Conclude's don't bleed out.
Screenshots
Screenshots use html2canvas — instant, no browser prompt.
Recording
Recording captures screen + optional camera + optional mic, composited into a single WebM via video-stream-merger. The user opts in to camera and mic with two toggles before recording starts. Camera renders as a circular pip in the bottom-right.
Content Security Policy
If your app sets a CSP, you'll need:
connect-src 'self' https://www.conclude.fyiimg-src 'self' https://www.conclude.fyi blob: data:media-src 'self' https://www.conclude.fyi blob:(for recording)
The React SDK does not need frame-src or script-src — it renders natively.