ee-feedback-module
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

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: "eccentricengine@email.com"
      }
})

/ee-feedback-module/

    Package Sidebar

    Install

    npm i ee-feedback-module

    Weekly Downloads

    1

    Version

    1.0.8

    License

    none

    Unpacked Size

    264 kB

    Total Files

    14

    Last publish

    Collaborators

    • eccentric.engine