Add-ons

Usersnap hidden

Usersnap is the #1 bug tracking- and feedback tool for every web project.

Get browser screenshots and visual bug reports with additional browser information directly delivered to your dashboard. Annotate and send browser screenshots and bug reports to Usersnap or your existing bug tracking and project management tools.

Get understandable bug reports and visual feedback from your customers without installing anything! Never ask for a browser screenshot again.

Get screenshots from the visual bug tracker Usersnap. Usersnap creates screenshots of the current browser content. It helps you to communicate effectively about issues and share feedback between developers, customers and everyone involved in a web project.

With point and click issue reporting, tracking bugs was never easier. Screenshots, the used browser version and a lot of additional information help you to solve every web issue faster. No endless bug reporting forms for your users. A small snippet of code on the website creates a feedback button. Your users may highlight, blackout and use sticky notes to give visual feedback which is then sent to you!

Features:

  • in-browser screenshots: you’ll get a screenshot of what your users sees. No plugins required. Execute cross browser tests and see browser specific issues immediately.
  • Collaborate & Communicate: invite your colleagues into Usersnap and discuss screens and find solutions together.
  • JavaScript error logging: get visual bug reports with advanced client-side JavaScript error recording.
  • seamless integrations: Already using a project management or bug tracking tool? No worries - we’ll add value to your tool.

Connect existing tool
Usersnap integrates with every leading project management and bug tracking tool. Easily connect Usersnap with your existing tool.

Support
We at Usersnap are always here to help. Contact us on twitter. or get in touch with us via help@usersnap.com

Personal

$19 per month

  • Great for freelancers working on web projects.
  • 1 project
  • 5 users
  • Integration for emails

Team

$69 per month

Agency

$129 per month

Enterprise

$*** per month

Instructions for Ruby
  • Add the following lines to your gemfile
gem 'ey_config'
  • Create a template which contains the Usersnap snippet. You can configure the look and feel with the Usersnap configurator.
<%
apikey = ""
begin
  apikey = EY::Config.get(:usersnap, 'api_key')
rescue
  puts "Cannot retrieve Usersnap api_key from config."
end
%>

<script type="text/javascript">
  (function() {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = '//api.usersnap.com/load/<%= apikey %>.js'; 
      var x = document.getElementsByTagName('head')[0];
      x.appendChild(s);
  })();
</script>
  • Tip: Save this snippet in a file named _usersnap.html.erb and you can include it in other templates by adding this line to your main template:
<%= render :partial => "usersnap" %>
  • Just paste this snippet to the site you want to use Usersnap on. The position of this snippet has to be right before the closing body tag. You can configure the look and feel with the  Usersnap configurator.
<?php
# read the config file
$string = 
file_get_contents("/data/trial/current/config/ey_services_config_deploy.json",
false);
if ($string == false) {
  die('FATAL: Could not read credentials file');
}

# the file contains a JSON string, decode it and return an
# associative array
$creds = json_decode($string, true);

$USERSNAP_APIKEY = $creds['usersnap']['api_key'];
?>

<script type="text/javascript">
  (function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//api.usersnap.com/load/<?php echo $USERSNAP_APIKEY; ?>.js';
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
  })();
</script>
  • Load the Usersnap API­Key from the EngineYard settings file into the template:
var EYConfig = require('ey_config'); 
app.get('/',function(req,res){
   res.render('index', {
      pageTitle:'Usersnap with Express and Jade',
      usersnap_apikey: EYConfig.get('usersnap', 'api_key')
   });
});
  • Save this snippet as usersnap.jade inside your views directory. You can configure the look and feel with the Usersnap configurator.
-­var myapikey = usersnap_apikey
script(type="text/javascript")
    (function() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = '//api.usersnap.com/load/#{usersnap_apikey}.js';
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
    })();
  • Include this partial template in your main template (for example layout.jade) as last element in your body tag:
doctype html5
html
   head
      title #{pageTitle}
   body
      div.main
         block content
      include usersnap

Please log in if you would like to set up the service.