Developer's API documentation

The Usersnap widgets can be conveniently configured without any coding skills.

Additionally, the Usersnap widgets can be configured using the Javascript API described below (some coding skills required - we’re happy to help).

Configurations which are made through code always overwrite configurations made by the configurator.

Basics for Usersnap QA Widget

The Usersnap QA widget can be conveniently configured without any coding skills.
You only need to add this code snippet just before the closing body tag.

<script src="//api.usersnap.com/load/YOUR-API-KEY.js" async />

Additionally, the Usersnap QA Widget can be configured using the Javascript API described below (some coding skills required - we’re happy to help).

To configure the Usersnap widget in your code and/or to expose the API the snippet needs to look like this:

<script>
  window.onUsersnapLoad = function(api) {
    window.Usersnap = api;
    api.init();
  }
</script>
<script src="//api.usersnap.com/load/YOUR-API-KEY.js?onload=onUsersnapLoad" async></script>

The pure Javascript version with the API exposed looks like this:

window.onUsersnapLoad = function(api) {
  api.init();
  window.Usersnap = api;
}
var script = document.createElement('script');
script.async = 1;
script.src = 'https://api.usersnap.com/load/YOUR-API-KEY.js?onload=onUsersnapLoad';
document.getElementsByTagName('head')[0].appendChild(script);

If you want to set up your widget configuration, e.g. change the placeholder text, this has to be done in the init method.

<script>
  window.onUsersnapLoad = function(api) {
    api.init({
      fields: {
        comment: {
          defaultValue: 'Here could be a bug report template',
          label: 'Your comment',
          /* labels can also be defined multilingual:
          label: {
            de: 'Deine E-Mail Adresse',
            en: 'Your E-mail address',
          }
          */
          required: true,
        },        
        email: {
          defaultValue: '[email protected]',
          label: 'E-Mail',
          required: true,
        },
        title: {
          defaultValue: 'Predfined Title',
          label: 'Title',
          required: true,
        },        
      },
    });
  }
</script>
<script src="//api.usersnap.com/load/YOUR-API-KEY.js?onload=onUsersnapLoad" async></script>

You can find more information on how to use the API for Usersnap Classic here.

Basics for Usersnap Classic Legacy Widget

If the configuration variable _usersnapconfig is used, it has to be set just before the widget is called.

An example code could look like:

<script type="text/javascript">
 var _usersnapconfig = {
     theme: "brownie"
 };
 (function() {
   var s = document.createElement("script");
   s.type = "text/javascript";
   s.async = true;
   s.src = '//api.usersnap.com/load/'+
        '[APIKEY].js';
   var x = document.getElementsByTagName('script')[0];
   x.parentNode.insertBefore(s, x);
 })();
</script>

You can find more information on how to use the API for Usersnap Classic Legacy Widget here.

Updated about a year ago



Developer's API documentation


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.