Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / Typescript

Google Feedback with TypeScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
27 Mar 2016CPOL2 min read 11.5K   2  
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.

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:

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

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

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

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

Also, you should load the stylesheet of the feedback:

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

Example

Html

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

JavaScript

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.

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

Image 1

Image 2

License

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


Written By
Software Developer (Senior) Mellat Insurance
Iran (Islamic Republic of) Iran (Islamic Republic of)
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --