API examples

Examples of how to use the API

Triggering a Usersnap event - example

You can trigger widgets to be opened if a certain Usersnap event is fired. This example shows you how to trigger a Usersnap event. In the display rules (Auto-Popup) you can set the event name to which you want to show a feedback widget.

<script>
  window.onUsersnapCXLoad = function(api) {
    api.init();
    window.Usersnap = api;
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/global/load/[GLOBAL_API_KEY]?onload=onUsersnapCXLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

More related info here.

Click a link to open the feedback widget

Hide the feedback button in the dashboard by setting the audience to "Nobody". After the Usersnap widget is initialized in your website / web application (the snippet code is added), you can open the widget by using this code example.

<li class="nav-item"><a class="sidebar-link" href="javascript:window.Usersnap.open();"><span class="icon-holder"><i class="c-red-500 ti-share"></i> </span><span class="title">Click to trigger widget</span></a></li>

Set variables when the widget is opened (button clicked)

You have to install the Usersnap snippet code before. And don't forget to pass on the API to the global variable window.Usersnap for this example.

If you are opening a widget with the API-key of a specific project, you can use the "open"-event and set the variables like visitor or custom at that moment and not when Usersnap is initiated.

window.Usersnap.show('[Project-API-key]').then((widgetApi) => {
  /* In here you can use the widgetApi as documented for the project snippet */

  widgetApi.on('open', (event) => {
        console.log('setting value now!');
        event.api.setValue('visitor', '[email protected]');
        event.api.setValue('custom', { userId: '123', environment: 'staging' });
        alert('now, values are set');
    });

});

Open a widget after after 5 seconds

This widget opens after 5 seconds and will not show again before 30 days.

<script>
    // set cookie
  function setCookie(name, value, seconds) {
      var date, expires;
      if (seconds) {
          date = new Date();
          date.setTime(date.getTime()+(seconds*1000));
          expires = "; expires="+date.toGMTString();
          
      } else {
          expires = "";
      }
      document.cookie = name+"="+value+expires+";secure";
  }
  
  // get cookie
  function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
         console.log('getCookie ' + c.substring(name.length, c.length));
           return c.substring(name.length, c.length);
          }
        }
        return "";
  }
  
  window.onUsersnapCXLoad = function(api) {
    api.init();
    window.Usersnap = api;
  }

  // open widget after 5 seconds
  var noopen = getCookie('noopen');
  console.log('getCookie ' + noopen);
  if (noopen !== 'true') { 
    setInterval(function() { window.Usersnap.open() }, 5000); }

  // set a cookie for 30 days to not show up again
  setCookie('noopen','true', 60*60*24*30);

  var script = document.createElement('script');
  script.defer = 1;
  /* no global, because the if clause must call the project specific project */
  script.src = 'https://widget.usersnap.com/load/[APIKey]?onload=onUsersnapCXLoad';
  document.getElementsByTagName('head')[0].appendChild(script);

</script>

Short notice: you can also use the auto-popup in the dashboard of Usersnap and set the time-on-page. No need to code there.

Open a feedback widget after a flow/process is finished

Let's assume you have a new flow in your application. After the process or flow is finished, your development team should just fire an Usersnap event and you can display a widget for it.

In the "Display Rules" section of your project (in the dashboard), set the configuration to "Auto Popup" and choose the trigger "API event". Add the name of the event. Here it's "new_payment_is_finished".

Eh voila, the feedback widget pops up after the process is finished.

<script>
window.Usersnap.logEvent('new_payment_is_finished');
</script>

Show the feedback widget after a user leaves the browser window (exit-intent)

This can be valuable to learn more about why your users are leaving your website or web application.

Currently, you need a bit of coding in JavaScript for that.

In this example, we use JQuery (a JavaScript library) to handle the exit-intent (leaving the browser window with the mouse).

<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5ad15d8c3265e9c49b438f4e" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://usersnapdemo.com/exitintent_website/jquery.exitintent.min.js"></script>

<script>

$.exitIntent('enable');

$(document).bind('exitintent', function() {
  // An intent to exit has happened
  //if (getCookie('widget_fired') != 'yes') {
      window.UsersnapCX.open();
      //setCookie('widget_fired','yes', 30);
  //}
});
     
window.onUsersnapCXLoad = function(api) {
  window.UsersnapCX = api;
  api.init();            
};
  
var script = document.createElement('script');
script.defer = 1;

// CHANGE - to your API key for Usersnap CX in the URL - IMPORTANT // ONLY EXIT INTENT
script.src = '//widget.usersnap.com/load/[APIkey]?onload=onUsersnapCXLoad&isdev=true';
document.getElementsByTagName('head')[0].appendChild(script);
                     
</script>

Updated 25 days ago


API examples


Suggested Edits are limited on API Reference Pages

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