Click here to Skip to main content
14,174,749 members
Click here to Skip to main content
Add your own
alternative version


2 bookmarked
Posted 27 Mar 2016
Licenced CPOL

Google Feedback with TypeScript

, 27 Mar 2016
Rate this:
Please Sign up or sign in to vote.
This script allows you to create feedback forms which include a screenshot and clients browser Information. Feedback tool similar to the Google Feedback based on Typescript/JQuery and HTML2Canvas.

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.


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


  • jQuery +1.10 html2canvas


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

<script src=""></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" />



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


function onStart() {
function onClose() {

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


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

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


feedbackOptions has 5 parameters as you can see below.

export class feedbackOptions {
        private fb_Content: feedbackContent;
            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(
  • 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


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


  • 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:


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) Mellat Insurance
Iran (Islamic Republic of) Iran (Islamic Republic of)
No Biography provided

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190524.3 | Last Updated 27 Mar 2016
Article Copyright 2016 by dotbydot
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid