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

Stats

5.7K views
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.

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:

License

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

Share

About the Author

dotbydot
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