API for Platform Project

Exposing the Usersnap API

If you'd like to do further customization with the Usersnap Platform Project widget, you need to install the widget with the following JavaScript code.

With the exposed Usersnap API you can call the API methods later in your code.

<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/[YOUR-API-KEY]?onload=onUsersnapCXLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Setting default values when initializing the widget

<script>
  window.onUsersnapCXLoad = function(api) { 
    api.init({
      custom: {
        applicationLanguage : "de",
      },
      user: {
        userId: "123",
        email: "[email protected]",
      },
    });
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/global/load/[YOUR-API-KEY]?onload=onUsersnapCXLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>
  • "custom": Any custom data that should be passed along with the feedback
  • "user": User data from known users

Hiding/Displaying the feedback button via API

api.show('[PROJECT-API-KEY')
api.hide('[PROJECT-API-KEY')

The feedback button of a certain project can be hidden/displayed independently via the API.
Just call those methods and pass the APIKEY of the according project.

Opening the widget via API

api.show('apiKey').then((widgetApi) => widgetApi.open())

Triggering an event

You can trigger widgets to be opened up if a certain Usersnap event is fired. Configure the event name in the widget configuration page.

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

<script>
  // function for triggering events from your code
  function triggerUsersnapEvent(eventName) {
    window.Usersnap && window.Usersnap.logEvent(eventName);
  }
  
  // i.e. if a button is clicked, execute this function
  triggerUsersnapEvent('button1clicked');
</script>

More related info here.

Advanced Installation - Project specific snippet

If you're not using the global snippet, but for each widget/project it's own installation snippet, please follow these code examples.

  • Installation widget and exposing API
<script>
  window.onUsersnapCXLoad = function(api) {
    api.init();
    window.Usersnap = api;
  }
</script>
<script src="https://widget.usersnap.com/load/YOUR-API-KEY?onload=onUsersnapCXLoad" async></script>
  • Setting default values - Email address
api.on('open', function(event) {
    event.api.setValue('visitor', '[email protected]');
});
  • Customizing the feedback button
api.init({
  button: {isHidden: true}; //hiding the button
});
api.init({
  button: {
    position: "rightCenter" //or "rightBottom" or "bottomRight"
  } 
});
  • Changing visibility of the button via API
api.showButton()

api.hideButton()
  • Opening the widget via API
api.open()
  • Custom data
api.on('open', function(event) {
    event.api.setValue('custom', {userID: 'u123', enviroment: 'staging'});
});

You can pass any data that is of interest for you as "custom data".
This data you can view on the feedback's detail screen under "More details" -> "Custom data"

  • Passing user information

You can pass user information to Usersnap to increase the options to target specific user groups and provide targeted experiences.

// assuming a global widget config looking something like this
window.onUsersnapCXLoad = function(api) {
    api.init({
    user: {
      email: "[email protected]", // Email address
      userId: "USER_ID", // on client system
    }
  });
}

📘

Log in to your Usersnap account or sign up for a free trial.

Updated about a month ago


API for Platform Project


Suggested Edits are limited on API Reference Pages

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