Google Style Feedback Tool with jQuery and HTML2Canvas - Feedback

Feedback is a simple-to-use jQuery & HTML2Canvas based feedback widget that allows the visitor to send a feedback or report a bug with custom description and highlight area (screenshot) to a specific URL through ajax post request.

How to use it:

1. Include jQuery library together with jQuery Feedback plugin' stylesheet and JavaScript on your html page.

<link rel="stylesheet" href="feedback.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="feedback.js"></script>

2. Initialize the plugin on document ready.

$.feedback({

  // the url you want to send the feedback to
  ajaxURL: 'http://test.url.com',

  // the source of the html2canvas library
  html2canvasURL: 'html2canvas.min.js'

});

3. Full plugin options.

// The URL where the plugin will post the screenshot and additional informations
ajaxURL:        '',

// post the browser information
postBrowserInfo:    true,

// post the page's HTML structure.
postHTML:       true,

// Whether you want your client to post the URL of the page.
postURL:        true,

// Url to the proxy which is to be used for loading cross-origin images. 
// If left empty, cross-origin images won't be loaded.
proxy:          undefined,

// render each letter seperately
letterRendering:    false,

// The default button text.
initButtonText:     'Send feedback',

// The color of the highlight border.
strokeStyle:      'black',

// The color of the shadow.
shadowColor:      'black',

// Sets the horizontal / vertical distance of the shadow from the shape.
shadowOffsetX:      1,
shadowOffsetY:      1,

// The blur level for the shadow.
shadowBlur:       10,

// Sets the type of corner created, when two lines meet.
lineJoin:       'bevel',

// Sets border of the highlighted area.
lineWidth:        3,

// The URL where the plugin can download html2canvas.js from.
html2canvasURL:     'html2canvas.js',

// Define a custom button that appears on the lower right corner.
feedbackButton:     '.feedback-btn',

// Sets whether the next modal for entering description should appear or not
showDescriptionModal:   true,

// Sets whether the user will be able to drag the feedback options modal or not
isDraggable:      true,

// A callback function to be called when clicking on take screenshot button. The callback function's prototype is function(post)
onScreenshotTaken:    function(){},

// custom template
tpl: {
  description:  '<div id="feedback-welcome"><div class="feedback-logo">Feedback</div><p>Feedback lets you send us suggestions about our products. We welcome problem reports, feature ideas and general comments.</p><p>Start by writing a brief description:</p><textarea id="feedback-note-tmp"></textarea><p>Next we\'ll let you identify areas of the page related to your description.</p><button id="feedback-welcome-next" class="feedback-next-btn feedback-btn-gray">Next</button><div id="feedback-welcome-error">Please enter a description.</div><div class="feedback-wizard-close"></div></div>',
  highlighter:  '<div id="feedback-highlighter"><div class="feedback-logo">Feedback</div><p>Click and drag on the page to help us better understand your feedback. You can move this dialog if it\'s in the way.</p><button class="feedback-sethighlight feedback-active"><div class="ico"></div><span>Highlight</span></button><label>Highlight areas relevant to your feedback.</label><button class="feedback-setblackout"><div class="ico"></div><span>Black out</span></button><label class="lower">Black out any personal information.</label><div class="feedback-buttons"><button id="feedback-highlighter-next" class="feedback-next-btn feedback-btn-gray">Next</button><button id="feedback-highlighter-back" class="feedback-back-btn feedback-btn-gray">Back</button></div><div class="feedback-wizard-close"></div></div>',
  overview:   '<div id="feedback-overview"><div class="feedback-logo">Feedback</div><div id="feedback-overview-description"><div id="feedback-overview-description-text"><h3>Description</h3><h3 class="feedback-additional">Additional info</h3><div id="feedback-additional-none"><span>None</span></div><div id="feedback-browser-info"><span>Browser Info</span></div><div id="feedback-page-info"><span>Page Info</span></div><div id="feedback-page-structure"><span>Page Structure</span></div></div></div><div id="feedback-overview-screenshot"><h3>Screenshot</h3></div><div class="feedback-buttons"><button id="feedback-submit" class="feedback-submit-btn feedback-btn-blue">Submit</button><button id="feedback-overview-back" class="feedback-back-btn feedback-btn-gray">Back</button></div><div id="feedback-overview-error">Please enter a description.</div><div class="feedback-wizard-close"></div></div>',
  submitSuccess:  '<div id="feedback-submit-success"><div class="feedback-logo">Feedback</div><p>Thank you for your feedback. We value every piece of feedback we receive.</p><p>We cannot respond individually to every one, but we will use your comments as we strive to improve your experience.</p><button class="feedback-close-btn feedback-btn-blue">OK</button><div class="feedback-wizard-close"></div></div>',
  submitError:  '<div id="feedback-submit-error"><div class="feedback-logo">Feedback</div><p>Sadly an error occured while sending your feedback. Please try again.</p><button class="feedback-close-btn feedback-btn-blue">OK</button><div class="feedback-wizard-close"></div></div>'
},

// Function that runs when you close the plugin.
onClose:        function() {},

// Changing to false will remove the borders from the highlighted areas when taking the screenshot.
screenshotStroke:   true,

// By default when you move your cursor over an element the plugin 
// will temporarily highlight it until you move your cursor out of that area.
highlightElement:   true,

// By Setting this true the user will have to describe the bug/idea 
// before being able to highlight the area.
initialBox:       false

Change log:

2017-04-17

• Update feedback.min.css

---

This awesome jQuery plugin is developed by ivoviz. For more Advanced Usages, please check the demo page or visit the official website.