A user feedback modal with screenshot and highlighting functionality built around Angular 1.5+.
- Angular component(s)
- Modal popup
- User can create Screenshots
- User can highlight screenshots
- Include custom inputs
- angular - 1.5.0+
- bootstrap - 3.3.6+
- angular-bootstrap - 1.3.2+
- html2canvas - 0.4.1+
bower install angular-bootstrap-feedback --save
Or, you can download source files straight from this repo, they're located in the dist folder.
Just include the minified version of both .js and .css files.
- dist/angular-bootstrap-feedback-styles.css
- dist/angular-bootstrap-feedback.js
- dist/angular.bootstrap.feedback.min.css
- dist/angular.bootstrap.feedback.min.js
Make sure you have the required bower_components and included them in your html page as well as the angular-bootstrap-feedback files:
Inject the angular.bootstrap.feedback provider into your module
var myApp = angular.module('myApp', [ 'angular.bootstrap.feedback' ]);
Create an options object on the controller. All options are optional, see below for a detailed explanation of each property.
myApp.controller('appController', ['angularBootstrapFeedbackFactory', function(feedbackFactory) { $scope.options = { modalTitle: 'Feedback', takeScreenshotButtonText: "Take screenshot", submitButtonText: "Submit", sendFeedbackButtonText: "Send Feedback", cancelScreenshotOptionsButtonText: "Cancel", takeScreenshotOptionsButtonText: "Take Screenshot", takeScreenshotButtonPressed: takeScreenshotButtonPressed, submitButtonPressed: submitButtonPressed, sendFeedbackButtonPressed: sendFeedbackButtonPressed, cancelScreenshotOptionsButtonPressed: cancelScreenshotOptionsButtonPressed, takeScreenshotOptionsButtonPressed: takeScreenshotOptionsButtonPressed, screenshotTaken: screenshotTaken, highlightDrawn: highlightDrawn, modalDismissed: modalDismissed } function takeScreenshotButtonPressed() {} function submitButtonPressed(form) {} function sendFeedbackButtonPressed() {} function cancelScreenshotOptionsButtonPressed() {} function takeScreenshotOptionsButtonPressed() {} function screenshotTaken(image, canvas) {} function highlightDrawn(element) {} function modalDismissed() {} }]);
The angular components are split into 2 elements:
- angular-bootstrap-feedback
- angular-bootstrap-feedback-screenshot
Please note, the screenshot component is not required.
<angular-bootstrap-feedback options="options"> <div class="row"> <div class="col-lg-6"> // Your custom inputs here </div> <div class="col-lg-6"> <angular-bootstrap-feedback-screenshot></angular-bootstrap-feedback-screenshot> </div> </div> </angular-bootstrap-feedback>
| Property | Description | Default |
|---|---|---|
| modalTitle | Sets the title of the modal | 'Feedback' |
| submitButtonText | Sets the submit button value of the modal | 'Submit' |
| takeScreenshotButtonText | Sets the button text value that is fixed to the bottom of the users screen | 'Take Screenshot' |
| cancelScreenshotOptionsButtonText | The screenshot options cancel button text | 'Cancel' |
| takeScreenshotOptionsButtonText | The screenshot options capture button text | 'Take Screenshot' |
| Event | Description |
|---|---|
| takeScreenshotButtonPressed | Fired when the take screenshot button is pressed from the modal |
| submitButtonPressed | Fired when the submit button is pressed from the modal |
| sendFeedbackButtonPressed | Fired when the send feedback button is pressed |
| cancelScreenshotOptionsButtonPressed | Fired when a user cancels screenshotting/highlighting |
| takeScreenshotOptionsButtonPressed | Fired when the take screenshot button is pressed |
| screenshotTaken | Fired when a user takes a screenshot |
| highlightDrawn | Fired when the user draws a highlight square |
| modalDismissed | Fired when the modal is dismissed |
Pull requests and issues are welcome.