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]"
      }
})