Guides

Add comments to Docusaurus

Add a comment thread to Docusaurus docs pages with a single embed, keyed to each page canonical URL.

Add comments to Docusaurus

Why comments on docs pages

Documentation is rarely finished. Readers hit a step that no longer matches the current release, spot a missing prerequisite, or want to share a workaround they found. A comment thread on each docs page captures that feedback where it belongs, next to the exact content that prompted it. You get a running record of confusion points, and readers help each other while you sleep.

Docusaurus is a React-based static site generator, so it has no backend to store comments and no database of its own. That is fine. A hosted comment embed loads on the client, keeps its own storage, and attaches the discussion to the page URL. Nothing about your build changes except one component.

The embed

Every Gabden thread is keyed to a page's canonical URL. You drop a container div and one script, and the widget finds the URL for you.

<div id='gabden-conversations'></div>
<script async src='https://YOUR-SITE.gabden.com/conversations.js'
  data-page='canonical'
  data-theme='auto'></script>

Copy your own Gabden subdomain (the YOUR-SITE part of the URL) from the dashboard after you create a free account. The script is about 10KB and loads asynchronously, so it does not block your docs from rendering.

Add it with a swizzled component

Docusaurus renders documentation through a theme. The cleanest way to put a thread at the bottom of every doc is to wrap the DocItem/Footer component. Create a file at src/theme/DocItem/Footer/index.js that renders the default footer and then your comments below it.

Because the script tag is plain HTML and Docusaurus is React, you cannot paste a raw <script> into JSX and expect it to run. Load the script once with a small effect, then render the container div. A component that appends the script to the document on mount and cleans it up on unmount works reliably across client-side navigations, which matters because Docusaurus swaps pages without a full reload.

Make navigation re-render the thread

Single-page apps move between routes without reloading. If you add the widget carelessly, it can render on the first page and then sit stale as the reader clicks through. Key your comments component on the current pathname (from useLocation) so React remounts it on each route change. That gives every doc its own thread tied to its own canonical URL.

Where to place it

Footer of the doc is the natural spot: the reader has finished (or given up), and now has something to say. For long reference pages you might not want comments at all. Gabden lets you turn comments off on chosen URLs, so an API reference or a changelog can stay quiet while tutorials and guides collect discussion.

Moderation that fits docs traffic

Docs comments skew practical: corrections, follow-up questions, the occasional bug report. You probably do not want to approve every one by hand. Gabden supports several moderation modes. You can pre-moderate everything at launch, then switch to auto-approving returning verified people once you trust the crowd, and keep anonymous posts in a queue. A blocked-word filter and a spam queue catch the rest.

Readers do not need an account to take part. They can post anonymously, leave a name and email as a guest, or sign in with Google or GitHub if they want a profile. For a developer audience, GitHub sign-in tends to feel native.

Privacy for a docs site

Documentation often sits on the same domain as a product that makes privacy promises. A comment tool that sets tracking cookies or fingerprints visitors undercuts that. Gabden uses no tracking cookies, no fingerprinting, and no cross-site tracking. Analytics are anonymous and aggregate. You own the comment data and can export it as JSON or CSV whenever you want.

If you care about page speed, and docs authors usually do, a light embed helps your Core Web Vitals. There is more on that in how your comment system affects performance and SEO. For the full component API and swizzling notes, see the docs.

Join the discussion