ee-feedback-module
v1.0.8
Published
this is an ui library which will render user feedback form based on feedback form id
Downloads
89
Maintainers
Readme
Eccentric Feedback Module
This module captures users’ responses/feedback regarding the configuration created or the product used.
Installation
Run npm i ee-feedback-module
and install the package in your application.
Import Module
Import EccentricFeedbackLibraryModule
in app.module.ts
and customize feedback form theme as per your UI. font will be inherited from the main application
EccentricFeedbackLibraryModule.forRoot({
apiUrl: "<your-backend-url>"
primaryColor: '#FFBA00',
secondaryColor: '#FBFBFB',
backgroundColor: '#1D1D1D',
buttonBorderRadius: '0px',
titleFontSize: '23px',
primaryFontSize: '20px',
secondaryFontSize: '20px',
inputBackgroundColor: '#1D213B',
inputTextColor: '#FBFBFB',
containerBorderRadius: '23px',
buttonFontSize: '14px',
buttonHeight: '36px',
buttonWidth: '150px'
})
Inject Feedback Service
Create a service for feedback module and inject on root component so that we can interact with feedback module, from anywhere in the application, Inject this service file to the app.component.ts
also define one field type = {};
this type
will be used to communicate with our feedback module
import { Injectable, OnDestroy } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FeedbackService {
type: any = {}
feedbackType = new BehaviorSubject<any>({});
feedbackType$ = this.feedbackType.asObservable();
constructor() {
}
}
Subscribe Feedback Form Changes
Add the following code in the constructor function
feedbackService.feedbackType$.subscribe((params) => {
this.feedbackService.type = params;
this.type = params;
})
Add Feedback Template Selecter
Add the below selector to the app.component.html file.
<ee-feedback-module [type]="feedbackService.type" [toggleFeedback]="this.feedbackService.feedbackType"></ee-feedback-module>
Show/Hide Feedback Form
We need to integrate the feedback service into any part of the application and specify the feedback form type ID. We can also include custom data in the response when users submit the forms. For example, we might include the user's email ID.
this.feedbackService.feedbackType.next({
type: "<form Id>",
customData: {
email: "[email protected]"
}
})