Overview

Integrate Userback seamlessly into your application to start collecting valuable feedback from your users. We provide multiple installation methods to fit various development environments, ensuring you can configure Userback with ease.

Prerequisites

Before you begin, ensure the following:

Userback Workspace: A workspace is needed to collect and manage feedback.
Access Token: Retrieve your token via the Code Icon in your workspace.
Plan Requirements: Available on all plans.

Method 1: JavaScript Snippet

Retrieve: Access your JavaScript snippet from the Userback dashboard
Insert: Place it before the closing </body> tag in your HTML.

<script>
  window.Userback = window.Userback || {};
  Userback.access_token = '**Widget Access Token**';
  
  // identify your logged-in users (optional)
  Userback.user_data = {
      id: "123456", // example data
      info: {
          name: "someone", // example data
          email: "[email protected]" // example data
      }
  };
  
  (function(d) {
    var s = d.createElement('script');s.async = true;
    s.src = 'https://static.userback.io/widget/v1.js';
    (d.head || d.body).appendChild(s);
  })(document);
</script>

Plug & Play: Ideal for static websites or web apps.
Limitations: Asynchronous load of the script can miss capturing early console logs and errors.

Method 2: Script Tag

Embed: Insert the script as early as possible in the <head> of your HTML.
Initialize: Initialize with Userback.init().

<head>
  <script src="https://static.userback.io/widget/v1.js"></script>
</head>
<body>
  <script>
  Userback.init('**Widget Access Token**', {
    user_data: {
      id: "123456", // example data
      info: {
        name: "someone", // example data
        email: "[email protected]" // example data
      }      
    }
  });
  </script>
</body>

Userback.init("your_widget_access_token");

Console Log Synchronization: Captures all console logs and errors.

Method 3: Using NPM

For JavaScript, React, or Vue Projects

Package Installation: Utilize your package manager of choice.

npm i @userback/widget

npm i @userback/react
# or
yarn add @userback/react

npm i @userback/vue
# or
yarn add @userback/vue

Initialize as soon as possible during your page load:

import Userback from '@userback/widget';

// identify your logged-in users (optional)
const options = {
  user_data: {
    id: "123456",
    info: {
      name: "someone",
      email: "[email protected]"
    }
  }
};

Userback('**Widget Access Token**', options);

npm i @userback/react
# or
yarn add @userback/react

npm i @userback/vue
# or
yarn add @userback/vue

🛟 Support

Need help? Here’s how to get assistance:

Log in to your Userback workspace.
Click the Help Center icon in the top-right corner.
Select Contact us to start a chat with our support team.