Angular2-Feedback

Angular2-feedback is an Angular library for collecting users feedbacks with ability to create page element screenshot. The user will be able to set rate experience, add feedback, select an element of the page to create a screenshot and leave users email

Setup

Install library

npm install --save angular2-feedback

Add Angular2FeedbackModule in to your feature module.

import { Angular2FeedbackModule } from 'angular2-feedback';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Angular2FeedbackModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the Angular2FeedbackComponent in to your AppComponent.

...
template: '<angular2-feedback></angular2-feedback>'
...

The options and events that can be used when working with feedback widget.

<angular2-feedback 
    [feedbackEmojiNames]="emojis"
    [feedbackWidgetOptions]="options"
    (feedbackStart)="onStart()"
    (feedbackDialogClosed)="onClose()"
    (feedbackOutput)="onOutput($event)"
  ></angular2-feedback>

Options

Feedback widget options

Option	Type	Default
feedbackEmojiNames	Array<string>(5)	['very bad', 'dislike', 'neutral', 'like', 'very good']
feedbackWidgetOptions	FeedbackWidgetOptions	{ buttonText: 'Feedback', buttonClass: 'feedback-btn__start', buttonSize: 'medium', feedbackPosition: 'right', feedbackSuccessTitle: FEEDBACK_SUCCESS_TITLE, feedbackRateTitle: FEEDBACK_RATE_TITLE, feedbackEmailTitle: FEEDBACK_EMAIL_TITLE, feedbackPlaceholder: FEEDBACK_PLACEHOLDER }

 interface FeedbackWidgetOptions {
   buttonSize?: 'small' | 'middle' | 'large';
   feedbackPosition?: 'right' | 'left';
   buttonClass?: string;
   buttonText?: string;
   feedbackSuccessTitle?: string;
   feedbackRateTitle?: string;
   feedbackEmailTitle?: string;
   feedbackPlaceholder?: string;
 }

Output

 
 interface FeedbackWidgetOutput {
   email: string;
   score: number; // 1 - 5
   screenshot: null | File;
   feedback: string;
   route: null | url;
 }

License

MIT © Ochreretnyi Oleksandr