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!
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]
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.
_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" %>
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]
Many believe that “process is the foundation of success,” and for those who aren’t entirely…
Selecting the right UX research tools transforms how product managers, CPOs, and product designers tackle…
Are you experiencing delays and setbacks in your product development process due to ineffective bug-reporting…
On a scale 1 to 10, how confident are you that your own website experience…
In today's market, product managers and CPOs can access a wide range of Enterprise Feedback…
In today's product management space, finding the right tools to navigate the complexities of the…