Google Feedback with TypeScript

Introduction

This script allows you to create feedback forms which include a screenshot and clients browser Information. Feedback tool is similar to the Google Feedback based on Typescript/JQuery and HTML2Canvas.

You can download the source code and example from github and furthermore, for demo, you can visit this link.

This library helps you to separate JavaScript code and HTML template, and you could edit templates easily.

Browser Support

• Internet Explorer +9
• All versions Of Google Chrome
• FireFox +3.5
• Newer versions of Safari & Opera

Screenshot Support

• Both rtl and ltr directions

Requirements

• jQuery +1.10 html2canvas

Setup

To use it, you need of course JQuery, so make sure it is loaded first. I always like to use JQuery.com CDN for that:

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

For create screensnapshot, you need html2convas.js, so add it into html file:

<script src="../src/html2canvas.js"></script>

For feedback tool, you need to add feedback.js (compiled feedback.ts - typescript) :

<script src="../src/feedback.js"></script>

Also, you should load the stylesheet of the feedback:

<link href="../src/styles/feedback.rtl.css" rel="stylesheet" />

Example

Html

<button id="content">feedback</button>

JavaScript

function onStart() {
            console.log('onStart');
        }
function onClose() {
            console.log('onClose');
        }

var options = new phoenix.feedbackOptions(onStart, onClose); 
new phoenix.feedback("content", options);

//--------------------or-------------------------//

new phoenix.feedback("content", new phoenix.feedbackOptions(onStart, onClose));

** For more information about feedbackOptions, you must read the below section.

phoenix.feedbackOptions

feedbackOptions has 5 parameters as you can see below.

export class feedbackOptions {
        private fb_Content: feedbackContent;
        constructor(
            public onStart: () => void = function () { },
            public onClose: () => void = function () { },
            public url: string= "localhost/send",
            private contentTemplate: string = "../src/templates/fa-Ir/template.html") {
            this.fb_Content = new feedbackContent(
                this.url,
                this.contentTemplate,
                this.onClose);
        }
  }

• onStart: function (Optional) -> this method call before feedback module is opened
• onClose: function (Optional) -> this method call after feedback module is closed
• url: string (Optional) -> this property for send feedback data to custom ajax url
• contentTemplate: string (Optional) -> this string is address of templates in server
• contentTemplate default: "../src/templates/fa-Ir/templates.html", you can customize this file for yourself

Post Data

The information from the client will be sent through Ajax post request. The information is in JSON format.

feedback: {
                   browserInfo: {
                                  appCodeName,     // : string = navigator.appCodeName;
                                  appName,     //: string = navigator.appName;
                                  appVersion,  //: string = navigator.appVersion;
                                  cookieEnabled,   //: boolean = navigator.cookieEnabled;
                                  onLine,      //: boolean = navigator.onLine;
                                  platform,    //: string = navigator.platform;
                                  userAgent,   //: string = navigator.userAgent;
                                  currentUrl,  //: string = document.URL;
                                  html, // = $('html').html().replace($('#fb-module').html(), '');
                                  screenSnapshot,  //The screenshot of the feedback.
                       //- base64 encoded data URI
                                 },
                   note // user's description
        }

Change Log

01.02.2016

• Merge All template files such as description.html, highlighter.html, ... into one html file templates.html

20.03.2016

• Add order number of highlighter box
• Add highlightTextbox under the lighter box for type additional description for each highlighter box

At last, when you click on feedback button, you see the below screenshots: