Support Request Tool like Google Feedback

Have you ever noticed Google+ has an amazing feature called Google Feedback. You click on feedback highlight an area of the site page and getting screenshot with your marking on it sent to the Google support team. If you wonder of having this tool on your own, just take my code and adapt for your requirements.

How to install

First of all you have to install server side components for making screenshots ( XServer and CutyCapt).

The first set of steps is to get the requirements for CutyCapt installed and the Headless XServer setup. On Ubuntu it can be done like that:

 sudo su 
 sudo apt-get update
 sudo apt-get -y install build-essential
 sudo apt-get install xvfb
 sudo apt-get install xfs xfonts-scalable xfonts-100dpi
 sudo apt-get install libgl1-mesa-dri
 sudo apt-get install subversion libqt4-webkit libqt4-dev g++

Now let’s download and install CutyCapt?.

 mkdir /usr/ccapt/
 cd /usr/ccapt/
 svn co https://cutycapt.svn.sourceforge.net/svnroot/cutycapt cd cutycapt/CutyCapt? 
 qmake 
 make

Thanks Dave Elkins for the guidance

Create a folder for the tool scripts (e.g. ‘srt’) and copy there the package files.

You have to include into the HTLM code of you page JS and CSS on the Support Request Tool plugin

 <link rel="stylesheet" type="text/css" href="./assets/srt.css" /> <script type="text/javascript" src="./js/jquery.srt.js"></script>

It is assumed that you are using jQuery on the page:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

You also need to include srt-embedding.php

 <? include "srt-embedding.php" ?>

At the last we change in srt-config.php relative path for the tool folder

 define ('SRT_BASE_RPATH', './srt');

And the ‘screenshots’ folder of the package must have write permission.

 chmod 777 screenshots

How it works

If briefly, when the page is being generated srt-embedding.php adds HTML of feedback form. As form is submitted to srt-preview.php, it makes long-polling XMLHttpRequest to srt-screenshot.php. The controller calls to XServer requesting it make a screenshot of the page with srt-data parameter containing marked up area. When page is rendered for XServer with srt-data GET parameter, srt-embedding.php displays attention area (the rectangle and outlining shadows). Srt-screenshot.php waits for XServer to finish screenshot ad responds back to AJAX request. Client script of srt-preview.php gets screenshot URL and renders the image. Now when you have the screenshot with marked up attention area, you can do with it whatever you want. For example you can send support request with the screenshot and the given description attached.

Now you can download the package with the example here.