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.
[otw_is sidebar=otw-sidebar-1]
<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.
[otw_is sidebar=otw-sidebar-2]
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!
[otw_is sidebar=otw-sidebar-4]
Capture user feedback easily. Get more insights and make confident product decisions.
Getting feedback has never been easier and we hope you’ve realized that after reading this article. Let us know what you think, your feedback is important.
And if you’re ready to try out a customer feedback software, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
