Docusaurus

Prerequisites

DocLabs account (sign up (opens in a new tab))
Docusaurus project (create (opens in a new tab))
Getting Started

Swizzle

Swizzling (opens in a new tab) is the process of replacing a component in your site with a custom version. In this case, we'll update the footer to include a DocLabs widget.

npm run swizzle @docusaurus/theme-classic DocItem/Footer -- --eject

⚠️

The exact component you need to swizzle may vary depending on your theme. It will also depend on where you want your feedback components to live.

Add DocLabs

Add DocLabs components to the ejected component. See Likes for more information and Comments for usage information.

src/theme/DocItem/Footer/index.js

import React from "react";
 
// ...
 
import {
  Provider as DoclabsProvider,
  LikeButton,
  DislikeButton,
} from "@doclabs/react";
 
// ...
 
export default function DocItemFooter() {
  // ...
 
  return (
    <footer
      className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}
    >
      <DoclabsProvider
        siteId="YOUR ID HERE"
        identifier={{
          lvl1: metadata.id,
        }}
      >
        <div>Was this helpful?</div>
        <div>
          <LikeButton>😊</LikeButton>
          <DislikeButton>😔</DislikeButton>
        </div>
      </DoclabsProvider>
      {canDisplayTagsRow && <TagsRow tags={tags} />}
      {canDisplayEditMetaRow && (
        <EditMetaRow
          editUrl={editUrl}
          lastUpdatedAt={lastUpdatedAt}
          lastUpdatedBy={lastUpdatedBy}
          formattedLastUpdatedAt={formattedLastUpdatedAt}
        />
      )}
    </footer>
  );
}

Comments Nextra

Was this helpful?