Integrating with Nextra

Install nextra

According to official documentation (opens in a new tab) of installing nextra run following methond:

Terminal

npm install next react react-dom nextra nextra-theme-docs

then create next.config.js file with following contents

next.config.js

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.jsx'
});
 
module.exports = withNextra();

after that create theme.config.js:

theme.config.js

module.exports = {
  logo: <span>My Nextra Documentation</span>,
  project: {
    link: 'https://github.com/shuding/nextra'
  }
};

Both files need to be in root of your project. Check how to make config theme in offical documentation (opens in a new tab).

and finally create your first page:

pages/index.mdx

# Welcome to Nextra
 
Hello, world!

You can run your application. Nextra is based on NextJS (opens in a new tab) so you are running it like standard next application.

Terminal

npx next

Install package

HappyReact provides React package to install from the npm registry. This will let you add more control over how you load the feedback widget. For example, you can defer loading it to have a better web vitals score.

Terminal

npm install @happyreact/react

Project setup

Create a new project in the dashboard

Go to New project (opens in a new tab) and choose the name of the project eg. Docusaurus. You can always change it later.

Add two reactions: "Yes" and "No"

Go to the Docusaurus project > Reactions tab. Click in "+ Add new reaction" and fill the "Icon" input with Yes. Remove $count text from the "Label" input.

After that, make same steps with No reaction.

Adjust project settings

Every domain where you will use the feedback widget needs to be on the whitelist. This applies also to development and staging domains. Make sure you include port in localhost domain eg. http://localhost:3000.

Mark the option "Allow multiple reactions" and set the "Max reactions" to 0 in settings.

Let's make our feedback component

Now we need to adjust our Feedback code:

/components/Feedback.jsx

import React, { useState } from 'react';
import { Widget } from '@happyreact/react';
 
import '@happyreact/react/theme.css';
 
const VotedYes = () => {
  return <span>Thanks for your feedback. We are glad you like it :)</span>;
};
 
const VotedNo = () => {
  return <span>Thanks for your feedback. We will try to improve :(</span>;
};
 
export default function Feedback({ resource }) {
  const [reaction, setReaction] = useState(null);
 
  const isReacted = reaction === 'Yes' || reaction === 'No';
  const _resource = String(resource).replace(/\//g, '-');
 
  const handleReaction = (params) => {
    setReaction(params.icon);
  };
 
  return (
    <div>
      <h3>Was this page helpful?</h3>
      {!isReacted ? (
        <div>
          <Widget
            token="[token]"
            resource={_resource}
            onReaction={handleReaction}
          />
        </div>
      ) : reaction === 'No' ? (
        <VotedNo />
      ) : (
        <VotedYes />
      )}
    </div>
  );
}

💡

Make sure you replace [token] with created project token

Add our created feedback component on the bottom of documentation page. Unlike, for example in docusaurus you need to manually add component at every documentation page.

pages/index.mdx

import Feedback from '../components/Feedback';
 
# Welcome to Nextra
 
Hello, world!
 
<Feedback resource="homepage" />

The result, for now, should be this:

HappyReact widget setup with basic styling

Add some styling

Now let's add some CSS to style our feedback component. We can apply styling to every part of widget. Use classes prop for that:

/components/Feedback.jsx

import React, { useState } from 'react';
import { Widget } from '@happyreact/react';
 
import styles from './Feedback.module.css';
 
import '@happyreact/react/theme.css';
 
[...]
 
export default function Feedback({ resource }) {
 
  [...]
 
  return (
    <div className={styles.root}>
      <h3 className={styles.title}>Was this page helpful?</h3>
      {!isReacted ? (
        <div className="">
          <Widget
            token="[token]"
            resource={_resource}
            classes={{
              root: styles.widget,
              container: styles.container,
              grid: styles.grid,
              cell: styles.cell,
              reaction: styles.reaction,
            }}
            onReaction={handleReaction}
          />
        </div>
      ) : reaction === 'No' ? (
        <VotedNo />
      ) : (
        <VotedYes />
      )}
    </div>
  );
}

💡

Make sure you replace [token] with created project token

And then create /components/Feedback.module.css:

/components/Feedback.module.css

.root {
  margin-top: 15px;
}
 
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}
 
.widget .grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: 50px;
}
 
.widget .cell {
  width: 50px;
}
 
.widget .reaction {
  width: 100%;
  border: black 1px solid;
}
 
.widget .reaction:hover {
  border: black 1px solid;
}
 
.widget .footer {
  margin-top: 10px;
  margin-left: 0;
}

Congrats 🥳 You made it and you should see final result:

HappyReact widget setup with our custom styling

Live example

Was this page helpful?

Docusaurus Next.js