Feedback component inspired by "Google Maps" feedback mechanism
bower install polymer --save
- Add Polymer Platform JS script in your page
<script src="../bower_components/platform/platform.js"></script>Install x-feedback using bower
bower install x-feedback --save
Polymer aka WebComponents uses <link import> to reference components
In your layout / html page add the following directive
<head>
<link rel="import" href="[relative path bowercomponents]/x-feedback/feedback/feedback.html">
</head>
Add x-feedback markup to your page
<x-feedback></x-feedback>
polymer-feedback propagates custom eventing the host document object. The consuming page can isten for the custom events and act upon.
document.addEventListener("x-feedback-init", function(e){
e.detail; /*** Carries the data for feedback initialization state ***/
}); document.addEventListener("x-feedback-complete", function(e){
e.detail; /*** Carries the data for feedback completed state ***/
}); document.addEventListener("x-feedback-cancelled", function(e){
e.detail; /*** Carries the data for feedback cancelled state ***/
});Feedback component provides options to customize the component. Following are the list of attributes supported.
| Attribute Name | Type | Description |
|---|---|---|
| feedbackBtnText | String | Button text to be displayed in "Feedback / Comments" button. Default is "Feedback" |
| feedbackTitle | String | Feedback modal title, Default is "Feedback" |
| cancelBtnText | String | Cancel Button Text, default is "cancel" |
| feedbackDesc | String | Description for Feedback form. |
| submitBtnText | String | Submit Button text, default is "send" |
| position | String | Position of "Feedback" button, possible values are rightfix, leftfix, toprightfix, bottomleftfix, bottomrightfix |
Thanks to Eric Bidelman , for sharing ScreenShotJS