Create a project first

• Create and configure your project widget

Installation

• Install via an HTML code

• Install via Google Tag Manager

• Install on WordPress

• How does the Usersnap snippet code work?

• Install a project-specific snippet code

• Install Usersnap on popular frameworks like React, Angular etc)

Browser extension

• Browser Extension: Google Chrome Extension & Firefox extension

• Logging Into Your Browser Extension

General

The installation of Usersnap is quite easy. The provided Usersnap code snippet should be copied into the website or web application code (HTML) and you are ready to collect user feedback

The feedback widgets work on all major desktop and mobile browsers.

There are several ways of how to get feedback widgets into your website or web applications (or native applications).

1. Add the global snippet code to your web application
2. Add a project-specific code to your web application
3. Use code examples for popular frameworks like React or Angular
4. Use the browser extension for Usersnap

In the following sections, you can find out what works best for your use case. If you don't which road to walk down, contact our lovely customer success team.

Examples for popular frameworks

Get more information on the installation of Usersnap on popular frameworks and SPAs on this installation page.

What is the Global Snippet?

The Usersnap snippet code (which is a global snippet) is a central installation code snippet (written in JavaScript) that you or your developers have to install on your web application or website. You don't need to install one per project, you just need this global one.

Find detailed information about the Usersnap snippet code

Install via HTML code

To install it on your website or in your digital product just follow these steps:

• Step 1. Go to the installation menu outside of all projects (on the left menu)

• Step 2. Click on "Copy Code" to copy the Usersnap snippet code
• Step 3. Paste this code snippet at the end of your website, just before the closing </ body > tag

Done. You can start using Usersnap.

More details on the global snippet code

Usersnap lets you further customize your project widget. First, you would need your global API key, which can be found in the installation tab of the main navigation bar (team level, not project level).

Next, you'd need to install the widget with the following JavaScript code. Then, you can call 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/[GLOBAL_API_KEY]?onload=onUsersnapCXLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Install via Google Tag Manager

Please, read our Installation on Google Tag Manager page.

Install on WordPress

Please, read our installation page on Wordpress.

What is a project-specific snippet?

📘

When to use the project-specific snippet code?

If you want to make sure that your projects are clearly separated, you can use the project-specific snippet code. If you install this one, you can't use the "display rules" to change the visibility via the dashboard. But it is clearly separated from all other projects.

In case you are doing quality assurance or your client is approving their website, it may make sense to use this project-specific snippet code.

You can still install the feedback widget per project with the project-specific widget, you will find this in the advanced section of the installation.

Installation of the browser extensions

For certain use cases, like collecting feedback while testing a website, you can use the browser extensions without installing the Usersnap snippet code. This is nice and easy and you don't need your developers to get things going. But in case you want to have feedback from many stakeholders or testers, it's maybe not the best way to proceed.

Here is more information on how to install the browser extensions.

How can I activate and deactivate certain features?

There are many options to turn on and off in the Usersnap dashboard, but some handy features can be configured in the Usersnap snippet code.

If you want to remove the tracking "cookies" (which are technically not cookies here), or you don't want to store the location of the users, you should definitely read this section about our API configuration.

Installation of Usersnap Classic (legacy)

🚧

Usersnap Classic (Legacy) installation

If you are still using our legacy project types, please read about the installation here - Install the Usersnap Classic Widget