Install Code

We offer multiple methods to fit various development environments and project requirements.

Prerequisites

Userback Workspace 14-Day Free Userback Trial
Project-specific Widget Access Token

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

If you need help at any point, send a message to our support team.