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
It is assumed that you are using jQuery on the page:
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.