API for project-specific widgets (old version)

Project specific snippet

❗️

Notice!

We recommend using the global snippet and its API for showing and hiding feedback buttons and widgets. The project-specific snippets and API will only be maintained and not enhanced in the future.

📘

API for project-specific snippets

This snippet will only work for this project and ignore all display rules of this and other projects. Moreover, this version of the API has its own methods, listed below.

If you are using the global snippet for the installation of the Usersnap feedback platform, please go to this API docu.

Project-specific widgets react to the following events

Please, read the documentation about the events in the general Usersnap API section

Installation widget and exposing API

<script>
  window.onUsersnapCXLoad = function(api) {
    api.init();
  }
  var script = document.createElement('script');
  script.async = 1;
  script.src = 'https://widget.usersnap.com/load/<<PROJECT_API_KEY>>?onload=onUsersnapCXLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</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 the API

api.open()

Setting custom data via the API

api.on('open', function(event) {
    event.api.setValue('custom', {userID: 'u123', enviroment: 'staging'});
});

You can pass any data that is of interest to you as "custom data".

This data you can view on the feedback's detail screen under "More details" -> "Custom data"

Examples on popular frameworks

Check out sample code for installing widgets in different popular frameworks in the repository below:

github.com

usersnap/public