volto-feedback

Volto addon for end-user feedbacks.

Install with mrs-developer (see Volto docs) or with:

yarn add volto-feedback

It requires https://github.com/RedTurtle/collective.feedback installed into the backend.

Usage

This addons exports FeedbackForm component that could be added in your site pages to get feedback from users on the usefulness of the page through rating, commenting and choosing an answer from a predefined set.

import { FeedbackForm } from 'volto-feedback';

...
<FeedbackForm/>
...

It features a set of fully customizable form steps, rating threshold and questions for the form, which can be set using standard Volto config schema. Otherwise, it defaults to 5 positive and 5 negative set of questions (optional) and a comment (optional). Answers shown are dependant on user feedback, with a default threshold of 3.5 that sets positive and negative feedbacks answers apart. This is the default configuration:

    ...
    config.settings['volto-feedback'] = {
        feedbackThreshold: FEEDBACK_THRESHOLD,
        questions: {
        negativeFeedback: NEGATIVE_FEEDBACK_QUESTIONS,
        positiveFeedback: POSITIVE_FEEDBACK_QUESTIONS,
        },

        formSteps: [
        {
            step: 0,
            pane: AnswersStep,
        },
        {
            step: 1,
            pane: CommentsStep,
        },
        ],
    };
    ...

All exported components, actions and helpers can be directly customized using standard Volto customization pattern. This is the list of exported components:

export {
  submitFeedback,
  exportCsvFeedbackData,
  deleteAllFeedbacks,
  getFeedback,
  getFeedbacks,
  deleteFeedback,
  resetSubmitFeedback,
  resetDeleteFeedback,
} from 'volto-feedback/actions';
export {
  getFeedbackFormSteps,
  getFeedbackFormByStep,
  getFeedbackQuestions,
  getFeedbackThreshold,
  getTranslatedQuestion,
  generateFeedbackCommentUUID,
} from 'volto-feedback/helpers';
export {
  GoogleReCaptchaWidget,
  HoneypotWidget,
} from 'volto-feedback/components/widgets';
export {
  AnswersStep,
  CommentsStep,
  FeedbackForm,
  FormHeader,
} from 'volto-feedback/components';
export {
  VFPanel,
  VFToolbar,
  VFPanelMenu,
  FeedbackComments,
} from 'volto-feedback/components/manage';

It needs this Plone addon to work.

It also need a RAZZLE_RECAPTCHA_KEY in your .env to work or RAZZLE_HONEYPOT_FIELD env var..

Translations

This addon has Italian and English localizations.

Feedback Form

FeedbackForm is a component that can be added anywhere.

Form fields, answers and comments section may vary depending on selected threshold and your own configurations, these are the default ones:

Once a feedback is submitted, a success message is shown to the user:

Panel

This addon also adds a button to the toolbar to access feedbacks panel:

Into the panel, you can view a summary of feedbacks and answers/comments with respective ratings:

Comments are shown in a modal and are filterable by vote and rating datetime:

Honeypot integration

If you want to use Honeypot, you have to set env var RAZZLE_HONEYPOT_FIELD with the same value of the HONEYPOT_FIELD env var set on plone backend.