Install Code

Technical Steps for Seamless Userback Deployment

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

Prerequisites


Method 1: JavaScript Snippet

  1. Retrieve: Access your JavaScript snippet from the Userback dashboard
  2. 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

  1. Embed: Insert the script as early as possible in the <head> of your HTML.
  2. 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

  1. 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
  1. Initialize as soon as possible during your page load:
import Userback from '@userback/widget';

Userback('**Widget Access Token**').then((ub) => {
    // identify your logged-in users (optional)
    ub.identify("123456", { // example data
        name: "someone", // example data
        email: "[email protected]" // example data
    });
});
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.