-
Notifications
You must be signed in to change notification settings - Fork 37
JS Feedback Tool
This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send.
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript!
- feedback.js : Helps manage UI for the feedback tool, highlight, blackout pages and receives user text message.
- html2canvas.js : Responsible for rendering the highlighted/blackedout webpage to an image file.
- sendfeedback.php: Sends the text message to info@synbiota.ca with attached screenshot.
- PHPMailer_5.2.0 : PHP Mailer library used in sendfeedback.php file to assist in attaching image file to email.
The backend uses a file called sendfeedback.php and uses PHPMailer to send emails with attached screenshot to any email address. The file sendfeedback.php can be edited to change To and From information along with options to embed or attach screenshot in the email.
<script src="js/jquery.js"></script>
<script src="js/feedback.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Feedback({h2cPath:'js/html2canvas.js'});
});
</script>
Firefox 3.5+
Newer versions of Google Chrome, Safari & Opera
IE => 9
-
Not all CSS properties are supported only most common ones so some will not render.
-
Same Origin Policy (SOP) cannot interact with Javascript or other Scripts like JQuery on other websites and therefore will not be able to render the images.
-
Does not render the Flash or Java applets.
-
Does not render iframe content unless it is under the same origin.
-
Scalable Vector Graphic images have issues rendering because they taint the Canvas.
html2canvas.js does not support all CSS properties and so there might be issues with rendering. The html2canvas.js file should be updated constantly to account for all changes made in the master branch at github. The feedback.js file should only be updated via Synbiota Inc. sources and not github because that file is unique to Synbiota.ca and gentle.synbiota.ca has a unique file as well. It will also be a good practice to update PHPMailer library to the latest version. The relevant CSS files for feedback.js can be changed for better UI. In addition the sendfeedback.php file should be edited for desired email from, to and message options.
- html2canvas.js @github
- feedback.js @github (for reference only do not update code from github)
- PHP Mailer Library @google
Firefox
-------end of message-------[ Browser Code Name: Mozilla ]-----
[ Browser Name: Netscape ]-----
[ Browser Version: 5.0 (Windows) ]-----
[ Cookies Enabled : true ]-----
[ Browser on line: true ]-----
[ Operating System : Win32 ]-----
[ User-agent Header: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0 ]-----end of system info------
Chrome
-------end of message-------[ Browser Code Name: Mozilla ]-----
[ Browser Name: Netscape ]-----
[ Browser Version: 5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 ]-----
[ Cookies Enabled : true ]-----
[ Browser on line: true ]-----
[ Operating System : Win32 ]-----
[ User-agent Header: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 ]-----end of system info------
Internet Explorer
-------end of message-------[ Browser Code Name: Mozilla ]-----
[ Browser Name: Microsoft Internet Explorer ]-----
[ Browser Version: 5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; HPNTDFJS) ]-----
[ Cookies Enabled : true ]-----
[ Browser on line: true ]-----
[ Operating System : Win32 ]-----
[ User-agent Header: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; HPNTDFJS) ]-----end of system info------
Opera
-------end of message-------[ Browser Code Name: Mozilla ]-----
[ Browser Name: Netscape ]-----
[ Browser Version: 5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 OPR/16.0.1196.62 ]-----
[ Cookies Enabled : true ]-----
[ Browser on line: true ]-----
[ Operating System : Win32 ]-----
[ User-agent Header: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 OPR/16.0.1196.62 ]-----end of system info------
Visit the following links for Examples and more information regarding the Feedback Tool:
-
feedback@github (for reference only)