React SDK

@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.fyi
img-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.

→ Content Security Policy