Ngx-bootstrap-feedback NPM

ngx-bootstrap-feedback

Overview

This module provides a modal popup (powered by bootstrap) for collecting user feedback.

Features:

Customizable form body.
Configurable [styles](#configuration-style-properties), [text](#configuration-text-properties), [callbacks](#configuration-event-callbacks).
Optional screenshot taking and / or uploading functionality.
Configurable allowed image types and size (for uploading).

Heavily inspired by [angular-bootstrap-feedback](https://github.com/RobertYoung/angular-bootstrap-feedback).

Requirements:

"bootstrap": "^3.3.7",`
"@angular/core": "^2.4.0 || ^4.0.0",
"@herbis/ngx-modal": "^0.1.0", // Modal Functionality
"rxjs": "^5.0.1",
"html2canvas": "0.5.0-beta4" // Optional*

You will also need have the following scripts added in your application (.angular-cli.json example):

{
  ...
  "apps": [
    {
        ...
        "styles": [
          "../../../node_modules/bootstrap/dist/css/bootstrap.min.css",
          "../../../node_modules/ngx-bootstrap-feedback/dist/css/feedback-take-screenshot.min.css" // Optional*
        ],
        "scripts": [
          "../../../node_modules/bootstrap/dist/js/bootstrap.min.js",
          "../../../node_modules/html2canvas/dist/html2canvas.min.js" // Optional* 
        ],
        ...
    }
  ]
  ...
}

Optionals are only required for 'Take Screenshot' feature.

Installation and Usage

Install using NPM

npm install ngx-bootstrap-feedback --save

Import Feedback module in the required module (usually app root module).

import {FeedbackModule} from "ngx-bootstrap-feedback/feedback.module";
import {ModalModule} from "@herbis/ngx-modal";

@NgModule({
  ...
  imports: [
    ...
    FeedbackModule,
    ModalModule,
    ...
  ],
  ...
})
...

See [below](#configuration-options) for available configuration options.

Initialize feedback configuration

...
this.feedbackConfiguration = {
  onCancel: () => this.clearFeedbackFields(),
  onSubmit: (feedback: FeedbackModel) => this.onSubmitFeedback(feedback),
  screenshotOnlyHighlighted: true
};
...

Add selectors to your component template (usually root) and bind configuration to them.

...
<ngx-bootstrap-feedback [configuration]="feedbackConfiguration">
  <!-- Your customizations. -->
  ...
      <!-- Screenshot field (Optional). -->
      <ngx-bootstrap-feedback-screenshot [configuration]="feedbackConfiguration"></ngx-bootstrap-feedback-screenshot>
  ...
</ngx-bootstrap-feedback>
...

Example:

<ngx-bootstrap-feedback [configuration]="feedbackConfiguration">
  <!-- Your customizations. -->
  <div class="row">
    <!-- Input fields. -->
    <div class="col-md-6">
      <!-- Subject field. -->
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group form-group-sm">
            <label class="control-label" for="subject-input">Subject</label>
            <input type="text" class="form-control" id="subject-input" required [(ngModel)]="feedbackSubject">
          </div>
        </div>
      </div>
      <!-- Description field. -->
      <div class="row">
        <div class="col-md-12">
          <div class=" form-group form-group-sm">
            <label for="description-input">Description:</label>
            <textarea id="description-input" class="form-control width-locked" rows="5" required [(ngModel)]="feedbackDescription"></textarea>
          </div>
        </div>
      </div>
      <!-- Contact field. -->
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group form-group-sm">
            <label class="control-label" for="contact-input">Contact</label>
            <input type="text" class="form-control" id="contact-input" [(ngModel)]="feedbackContact">
          </div>
        </div>
      </div>
    </div>
    <!-- Screenshot field (Optional). -->
    <div class="col-md-6">
      <ngx-bootstrap-feedback-screenshot [configuration]="feedbackConfiguration"></ngx-bootstrap-feedback-screenshot>
    </div>
  </div>
</ngx-bootstrap-feedback>

Configuration

Configuration Options

Event callbacks

Event	Description	Emits
onCancel	Fired when the feedback is canceled from the modal.	-
onCancelScreenshot	Fired when canceling from the screenshot mode.	-
onEnterTakeScreenshot	Fired when entering screenshot mode.	-
onHighlightDrawn	Fired when a highlight is drawn in the screenshot mode.	highlight: HTMLDivElement
onOpen	Fired when the feedback modal is opened.	-
onScreenshotTaken	Fired when a screenshot is taken by the user.	screenshot: string (base64 data url)
onSubmit	Fired when the user submits feedback from the modal if onSubmitValidation is successful or not defined.	feedbackSubmission: FeedbackModel
onSubmitValidation	Fired when the user submits feedback but before onSubmit. Expects boolean as return value. onSubmit will not be called if validation fails.	feedbackSubmission: FeedbackModel
onTakeScreenshot	Fired when the user presses button to take a screenshot but before it is actually taken. This can be used to cleanup view to make sure something is included / excluded from the screenshot.	-

Text properties

Property	Description	Default
cancelFeedbackButtonText	The cancel button text of the modal.	Cancel
cancelScreenshotButtonText	The cancel button text in screenshot mode.	Cancel
enterScreenshotModeButtonText	The enter screenshot mode button text.	Take Screenshot
feedbackButtonText	The feedback button text.	Send Feedback
feedbackModalTitle	The title of the modal.	Send Feedback
fileSizeTooLargeErrorMessage	Error message shown when uploading a single file that's too large. {size} - file size, {maxsize} - max size.	File size too large. Max allowed - {maxsize}.
fileTypeNotAllowedErrorMessage	Error message shown when uploading unsupported file type. {type} - file MIME type.	File type {type} not allowed.
maxImageCountReachedErrorMessageText	Error message shown when max image count has been reached.	Image limit reached. Please remove some to add more.
submitFeedbackButtonText	The submit button text of the modal.	Submit
takeScreenshotButtonText	The capture screenshot button text in screenshot mode.	Take Screenshot
uploadButtonText	The upload screenshot button text.	Upload

Style properties

Property	Description	Default
cancelFeedbackButtonClass	The class applied to the cancel button in feedback modal.	btn btn-default
cancelScreenshotButtonClass	The class applied to the cancel button in screenshot mode.	btn btn-default btn-block
enterScreenshotModeButtonClass	The class applied to the enter screenshot mode in feedback modal.	btn btn-info btn-block
feedbackButtonClass	The class applied to the feedback button.	btn send-feedback-button
feedbackModalClass	The class applied to the feedback modal.	modal-md
maxImageCountReachedErrorMessageClass	The class applied to the max image count reached error message.	text-warning
screenshotEmbedClass	The class applied to embedded captured screenshot.	feedback-screenshot
screenshotEmbedRemoveButtonClass	The class applied to embedded captured screenshot remove button.	close
submitFeedbackButtonClass	The class applied to the submit button in feedback modal.	btn btn-primary
takeScreenshotButtonClass	The class applied to the capture button in screenshot mode.	btn btn-primary btn-block
uploadButtonClass	The class applied to the upload button in feedback modal.	btn btn-primary btn-block
uploadErrorMessageClass	The class applied to the upload error message in feedback modal.	text-danger

Other properties

Property	Description	Default
allowedImageTypes	Allowed image types for uploading (separated by spaces).	image/png image/gif image/jpeg
enableLoadingIconClass	Apply loading-icon class to capture screenshot button when capturing.	false
disableScreenshotMode	Disable capture screenshot mode.	false
disableUpload	Disable ability to upload a screenshot.	false
maxImageCount	Max image count allowed for submission.	5
maxSingleFileSize	Max single file size (in KB) allowed.	2048
screenshotOnlyHighlighted	Capture screenshot only of the highlighted area.	false