Question

Is there any way to implement a Google feedback like feature as shown here? We can make the website slightly black-out using CSS, but how can we draw a rectangle on the that particular interface like highlighting some text or error. We can use same concept like sprite cow, has used to highlight the rectangle on particular image link. Any kind of idea and source is welcomed.

Thanks

Answer 1

I asked myself this question recently and when looking at it through the chrome debugger it would appear that they are using some techniques that are more advanced than just sectioning off the screen into highlighted and un-highlighted areas.

The first thing to notice is that google uses 5 iframes to acheive their feedback system.

google-feedback-mask-frame
: This is used just for the mask, it covers the whole screen. I’m not sure why they chose to use a whole iframe for this. But it serves the purpose of making sure you dont click any page links in feedback mode

google-feedback-screenshot-frame
:This is where the real magic happens I suspect. It contains a copy of the page you were viewing, but with some proprietary HTML tags (<gft></gft>) to let the script know where highlight-able content is (images, text, links, etc.)

google-feedback-feedback-frame
: This holds the controls for the highlighted areas as well as the X button for the whole widget.

To pull off the effect google actually does use a bunch of sections like @Jani Hartikainen suggests.
In the screenshot below you can see that when you have multiple selections there’s quite a few div’s that need to be created to accommodate the effect.

I’m sure there’s a very complicated algorithm for figuring out where all the div’s go, but that’s what makes software dev fun right??

google-feedback-proxy-frame
: has the controls that you see in the bottom right side.

google-feedback-render-frame
: This one is a bit more mysterious, all it contains is a script called render_frame.js which is obviously obfuscated and illegible.

In conclusion, using sections IS the way that google does it but there’s a lot more magic that allows them to auto-highlight links and images. If you find out more I’m really interested too so let me know!