How to integrate Usersnap in your development workflow

Usersnap can be integrated easily to any type of web page. The Usersnap help page offers an overview of how to integrate Usersnap in your site using a simple JavaScript snippet. We offer various CMS plugins for WordPress, Drupal or Joomla – but it doesn’t end there!
If you want to customize your Usersnap integration – for example: show it only to logged-in users, or add additional backend information to the report – you need to include Usersnap manually in your template. Are you a PHP, Python or RoR dev? Then you’re in luck, as we describe how to integrate Usersnap using those languages in this post! Speed up your development workflow!

Include Usersnap with PHP

Save your Usersnap snippet in a file called usersnap.inc.php, which includes your API-Key. You can even fetch this API key from an config file or environment variable.

If you like this article, give it some sharing ❤️

<script type="text/javascript">
(function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//api.usersnap.com/load/YOUR-APIKEY-HERE.js';
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
})();
</script>

After that, include this snippet on every page you want to include Usersnap, for example in the footer:

<?php
@include("usersnap.inc.php");
?>

Like we mentioned above, you can add conditions here, and for example only show the Usersnap feedback button to logged-in users.

Include Usersnap with Python / Mako Templates

Usersnap in your Python development environmentSave your Usersnap snippet in a file usersnapinclude.mako, which includes your 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/YOUR-APIKEY-HERE.js';
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
})();
</script>

You can paste this snippet in any template you like by adding

<include file="usersnapinclude.mako" />

to your mako templates, at a position before the closing body-tag. You could additionally include some conditions here, and only show the feedback button to logged-in users.

Include Usersnap with Ruby on Rails

Usersnap in your Ruby on Rails development environmentSave your Usersnap snippet, including your API-Key, in a file called _usersnap.html.erb:

<script type="text/javascript">
(function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//api.usersnap.com/load/YOUR-APIKEY-HERE.js';
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
})();
</script>

If you are using Heroku, you can even load the API key from an environmental variable by using

s.src = '//api.usersnap.com/load/<%= ENV["USERSNAP_APIKEY"] %>.js';

inside _usersnap.html.erb. On other systems, you can fetch the Usersnap API key from a config file (or just copy it into your template).

To include this snippet in your main template, add a partial import just before the closing body-tag.

<%= render :partial => "usersnap" %>

Include Usersnap with *

The concept of template includes is covered in nearly every modern web language and framework. Missing yours? Feel free to ask in the comments – we will definitely find a way to include Usersnap to your template!

Happy developing!

If you like this article, give it some sharing ❤️
usersnap!

Ready for a test ride?

Reproduce bugs easier with annotated screenshots.
Start your free trial today.

Give it a try!