Add comments to your Docusaurus website in 5 minutes

Anshuman Bhardwaj
3 min readMay 9, 2023


Docusaurus is one of the best static site generators for blogs and documentation projects. Docusaurus is backed by the Meta Open Source team and is quite popular among developer communities for great performance and simple setup.

In this guide, you’ll add comments to your Docusaurus documentation project.

Why do I need comments?

For documentation

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.


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

To collect comments, likes, and dislikes you’ll use docsly is a user feedback tool for documentation. You can sign up for a free account.

Get project credentials

To get your project’s publicId, follow these steps:

  1. Open the 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.


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

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

Initializing docsly

docsly uses swizzling 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 ). 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.
// ./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.

Example project

We’ve got a Docusaurus template project working with the latest @docsly/react package hosted live at

You can also check out the code on GitHub.

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 today.

I’m eager to see your comments.

Originally published at on May 9, 2023.