Feedback Buttons on Theme Cards (Winter '21 Release)

Previously, we only had the thumbs up/thumbs down feature on direct answers cards. We are now adding this feature to all entity cards, so that we can get feedback more holistically on Answers experiences.

To add the thumbs up/thumbs down button, navigate to the card > component.js file and set the feedback: true in the dataForRender object. You can also set the text that shows when a feedback button is clicked (feedbackTextOnSubmission) and that will be used by screen readers for accessibility (positiveFeedbackSrText and negativeFeedbackSrText). The default will look something like (depending on the card you choose):

dataForRender(profile) {
  return {
    title: profile.name,
    url: profile.website || profile.landingPageUrl,
    target: linkTarget,
    details: profile.description,
    showMoreDetails: { ... },
    feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
    feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked
    positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
    negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
    CTA1: { ... },
    CTA2: { ... }
  };
}

Here’s an example of the thumbs up/thumbs down button on an FAQ card:

Upgrade Implications:

If you forked your cards, you will need to re-fork them to get this functionality.

Also note the functionality is in a shared partial under themes/answers-hitchhiker-theme/cards/common-partials/thumbsfeedback.hbs. If you want to customize functionality for a specific card, re-fork the card and remove the reference to the shared partial in the handlebars file. Then copy the partial and paste it inline before customizing the code.