user-feedback-tool v1.0.1

UserFeedbackTool

This library was generated with Angular CLI version 9.1.9.

Installation

Run npm install user-feedback-tool to install the library.

Usage

import {FeedbackToolComponent} from 'user-feedback-tool';

const feedbackTool = new FeedbackToolComponent({
  //the popup component to be rendered
  component:PopupComponent,

  //Api URL
  //default:http://localhost:8080/api/feedback
  apiUrl:'api url',

  //Text instruction shown to the user
  //default:'Use white squared button to highlight the issue or black squared button to hide sensitive info'
  textOverlay:'',

  //If the default popup component is used pass the values as shown below for the dropdown
  //default:[
        { value: 'issue-type-1', viewValue: 'Issue type 1' },
        { value: 'issue-type-2', viewValue: 'Issue type 2' },
        { value: 'issue-type-3', viewValue: 'Issue type 3' }
      ]
  issueTypes: []
})


//Open popup and attach a default screenshot
feedbackTool.openPopup();

//Highlight a part of the screenshot
feedbackTool.selectArea();

//Change rect background to black, cover some private data
feedbackTool.hideArea();

//Open popup and attach customized screenshot(to be called when a user clicks on done after customizing a screenshot)
feedbackTool.openDialog();

Add data-html2canvas-ignore attribute to an element to hide it in a screenshot.

If the default popup component is not used your components will receive the below inputs

    {
        //issue description
        description: this.description,
        //value selected from dropdown
        issueType: this.issueType,
        //screenshot url to be attached in an img tag
        screenshotUrl: canvas.toDataURL('image/jpeg', 1.0),
        title: 'Report issue',
        //to toggle the checkbox for screenshot
        isScreenshotAttached: true
    }

Emit events specified below from the your component
@Output() feedbackSaved: EventEmitter<any> = new EventEmitter();
@Output() feedbackClosed: EventEmitter<any> = new EventEmitter();
@Output() openTools: EventEmitter<any> = new EventEmitter();

//to open screenshot tools when clicked on image 
this.openTools.emit({description: this.description, issueType:this.issueType});

//when close button is clicked
this.feedbackClosed.emit(null);

//when send button is clicked
this.feedbackSaved.emit({description:this.description, issueType:this.issueType, screenshotUrl:this.screenshotUrl});