Feedback widget in Docusaurus
Tags: webdev, javascript, docusaurus, documentation
Published: 2022-07-21 12:11:32

Feedback is essential to improve any product. The documentation page is nothing different apart from other parts of the product. It’s crucial to product growth to collect user feedback. This post will help you add a feedback widget to your docusaurus documentation.

***

![](https://cdn-images-1.medium.com/max/1600/0*M7eKPbe0nCIXP0wF.png)

Hi, I created [Happy React](https://happyreact.com/). Happy React is a multi-purpose feedback widget. Using it you can add widgets to your documentation pages. I took care of performance and ease of using it.

Main features:

* Free (soon open-source)
* Headless styling
* Lightweight & Blazing fast widget
* Analytics

![](https://cdn-images-1.medium.com/max/1600/1*zCfeTz7YNkPQb-hZ3dlAyA.png)

***

### Let’s start

First, we need to eject `DocItemFooter` using [Swizzle](https://docusaurus.io/docs/swizzling). Run the swizzle command:

```bash
npm run swizzle
```

Then, choose `@docusaurus/theme-classic` and from a dropdown list pick `DocItemFooter`.

After this operation, we should have `DocItemFooter` in `src/theme` directory. From now on, Docusaurus will be importing this component instead original one.

Next, we need to create our `Feedback`component and attach it in `DocItemFooter`.

```jsx
// src/components/Feedback/index.js
import React from 'react';
export default function Feedback({ resource }) {
  return (
    <div>
      Our feedback component for page {resource}
    </div>
  );
}
```

Then we need to use this component:

```jsx
import React from 'react';
[...]
import Feedback from '../../components/Feedback';
export default function DocItemFooter(props) {
[...]
  const {
    editUrl,
    lastUpdatedAt,
    formattedLastUpdatedAt,
    lastUpdatedBy,
    tags,
    unversionedId, // You need to get current page id 
  } = metadata;
[...]
return (
    <>
      <Feedback resource={unversionedId} />
      <footer
        className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}
      >
        {canDisplayTagsRow && <TagsRow tags={tags} />}
        {canDisplayEditMetaRow && (
          <EditMetaRow
            editUrl={editUrl}
            lastUpdatedAt={lastUpdatedAt}
            lastUpdatedBy={lastUpdatedBy}
            formattedLastUpdatedAt={formattedLastUpdatedAt}
          />
        )}
      </footer>
    </>
  );
}
```

After that, we should get our feedback component below the content on every documentation page.

![](https://cdn-images-1.medium.com/max/1600/1*XoWkeJ41rq4Vuf3nDOGnNg.png)The effect after properly adding the Feedback component

We are all set! We can use this component to set up your feedback widget. Here is a [StackBlitz](https://stackblitz.com/edit/happy-react-docusaurus?file=src/theme/DocItemFooter/index.js) where you can see all code.

In the next part of this post, I will show you how to set up Happy React to collect feedback. **Although, if you don’t want to use it you can check the** [**React Native docs feedback componen**](https://github.com/facebook/react-native-website/blob/main/website/core/DocsRating.js)**t for reference.**

### What’s next?

Check [Happy React docusaurus integration](https://happyreact.com/docs/recipes/docusaurus) for a blazing fast and robust feedback widget integration with analytics.