Feedbacky

Feedbacky allows you to add a simple feedback modal to your website. Feedbacky adds a button to the bottom of your website, and when the button is clicked, it opens a modal containing a form for users to send feedback.

You can check out the demo app to see how the package works.

Installation

Use the package manager npm to install feedbacky.

npm install @zcopur/feedbacky

Props

| Property | Type | Description | Default Value | | --------------------- | ----------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------- | | userId | number | Retrieves the user ID for logging feedback submissions. | 0 which means anonymous | | companyId | number-required | Provides a company ID, which we supply, for logging via the Google Sheets API. | 0 | | color | string | Button and theme color | "#f27a1a" | | title | string | Feedback form title | "SEND YOUR FEEDBACK" | | buttonText | string | Text displayed on the submit button | "SEND" | | loadingContent | string | Loading message | "loading..." | | placeHolder | string | Input placeholder text | "Share Your Feedback With Us..." | | feedbackImg | React.Element | Icon for feedback | <img src={feedbackIcon} alt="feedbackIcon" draggable={false} /> | | responseSuccessText | string | Message shown on successful submission | "WE HAVE GOT YOUR MESSAGE" | | responseErrorText | string | Message shown on submission error | "PLEASE TRY AGAIN" | | dimmerClick | boolean | Enables closing modal on dimmer click | true | | closeIcon | React.Element | Icon to close feedback modal | <img src={closeIcon} alt="closeIcon" /> | | checkIcon | React.Element | Success check icon | <img src={checkIcon} alt="checkIcon" /> | | dangerIcon | React.Element | Error icon | <img src={dangerIcon} alt="dangerIcon" /> | | shadow | string | Shadow style for modal | "0 10px 20px rgba(0, 0, 0, 0.2)" | | companyId | number | Identifier for the company | 0 |

Usage

import Feedbacky from "@zcopur/feedbacky";

<Feedbacky companyId={1} />;

Remember

To use our modal service, you need a Google service account with a serviceAccountKey shared with us. This account must have write access to a Google Sheet, with the spreadsheetId and sheetName also provided to us ([email protected]). In return, we will supply a companyId for your use of the service.

Logging

The Google Sheet logs data across columns A to E as follows: the comment ID, user ID (or 0 if anonymous), timestamp of when the comment was submitted, rating, and the feedback message.

For example

Testing

| File | % Stmts | % Branch | % Funcs | % Lines | | ------------------------------------- | ------- | -------- | ------- | ------- | | All files | 100 | 100 | 100 | 100 | | src | 100 | 100 | 100 | 100 | | App.tsx | 100 | 100 | 100 | 100 | | index.tsx | 100 | 100 | 100 | 100 | | main.tsx | 100 | 100 | 100 | 100 | | service.ts | 100 | 100 | 100 | 100 | | utils.ts | 100 | 100 | 100 | 100 | | src/components/feedBackButton | 100 | 100 | 100 | 100 | | index.tsx | 100 | 100 | 100 | 100 | | src/components/feedBackModal | 100 | 100 | 100 | 100 | | index.tsx | 100 | 100 | 100 | 100 | | src/components/feedBackModal/header | 100 | 100 | 100 | 100 | | index.tsx | 100 | 100 | 100 | 100 | | ...ponents/feedBackModal/inputContent | 100 | 100 | 100 | 100 | | index.tsx | 100 | 100 | 100 | 100 | | ...ents/feedBackModal/responseContent | 100 | 100 | 100 | 100 | | index.tsx | 100 | 100 | 100 | 100 | | src/context | 100 | 100 | 100 | 100 | | index.tsx | 100 | 100 | 100 | 100 | | initialStates.tsx | 100 | 100 | 100 | 100 | | mock.tsx | 100 | 100 | 100 | 100 |

Author

Zeynep Çöpür ❤️