User feedback

Quiet supports PushFeedback for feedback below each document. The integration is optional and uses your own project.

Paid plans

PushFeedback offers paid plans. Use code QUIET to get your first month free.

Install

npm install pushfeedback-react

Wrap the footer in your site. The theme's footer remains intact:

src/theme/DocItem/Footer/index.jsx

import React, { useEffect } from "react";
import Footer from "@theme-original/DocItem/Footer";
import { ThumbsUp, ThumbsDown } from "lucide-react";
import { FeedbackButton } from "pushfeedback-react";
import { defineCustomElements } from "pushfeedback/loader";
import "pushfeedback/dist/pushfeedback/pushfeedback.css";

export default function DocFooter(props) {
  useEffect(() => {
    defineCustomElements(window);
  }, []);
  return (
    <>
      <div className="feedback-widget">
        <span>Was this helpful?</span>
        <div className="pushfeedback-thumbs-row">
          <FeedbackButton
            className="quiet-feedback-thumb"
            project="YOUR_PROJECT_ID"
            rating="1"
            button-position="default"
            button-style="default"
            modal-position="center"
            custom-font="true"
          >
            <span className="quiet-feedback-choice">
              <ThumbsUp size={18} aria-hidden="true" />
              <span className="quiet-feedback-label">Helpful</span>
            </span>
          </FeedbackButton>
          <FeedbackButton
            className="quiet-feedback-thumb"
            project="YOUR_PROJECT_ID"
            rating="0"
            button-position="default"
            button-style="default"
            modal-position="center"
            custom-font="true"
          >
            <span className="quiet-feedback-choice">
              <ThumbsDown size={18} aria-hidden="true" />
              <span className="quiet-feedback-label">Not helpful</span>
            </span>
          </FeedbackButton>
        </div>
      </div>
      <Footer {...props} />
    </>
  );
}

Install lucide-react in your site if you use these icons. The visually hidden labels give both icon controls accessible names. Each button opens the configured feedback form with its rating selected.

You do not need a floating feedback button as well. Keep collection fields and delivery settings in PushFeedback.

Verify

Check the two forms, selected ratings, page URL, focus and close behavior. Submit tests only to a project intended for testing.

PushFeedback's Docusaurus guide