Wishbox: Google+ Like Feedback Tool with Annotated Screenshots

When Google+ came out with the screenshot feedback tool, there was a lot of interest for such a tool. We made Wishbox so all websites can have a similar way to get feedback. Plus we added a screenshot editor to draw arrows, circles and jot down notes on the screenshots without ever leaving your page.

Wishbox is useful for all sites, but I think it is especially useful for other web apps. In our web app (JotForm) we get over 100 support queries every day, and having screenshots of the problem makes a big difference on the time it takes to resolve an issue.

Since this is Hacker News let me share how we made wishbox.

I wish I could say we used canvas to take screenshots. We really wanted to do it that way. We gave it a big shot. We spent a month to do it in canvas. Unfortunately, taking screenshots with canvas is a dead end. Especially when you need to get it work on any web site, and on any browser.

But, it worked really well for the drawing tool. We built the tool on top of Fabric.js. Fabric.js is a great library with a lot of potential. We will to contribute our bug fixes and additions to the project soon.

So, how do we take the screenshot? In a nutshell, we get the current DOM of the page, send it to the server, run it on wkhtml2png and return the screenshot to the drawing tool.