Usersnap code snippet

What can you do with the installation code of Usersnap (use it globally vs. project-specific)?

The Usersnap snippet code is also known as the global snippet. Why? Because you only have to install one code on all your websites / web applications and you define in your dashboard with feedback widget / feedback button is showing up.

In case you want to have separated installation codes for each project (i.e. for separate clients), you can use the project-specific snippet code.

What can you do with the global snippet?

General concept

There is a code snippet, that you or your developers have to install once in your web application or website, on all places where you would like to have Usersnap widgets being possibly displayed.

This Usersnap snippet code (global snippet) allows you to define the visibility of each feedback project on your own terms.

📘

Once you created a new feedback project, you should specify when and where it should be displayed. That's how you make sure that the widget or button only appears on the website pages or your web application where it should appear. You can also limit the visibility to certain user groups.

Once you set it "live", it will show up on all the specified locations.

We slightly changed the installation dialog in the last release, this video will be updated soon. Still will work for you :).

Design your own feedback button

A custom button can be created and placed where you want it to be. There are two options for how to do it.

OPTION 1
Let your development team create a button or navigation item in your website or web application.

// You have to install the Usersnap snippet code like described in the Installation section
// Use the [Project-API-Key] of the project you want to display if a user clicks your "button"

<button type="button" onClick="Usersnap.show('[Project-API-Key]').then((widgetApi) => widgetApi.open());">Click to show</button>

Use the JavaScript API to open the widget with a click.

In rare cases, if you used the project-specific installation snippet code, you have to use this Usersnap API for project-specific widgets.

OPTION 2
Here are the steps to take:

  1. Choose "Auto Popup" in your "Display" settings
  2. Define an event name, which triggers the widget to show
  1. Design/create your own button and place it wherever you want.

  2. Clicking the button must trigger the before defined event.

api.logEvent('mybutton_click')

Display the feedback button only to logged-in users

The Feedback button can be displayed only to your site's logged in users if preferred.
Here is how you can get it done:

  1. Choose "Logged in users" as an audience under the Button configuration.
  1. Set the default User values when initializing the widget.

Define "userId": In order to initialize the users as logged-in users, the "userId" must not be null.

<script>
  window.onUsersnapCXLoad = function(api) { 
    api.init({
      user: {
        userId: "123",
        email: "[email protected]",
      },
    });
    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>

Collect logged-in users' email addresses

You can collect the email address of a logged-in user even when the email field is hidden.

Here are the steps to take:

  1. Hide the email field of your widget.
  1. Set the default user values when initializing the widget.

"user": User data (email in this case) from known users.

<script>
  window.onUsersnapCXLoad = function(api) { 
    api.init({
      user: {
        userId: "123",
        email: "[email protected]",
      },
    });
    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>
  1. Define when you want the widget to be displayed. It could be a time based or event-based trigger.

Pass custom data with the feedback items

With “custom data” you can easily pass any additional data that you’ve already collected about your users or their applications such as the language, application version or the user-id. It will be visible in your dashboard and be helpful to have more insights or background knowledge for the reported issue.

"custom": Any custom data that should be passed along with the feedback

<script>
  window.onUsersnapCXLoad = function(api) { 
    api.init({
      custom: {
        applicationLanguage : "de",
      },
    });
    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>

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 customer system
    }
  });
  window.Usersnap = api;
}

Updated about 6 hours ago


What's Next

Display rules

Usersnap code snippet


What can you do with the installation code of Usersnap (use it globally vs. project-specific)?

Suggested Edits are limited on API Reference Pages

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