New Jersey Feedback Widget

About this component

A generic, reusable web component that can be added to any New Jersey page to get quick, in-page feedback from the user. This is inspired by the CA Design System's similar component. It is mobile-responsive, accessible (tested with axe tool), and supports English and Spanish language. See the Feedback API Github repository for the code that handles and saves this data.

User flow

1. Rating: At the bottom of a webpage, the widget asks user to rate their experience of the page with "Yes" and "No" buttons. Upon clicking an option, the rating is saved to a Google Sheet and Google Analytics (page URL, datetime, and selection). Note: See only-save-rating-to-analytics attribute below for customization.
2. Comment: Widget asks user to optionally share feedback in a free text field. Upon submitting, this text is recorded to Google Sheets. Note: Users often have specific questions about their situation rather than feedback. Note: See contact-link attribute below for customization.
3. Email: Widget asks user to optionally share their email to join a user testing group. Upon submitting, this email is recorded to Google Sheets.

Spanish content

The component supports English and Spanish content and switching between the two. To switch the language of the component's content, use JavaScript to send a custom event using the code below. For example, we can send this event in a click handler for a button.

document.getElementById("languageButton").addEventListener("click", (e) => {
  const customEvent = new CustomEvent("changeLanguage", {
    detail: "es" /* "en" for English or "es" for Spanish */,
    bubbles: true,
  });
  e.target.dispatchEvent(customEvent);
});

Where it's used

• NJ DOL, TDI/FLI, MyLeaveBenefits, Maternity Timeline Tool (Welcome)
• NJ DOL, TDI/FLI, MyLeaveBenefits, Maternity Timeline Tool (Tool)
• NJ DOL, TDI/FLI, MyLeaveBenefits, What happens after I apply?
• NJ DOL, TDI/FLI, MyLeaveBenefits, Announcing a new way to log in
• NJ DOL, UI, Claim Status
• Office of Innovation, Office website

Customizable attributes

• contact-link - Assign to a string with the URL that you want to direct users to if they have a specific question. By default, a the following URL will be used: https://nj.gov/nj/feedback.html.
• only-save-rating-to-analytics - Rather than saving ratings without comments to the Google Sheets database, you can choose to only save to Google Analytics (whichever property is added to your site) with the value "true". "true" is recommended if expecting high traffic. Defaults to "false".
• show-comment-disclaimer - This can be "true" or "false" to determine whether to display the disclaimer text underneath Step 2 of the form where we prompt users to submit an open-ended comment. The disclaimer directs users to a separate contact form link (see contact-link above) if they have specific questions. Defaults to "true" if not provided.
• skip-email-step - This can be "true" or "false" to determine whether to prompt the user to enter their email to join a testing group after submitting a comment. If "false", submitting the comment will take the user straight to a thank you confirmation view. Defaults to "false" if not provided.

For users: how to add this to your website

With Node/NPM

1. Install the latest version via the command npm i @newjersey/feedback-widget --save.
2. In the file you want to refer to the widget (for example, App.tsx/App.jsx in Create React App), import the JavaScript file to be used.

import "@newjersey/feedback-widget/feedback-widget.min.js";

3. If using TypeScript, add the following type definition to the same file that you imported

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "feedback-widget": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      >;
    }
  }
}

4. Render the feedback widget by adding the following to your HTML/JSX

<feedback-widget
  contact-link="https://www.example.com/contact"
></feedback-widget>

For website without NPM

1. Load the JS file from a CDN link by adding a script tag to your HTML. You can change the version number after the @ sign to match your desired release (https://github.com/newjersey/feedback-widget/releases).

<script
  src="https://unpkg.com/@newjersey/[email protected]/feedback-widget.min.js"
  defer
></script>

2. Render the feedback widget by adding the following tag in your HTML (likely at the bottom of the page). It's just like using any other HTML tag.

<feedback-widget
  contact-link="https://www.example.com/contact"
></feedback-widget>

For developers: how to improve this component

Minifying the JS file

Before pushing changes to feedback-widget.js, make sure you update the minified file (this will be automated eventually).

1. npm install uglify-js -g (global install, not part of npm project)
2. cd feedback-widget && nvm use 16
3. uglifyjs feedback-widget.js -c -o feedback-widget.min.js

Publishing a new version of the package

1. Go the the Draft Release action, click "Run workflow" (you need write permissions to do this). Choose the branch (main) and the semver level of the new version (patch, minor, major).
2. Confirm this worked by checking that package.json version has been bumped and a draft release for this version is available in the Releases page.
3. Click to Edit the new release, and update the description if needed. Click "Publish." This will trigger the publish-release Github Actions workflow.
4. Once the workflow is completed, confirm that the package is updated on NPM registry.