---
title: Feedback
description: Receive feedback from your users
---

## Overview

Feedback is crucial for knowing what your reader thinks, and help you to further improve documentation content.

You can integrate a simple feedback system with Fumadocs.

## Installation

Install it using **Fumadocs CLI**.

```npm
npx @fumadocs/cli@latest add feedback
```

### Page Feedback

To create a page-level feedback UI, add the `<Feedback />` component to your docs page:

```tsx
import { DocsPage } from 'fumadocs-ui/layout/docs/page';
import { Feedback } from '@/components/feedback/client';

export default async function Page() {
  return (
    <DocsPage>
      {/* at the bottom of page */}
      <Feedback
        onSendAction={async (feedback) => {
          'use server';

          console.log(feedback);
        }}
      />
    </DocsPage>
  );
}
```

- `onSendAction`: fired when user submit feedback.

You can specify a server action, or any function (in client component) to handle the user feedback.
For example, to report user feedback as a `on_rate_docs` event on PostHog.

### Feedback Block

You can also configure block-level feedback (e.g. a feedback popover as user select text).

Add the `remark-block-id` Remark plugin:

```tsx title="source.config.ts (Fumadocs MDX)"
import {
  remarkBlockId,
  type RemarkBlockIdOptions,
} from 'fumadocs-core/mdx-plugins/remark-block-id';
import { defineConfig } from 'fumadocs-mdx/config';

const blockIdOptions: RemarkBlockIdOptions = {
  addDataAttribute: 'feedback',
};

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [
      // [!code ++]
      [remarkBlockId, blockIdOptions],
    ],
  },
});
```

Then, wrap your page content under the `FeedbackText` component:

```tsx
import { DocsPage } from 'fumadocs-ui/layout/docs/page';
import { FeedbackText } from '@/components/feedback/client';

export default async function Page() {
  return (
    <DocsPage>
      <FeedbackText
        onSendAction={async (feedback) => {
          'use server';

          console.log(feedback);
        }}
      >
        {/* the content of page */}
      </FeedbackText>
    </DocsPage>
  );
}
```

- `onSendAction`: fired when user submit feedback.

<Callout type='info' title='Good to know'>

`remark-block-id` generates a block ID from its content and order in the page, hence it is also possible to track the blocks from 3rd party services.

</Callout>

### Integrating with GitHub Discussion

To report your feedback to GitHub Discussion, you can copy this file as a starting point:

<include cwd meta="title='lib/github.ts'">
  ./lib/github.ts
</include>

1. Create your own GitHub App and obtain its app ID and private key.
2. Fill required environment variables.
3. Replace constants like `owner`, `repo`, and `DocsCategory`.
4. Use the `onPageFeedbackAction` & `onBlockFeedbackAction` in your feedback components.
