3 Advanced Configuration Tricks for Usersnap

Usersnap delivers annotated screenshots of the current browser’s content – directly to your favorite project management or bug tracking tool like Basecamp, Trac or Axosoft’s Ontime. If you are already familiar with Usersnap’s basic features, you will be surprised about the following configuration tricks which cover specific use cases.

In this blog post we present three solutions for specific challenges our customers had in the last time.

Create a custom feedback button matching your web design

A lot of our customers asked us whether it is possible to use a custom styled feedback button. Whereas the label of the Usersnap feedback button can be modified easily, it’s also quite simple to craft a custom feedback button which matches your design prerequisites. In the example below, we demonstrate how to style your very own feedback element. Roll up your sleeves, as we’ll unleash our inner web designer, creating a custom feedback button!

The idea here is to hide the default button and set up a different method to invoke the widget. We’re using

We’re using jQuery as it is both, widespread among many sites and pretty easy to use. The main steps to craft your own Usersnap button can be found on Codepen.

First, we configure the Usersnap snippet to hide the standard button! That’s easily be done by configuring the property mode: ‘report’. After that, the default Usersnap button will not show up any longer. We will now create an alternative button (e.g. a div) which will open the Usersnap widget by calling UserSnap.openReportWindow(). To keep it simple, I’ve used jQuery as a little helper here:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
   jQuery(function() {
   jQuery('#feedback').click(function() {
      return false;

You can find all the code on Codepen. Feel free to fork our example and play around with the CSS styling to match your own required web design.

Display the Usersnap button feedback on purpose

A customer approached us with the following request:

We are currently rolling out some specific changes on our website and we’d like to ask some customers by email for feedback – is there a way to display the feedback button only for them?

He also told us, that he’d like to send an email to his selected customers to ask them for additional remarks on the changes. We came up with following solution to this request: we suggested to add a parameter to the URL which can be easily sent out to his customers. If the parameter is present, Usersnap is being displayed, if it is missing (ie: for everyone else), no Usersnap button is present. This way, feedback can be easily collected in a targeted and guided way.

function getURLParameter(name) {
   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null

var _usersnapconfig = null;

if (getURLParameter('usersnapfeedback') === 'yes') {
   var _usersnapconfig = {
      apiKey: 'yourAPIkey',
      emailBox: true,
      commentBox: true,
      tools: ["pen", "highlight", "note"]

(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = '//api.usersnap.com/usersnap.js';
  var x = document.getElementsByTagName('head')[0];

The first function (getURLParameter) is a simple way to get URL parameters from within javascript.

Trigger Usersnap via a URL parameter

Usersnap will only appear, if a visitor enters the customer’s site if the URL-parameter ?usersnapfeedback=yes is present. The emails our customers sent out to his feedback group did contain links in the form of http://company.com?usersnapfeedback=yes – that is: he was able to collect feedback from a well-known peer-group.

how to debug Usersnap

By default, Usersnap suppresses internal error messages and warnings. However, it can be very useful to listen to those messages. The Usersnap configuration object allows specifying an errorHandler function which is called on every occurring error. We always use this errorHandler in combination with a defined debug variable. This way, you can control the behavior of the errorHandler. For example: if you are using PHP you might want to switch the client debug can configure your client debugging like that:

<script type="text/javascript">
   <!-- Debug variable definition -->
      if ($config['environment'] === "development") {
         echo "var _debuggingOn=true;";
      } else {
         echo "var _debuggingOn=false;";

This way, you can control the output of debug messages from your backend code. Next, just add the following errorHandler code to the Usersnap configuration snippet (see also this Codepen)

errorHandler: function(msg) {
   if (_debuggingOn) {
      console.log('Usersnap has a problem %o', msg);

… and you’re all done! If you are using the errorHandler, the Usersnap error message will be displayed in the console of your browser:


We recommend to use this method in general: You don’t have to remove the debugging code every time you build a new version, just disable the debugging and nothing will be printed out! Moreover, you can simply use the console to switch debugging on.

Play around with our CSS styling, errorHandler and displaying of the feedback button on specific pages. And let us know what you think in the comments!

This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.