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