Feedbacky

Feedbacky adds a feedback button to any React app. Users click the icon, write a message in a popup, and the message is posted to your API together with a customer id.

This repository is the React component, built with React and documented with Storybook. It is published on npm.

The matching REST API that stores the feedback lives in feedbacky-be.

Instructions

Installation

npm install

To Run Test Suite

npm test

To Visit Storybook Documentation

npm run storybook

To Use Frontend Component Only

Use the package manager 'npm' to install Feedbacky.

npm i feedbacky-react-component

Usage

Requires React 17.

import { Feedbacky } from 'feedbacky-react-component';

function Example() {
    return (
        <div className="Example">
            <Feedbacky
                customerId="customer-42"
                url="http://localhost:8080/feedbacky-api/sendFeedback"
                iconColor="blue"
            />
        </div>
    );
}

Props

| Name | Description | Default Value | | ---------- | :---------: | -------------------------------------------------: | | customerId | string | 'customer-1' | | url | string | 'http://localhost:8080/feedbacky-api/sendFeedback' | | iconColor | string | 'black' | | width | string | '24px' | | height | string | '24px' | | title | string | 'Send Your Feedback' |

Icon Colors

You can choose a color for icon from the examples below.

• black
• blue
• gray
• green
• orange
• purple
• red
• white
• yellow

Request Attributes

    {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Credentials': true
        },
        body: {
            'customerId': 'customer-1',
            'message': 'example feedback text'
        }
    }