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 a config file or environment variable.

<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

Save 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

Save 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!