Add comments to your Docusaurus website in 5 minutes
Tags: documentation, javascript, react
Published: 2023-05-09 12:48:53

[Docusaurus](https://docusaurus.io) is one of the best static site generator for blogs and documentation projects. Docusaurus is backed by Meta Open Source team and is quite popular among developer communities for great performance and simple set up.

In this guide, you'll add comments to your [Docusaurus](https://docusaurus.io) documentation project.

## Why do I need comments?

### For documentation

A documentation is the door to your software, and its best advocate. It is also one of the most frequent touch-points with your customers. Collecting comments on your documentation, makes customers feel heard, reduces the threshold for issue reporting, and gives your tech-writers actionable feedback to work on.

### For blog

A blog is a great opportunity to build and empower developer communities. Enabling comments on your blog welcomes healthy discussions and brainstorming between your community members.

## Prerequisites

Before proceeding with this guide, you must have your Docusaurus project setup locally.

To collect comments, likes, and dislikes you'll use [docsly.dev](https://www.docsly.dev). docsly is a user feedback tool for documentation. You can [sign up](https://app.docsly.dev/dashboard) for a free account.

### Get project credentials

To get your project's `publicId`, follow these steps:

1. Open the [dashboard](https://app.docsly.dev/dashboard).
2. Select **development** project from the top navigation bar.
3. Go to **Settings** > **API keys** section.
4. Click **Copy Public ID**.

> You must use the `publicId` from the _development_ project in your dashboard
  while testing locally.

## Installation

Install the latest version of `@docsly/react` package using your favorite package manager.

```shell
pnpm add @docsly/react
# or
yarn add @docsly/react
# or
npm install @docsly/react
```

## Initializing docsly

docsly uses [swizzling](https://docusaurus.io/docs/2.3.1/swizzling#wrapping) to wrap itself inside the default `<Footer />` component provided by Docusaurus.


>  Wrapping the Footer component doesn't impact the default behavior. It only lets docsly to enhance the documentation experience.

You need to initialize docsly using the `publicId` and `pathname` (to learn more about props, see [component](/docs/component) ). In Docusaurus, you can get the `pathname` using the `useLocation` hook from `@docusaurus/router`.

To initialize docsly,

1. Create a new file `./theme/Footer/index.js` in the project root.

2. Copy the below code and paste it into the newly created file.

3. Replace the `publicId` copied from the [docsly dashboard](https://app.docsly.dev).

```jsx
// ./theme/Footer/index.js
import React from "react";
import Footer from "@theme-original/Footer";
import Docsly from "@docsly/react";
import "@docsly/react/styles.css";
import { useLocation } from "@docusaurus/router";

export default function FooterWrapper(props) {
  const { pathname } = useLocation();
  return (
    <>
      <Footer {...props} />
      <Docsly publicId="<copied-from-dashboard>" pathname={pathname} />
    </>
  );
}
```

🥳 Your documentation is now ready to collect feedback using docsly.


> To avoid misuse of the _development_ project's private ID, you must create a new project and use its `publicId` when deploying your project.


## Deployment

You can deploy your website wherever you want. For example, you can [deploy on Cloudflare pages](https://developers.cloudflare.com/pages/framework-guides/deploy-a-docusaurus-site/) in two minutes.

## Example project

We've got a Docusaurus template project working with the latest `@docsly/react` package hosted live at [docusaurus.docsly.dev](https://docusaurus.docsly.dev).

You can also check out the code on [GitHub](https://github.com/Anshuman71/docsly-docusaurus).

## Additional notes

By now you must have realized that you can use docsly on any React application. So, what are you waiting for? [Sign up](https://www.docsly.dev) today. 

I'm eager to see your comments.