{"id":15019259,"url":"https://github.com/herbis/ngx-bootstrap-feedback","last_synced_at":"2025-10-24T08:31:10.133Z","repository":{"id":57310911,"uuid":"93631185","full_name":"Herbis/ngx-bootstrap-feedback","owner":"Herbis","description":"Module that provides a modal popup (powered by bootstrap) for collecting user feedback.","archived":false,"fork":false,"pushed_at":"2017-11-14T14:57:22.000Z","size":31,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-31T00:32:49.839Z","etag":null,"topics":["angular","bootstrap","feedback","modal","screenshot"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Herbis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-07T12:08:37.000Z","updated_at":"2018-10-13T17:30:17.000Z","dependencies_parsed_at":"2022-09-05T16:30:58.109Z","dependency_job_id":null,"html_url":"https://github.com/Herbis/ngx-bootstrap-feedback","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Herbis%2Fngx-bootstrap-feedback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Herbis%2Fngx-bootstrap-feedback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Herbis%2Fngx-bootstrap-feedback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Herbis%2Fngx-bootstrap-feedback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Herbis","download_url":"https://codeload.github.com/Herbis/ngx-bootstrap-feedback/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237937736,"owners_count":19390542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bootstrap","feedback","modal","screenshot"],"created_at":"2024-09-24T19:53:14.117Z","updated_at":"2025-10-24T08:31:04.818Z","avatar_url":"https://github.com/Herbis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-bootstrap-feedback\n[![npm version](https://img.shields.io/npm/v/ngx-bootstrap-feedback.svg)](https://www.npmjs.com/package/ngx-bootstrap-feedback)\n\n## \u003ca name=\"overview\"\u003eOverview\nThis module provides a modal popup *(powered by bootstrap)* for collecting user feedback. \n\n##### \u003ca name=\"overview-features\"\u003eFeatures:\n* Customizable form body.\n* Configurable [styles](#configuration-style-properties), [text](#configuration-text-properties), [callbacks](#configuration-event-callbacks).\n* Optional screenshot taking and / or uploading functionality.\n* Configurable allowed image types and size (for uploading).\n\n*Heavily inspired by [angular-bootstrap-feedback](https://github.com/RobertYoung/angular-bootstrap-feedback).*\n\n## \u003ca name=\"requirements\"\u003eRequirements:\n```\n\"bootstrap\": \"^3.3.7\",`\n\"@angular/core\": \"^2.4.0 || ^4.0.0\",\n\"@herbis/ngx-modal\": \"^0.1.0\", // Modal Functionality\n\"rxjs\": \"^5.0.1\",\n\"html2canvas\": \"0.5.0-beta4\" // Optional*\n```\nYou will also need have the following scripts added in your application (*.angular-cli.json example*):\n```\n{\n  ...\n  \"apps\": [\n    {\n        ...\n        \"styles\": [\n          \"../../../node_modules/bootstrap/dist/css/bootstrap.min.css\",\n          \"../../../node_modules/ngx-bootstrap-feedback/dist/css/feedback-take-screenshot.min.css\" // Optional*\n        ],\n        \"scripts\": [\n          \"../../../node_modules/bootstrap/dist/js/bootstrap.min.js\",\n          \"../../../node_modules/html2canvas/dist/html2canvas.min.js\" // Optional* \n        ],\n        ...\n    }\n  ]\n  ...\n}\n```\n\u003e * Optionals are only required for 'Take Screenshot' feature.\n\n## \u003ca name=\"installation-and-usage\"\u003eInstallation and Usage\n##### \u003ca name=\"usage-npm-install\"\u003eInstall using NPM\n```npm install ngx-bootstrap-feedback --save```\n##### \u003ca name=\"usage-import\"\u003eImport Feedback module in the required module (usually app root module).\n```\nimport {FeedbackModule} from \"ngx-bootstrap-feedback/feedback.module\";\nimport {ModalModule} from \"@herbis/ngx-modal\";\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    FeedbackModule,\n    ModalModule,\n    ...\n  ],\n  ...\n})\n...\n```\nSee [below](#configuration-options) for available configuration options.\n##### \u003ca name=\"usage-configuration\"\u003eInitialize feedback configuration\n```\n...\nthis.feedbackConfiguration = {\n  onCancel: () =\u003e this.clearFeedbackFields(),\n  onSubmit: (feedback: FeedbackModel) =\u003e this.onSubmitFeedback(feedback),\n  screenshotOnlyHighlighted: true\n};\n...\n```\n##### \u003ca name=\"usage-configuration\"\u003eAdd selectors to your component template (usually root) and bind configuration to them.\n```\n...\n\u003cngx-bootstrap-feedback [configuration]=\"feedbackConfiguration\"\u003e\n  \u003c!-- Your customizations. --\u003e\n  ...\n      \u003c!-- Screenshot field (Optional). --\u003e\n      \u003cngx-bootstrap-feedback-screenshot [configuration]=\"feedbackConfiguration\"\u003e\u003c/ngx-bootstrap-feedback-screenshot\u003e\n  ...\n\u003c/ngx-bootstrap-feedback\u003e\n...\n```\n\n###### \u003ca name=\"usage-example\"\u003eExample:\n```\n\u003cngx-bootstrap-feedback [configuration]=\"feedbackConfiguration\"\u003e\n  \u003c!-- Your customizations. --\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003c!-- Input fields. --\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n      \u003c!-- Subject field. --\u003e\n      \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-xs-12\"\u003e\n          \u003cdiv class=\"form-group form-group-sm\"\u003e\n            \u003clabel class=\"control-label\" for=\"subject-input\"\u003eSubject\u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" id=\"subject-input\" required [(ngModel)]=\"feedbackSubject\"\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003c!-- Description field. --\u003e\n      \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-md-12\"\u003e\n          \u003cdiv class=\" form-group form-group-sm\"\u003e\n            \u003clabel for=\"description-input\"\u003eDescription:\u003c/label\u003e\n            \u003ctextarea id=\"description-input\" class=\"form-control width-locked\" rows=\"5\" required [(ngModel)]=\"feedbackDescription\"\u003e\u003c/textarea\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003c!-- Contact field. --\u003e\n      \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-xs-12\"\u003e\n          \u003cdiv class=\"form-group form-group-sm\"\u003e\n            \u003clabel class=\"control-label\" for=\"contact-input\"\u003eContact\u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" id=\"contact-input\" [(ngModel)]=\"feedbackContact\"\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- Screenshot field (Optional). --\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n      \u003cngx-bootstrap-feedback-screenshot [configuration]=\"feedbackConfiguration\"\u003e\u003c/ngx-bootstrap-feedback-screenshot\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/ngx-bootstrap-feedback\u003e\n```\n\n## \u003ca name=\"configuration\"\u003e\u003c/a\u003eConfiguration\n### \u003ca name=\"configuration-options\"\u003e\u003c/a\u003eConfiguration Options\n#### \u003ca name=\"configuration-event-callbacks\"\u003e\u003c/a\u003eEvent callbacks\n|Event|Description|Emits|\n|:--------|:-------------|------:|\n|onCancel|Fired when the feedback is canceled from the modal.|-|\n|onCancelScreenshot|Fired when canceling from the screenshot mode.|-|\n|onEnterTakeScreenshot|Fired when entering screenshot mode.|-|\n|onHighlightDrawn|Fired when a highlight is drawn in the screenshot mode.|highlight: HTMLDivElement|\n|onOpen|Fired when the feedback modal is opened.|-|\n|onScreenshotTaken|Fired when a screenshot is taken by the user.|screenshot: string (base64 data url)|\n|onSubmit|Fired when the user submits feedback from the modal if onSubmitValidation is successful or not defined.|feedbackSubmission: FeedbackModel|\n|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|\n|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.|-|\n\n#### \u003ca name=\"configuration-text-properties\"\u003eText properties\n|Property|Description|Default|\n|:-------------|:----------------------|-------:|\n|cancelFeedbackButtonText|The cancel button text of the modal.|*Cancel*|\n|cancelScreenshotButtonText|The cancel button text in screenshot mode.|*Cancel*|\n|enterScreenshotModeButtonText|The enter screenshot mode button text.|*Take Screenshot*|\n|feedbackButtonText|The feedback button text.|*Send Feedback*|\n|feedbackModalTitle|The title of the modal.|*Send Feedback*|\n|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}.*|\n|fileTypeNotAllowedErrorMessage|Error message shown when uploading unsupported file type. {type} - file MIME type.|*File type {type} not allowed.*|\n|maxImageCountReachedErrorMessageText|Error message shown when max image count has been reached.|*Image limit reached. Please remove some to add more.*|\n|submitFeedbackButtonText|The submit button text of the modal.|*Submit*|\n|takeScreenshotButtonText|The capture screenshot button text in screenshot mode.|*Take Screenshot*|\n|uploadButtonText|The upload screenshot button text.|*Upload*|\n\n#### \u003ca name=\"configuration-style-properties\"\u003eStyle properties\n|Property|Description|Default|\n|:-------------|:----------------------|-------:|\n|cancelFeedbackButtonClass|The class applied to the cancel button in feedback modal.|*btn btn-default*|\n|cancelScreenshotButtonClass|The class applied to the cancel button in screenshot mode.|*btn btn-default btn-block*|\n|enterScreenshotModeButtonClass|The class applied to the enter screenshot mode in feedback modal.|*btn btn-info btn-block*|\n|feedbackButtonClass|The class applied to the feedback button.|*btn send-feedback-button*|\n|feedbackModalClass|The class applied to the feedback modal.|*modal-md*|\n|maxImageCountReachedErrorMessageClass|The class applied to the max image count reached error message.|*text-warning*|\n|screenshotEmbedClass|The class applied to embedded captured screenshot.|*feedback-screenshot*|\n|screenshotEmbedRemoveButtonClass|The class applied to embedded captured screenshot remove button.|*close*|\n|submitFeedbackButtonClass|The class applied to the submit button in feedback modal.|*btn btn-primary*|\n|takeScreenshotButtonClass|The class applied to the capture button in screenshot mode.|*btn btn-primary btn-block*|\n|uploadButtonClass|The class applied to the upload button in feedback modal.|*btn btn-primary btn-block*|\n|uploadErrorMessageClass|The class applied to the upload error message in feedback modal.|*text-danger*|\n\n#### \u003ca name=\"configuration-other-properties\"\u003eOther properties\n|Property|Description|Default|\n|:-------------|:----------------------|-------:|\n|allowedImageTypes|Allowed image types for uploading (separated by spaces).|*image/png image/gif image/jpeg*|\n|enableLoadingIconClass|Apply *loading-icon* class to capture screenshot button when capturing.|*false*|\n|disableScreenshotMode|Disable capture screenshot mode.|*false*|\n|disableUpload|Disable ability to upload a screenshot.|*false*|\n|maxImageCount|Max image count allowed for submission.|*5*|\n|maxSingleFileSize|Max single file size (in KB) allowed.|*2048*|\n|screenshotOnlyHighlighted|Capture screenshot only of the highlighted area.|*false*|\n\n\n## \u003ca name=\"contributing\"\u003eContributing\nPull requests and issues are welcome.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fherbis%2Fngx-bootstrap-feedback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fherbis%2Fngx-bootstrap-feedback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fherbis%2Fngx-bootstrap-feedback/lists"}