Feedback Rocket - Integration GuidesDocusaurus

Integrating Feedback Rocket with Docusaurus only takes a couple of minutes. In this example we’ll walk through adding a feedback link into the top nav of an out-of-the-box Docusaurus site, allowing visitors to leave feedback on any page they happen to be looking at.

Assuming you’ve already got a Feedback Rocket account, the only prep you’ll need is to make sure you’ve got your 21-character long identifier copied from your widget setup page. Armed with that, all we need to do is make a couple of changes to docusaurus.config.js, the first of which is to load the Feedback Rocket SDK. Open up docusaurus.config.js and add scripts element to the top-level config object:

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'My Site',
  tagline: 'Dinosaurs are cool',
  favicon: 'img/favicon.ico',
  url: '',
  baseUrl: '/',
  organizationName: 'your-org', // Usually your GitHub org/user name.
  projectName: 'your-repo', // Usually your repo name.
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Load the Feedback Rocket SDK on every page
  scripts: [
      async: true,
      src: '',
      'data-fr-id': '<your-21-character-id>',

  i18n: {
    defaultLocale: 'en',
    locales: ['en'],

It’s important that you replace the value of the data-fr-id property with your own identifier, and make sure you replace the angled brackets when doing so. Whether or not you load the script with async, defer or neither is up to you.

Next—and last!—we just need to a feedback button to our top nav. We’re going to add it top right just before the GitHub link, but any position and alignment will work. The important attribute below is data-fr-widget—it’s this which ensures the Feedback Rocket widget shows when the link is clicked:

  /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    image: 'img/docusaurus-social-card.jpg',
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      items: [
        type: 'doc',
        docId: 'intro',
        position: 'left',
        label: 'Tutorial',
      { to: '/blog', label: 'Blog', position: 'left' },

      // Add a feedback button in the top navbar on every page
        type: 'html',
        position: 'right',
          `<a href=# class=navbar__link data-fr-widget>
            Page feedback

        href: '',
        label: 'GitHub',
        position: 'right',
    footer: ...

And that, believe it or not, is that—we’re done. Happy feedbacking! 🚀