Integrations
Nextra

Nextra

Prerequisites

Update theme.config.tsx

We need to provide a custom main component to the theme. This allows you to override the layout above and below the content. This is where we'll add our feedback components.

theme.config.tsx
import React from "react";
// ...
import { Main } from "./components/main";
 
const config: DocsThemeConfig = {
  // ...
  main: Main,
  // ...
};
 
export default config;

Add DocLabs

./components/main.tsx
import { PropsWithChildren } from "react";
import { useRouter } from "next/router";
import {
  Provider as DoclabsProvider,
  LikeButton,
  DislikeButton,
} from "@doclabs/react";
 
export function Main({ children }: PropsWithChildren) {
  const { route } = useRouter();
 
  return (
    <>
      {children}
      <DoclabsProvider
        siteId="YOUR ID HERE"
        identifier={{
          lvl1: route,
        }}
      >
        <div>Was this helpful?</div>
        <div>
          <LikeButton>😊</LikeButton>
          <DislikeButton>😔</DislikeButton>
        </div>
      </DoclabsProvider>
    </>
  );
}
Docusaurus
Was this helpful?