Add comments to your Docusaurus website in 5 minutes

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

Installation

Install the latest version of @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.

Deployment

You can deploy your website wherever you want. For example, you can deploy on Cloudflare pages 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.

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.