ngx-bootstrap-feedback

Overview

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

Features:

• Customizable form body.
• Configurable styles, text, callbacks.
• Optional screenshot taking and / or uploading functionality.
• Configurable allowed image types and size (for uploading).

Heavily inspired by 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 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|

Contributing

Pull requests and issues are welcome.