I built this service because I needed it for myself. Every example I gave on the homepage is one I have actually experienced - I just couldn't deal with it anymore, so I made this. As I built it, I optimized it for operating on a basically free budget - we just act as a pipe to Trello, and even the javascript file used for that pipe is hosted by each client (thus consuming their bandwidth, not ours). As a result, the infrastructure required is basically nil. Thus... free for me, free for you.

    Since the javascript is controlled by each client utilizing the service, I do hope other people come up with nifty tricks they open source that I could then leverage myself too, so it's not exactly altruistic (e.g. ability to draw arrows/etc on the canvas image before it's sent to Trello). Also I'd be open to adding additional paid features, if requested (e.g. integration to Github Projects, or other requests - drop me a line at bugswithcontext[at]teachthe.net).

    To use the service, you download this javascript file (click view source to see it formatted - note it will have your auth token embedded in it after you login to our app). If you search for the variable 'card_description', you'll see the exact string value that is stored onto the Trello card. You can edit that, add additional variables (like a logged in user's email), or do anything else you want.

    You may also wish to change the popup where the user types the text of the bug report. Currently, it's just a window.prompt - and it would be far better as a fancy text area in a more native dialogue to your app.

    You could even extend out interactions with the html2canvas library, such as making it display the screenshot to the user and letting them draw circles/squares/arrows on it before submitted it to our api, or highlighting/blacking out certain elements (similar to this demo).

    The underlying problem is we want to allow unauthenticated users to create cards (bug reports) in your Trello account. Trello grants an api token that allows access to all of a user's boards/lists - which is far too permissive, we can't use that in a frontend app.

    So this app acts as a layer between your website and Trello. You authenticate to Trello on our website, giving us the excessively permissive Trello token. We then grant you a BugsWithContext token to use in your frontend app (our javascript file) - and that token's sole ability is to create new cards on the single board and list you identify to our service. Effectively, we create a Trello api token with drastically reduced permissions, mitigating the security issue.

    Some of our competitors offer pixel-perfect screenshots for bug reports. They can offer this because they use a chrome-extension, which supports screenshots natively. We decided it was more important to support bug reports from people without chrome extensions installed, and thus we use the excellent html2canvas javascript library to take our 'screenshots'. Our 'screenshots' are not a true screenshot - rather, html2canvas renders the current page as a canvas image by reading the DOM and the different styles applied to the elements. Each CSS property has to be manually built to be supported - and while they have wide support, it's not 100%. As such, there can be some minor style differences.

    There's also the possibility of image-based differences. As the whole 'screenshot' is created in the client's browser with javascript, cross-origin content/images will be blocked from rendering. If this affects you, it's easy enough to solve, you just need to enable a proxy. Download one of the proxies from this page, host it on your own server, then edit our javascript to point to it (search for the word proxy in our javascript, it's commented out, just re-enable it and point it to the proxy file you hosted).

    Finally, one last thing you might try... there are two different versions of the html2canvas library. Version 0.4.1 is what we use by default, as it's hosted in Cloudflare's CDN. I have noticed that version 1.0.0 renders certain things better - but unfortunately it's not available in a CDN. In the code, search for the bwc_html2canvas_version and swap it from 0.4.1 to 1.0.0 and see if that works better for you. If it does, consider downloading the 1.0.0 version of the html2canvas and hosting it on your server and using it (the "1.0.0" in the script is from a demo server with limited bandwidth, sufficient for testing but not for production).