Integrating with Docusaurus

To start you need to have a Happy React account and created a project to use it with your documentation page. You can see more about how to create a new project in Happy React docs.

First, we need to add the Happy React widget script to the docusaurus config. This will let us import this script to every page.

// docusaursus.config.js
const config = {
  title: 'My Site',
  [...]
  scripts: [
    {
      src: 'https://app.happyreact.com/widget/reactions.js',
      defer: true,
    },
  ],
  [...]
}

How to set up the project:

Create a new project in the dashboard
Add two reactions: "Yes" and "No"
Make "Label" empty for both
Add domains to whitelist in settings
Check the option "Allow multiple reactions" and set the reactions limit to 0 this lets users pick multiple options over time

Lastly, add styles.module.css file in the src/components/Feedback directory. This will be used later to add styling.

Finally, we can add feedback widget markup:

import React, { useEffect } from 'react';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import styles from './styles.module.css';
 
export default function Feedback({ resource }) {
  if (!ExecutionEnvironment.canUseDOM) {
    return null;
  }
 
  useEffect(() => {
    window.HappyReact.init();
  }, []);
 
  return (
    <div className={styles.root}>
      <h3 className={styles.title}>Was this page helpful?</h3>
      <div
        className={styles.widget}
        data-hr-token="<token>"
        data-hr-resource={resource}
      />
    </div>
  );
}

You should see something similar to this:

It ain't pretty but it's doing the thing. You can now choose the "Yes" or "No" option and you get. Check in the dashboard project if your click is recorded!

Next, we need to add styles. Here is a comprehensive documentation page about Happy React styling.

// src/components/Feedback/index.js
 
<div
  className={styles.widget}
  data-hr-token="df5f1e76-4753-4eb6-8c73-69aebf7997d0"
  data-hr-resource={resource}
  data-hr-styles={JSON.stringify({
    container: styles.container,
    grid: styles.grid,
    cell: styles.cell,
    reaction: styles.reaction,
    footer: styles.footer
  })}
/>

This will let us add styles to parts of the widget so we can style them. Then we need to create classes.

Here are example classes:

/* src/components/Feedback/styles.module.css */
 
.widget .grid {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  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;
}

And the result of applying them is as follows:

You can check the whole code on Stack Blitz (opens in a new tab).

Was this page helpful?

Happy React is loading...

Integrations Reference