Overview

The official NPM module for embedding the Userback Widget into your React application.

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.

Installation

Install the Userback package for React using the following command:

NPM Installation

npm i @userback/widget

Quickstart

Embed the Userback Widget in your React application using the example below:

Code Example

import Userback from '@userback/widget';

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

// initialize Userback
const userback = await Userback("**Userback Access Token**", options);
import Userback, { UserbackOptions } from '@userback/widget';

// Optionally identify logged-in users
const options: UserbackOptions = {
  user_data: {
    id: "123456", // Unique user ID
    info: {
      name: "someone", // User's name
      email: "[email protected]" // User's email
    }
  }
};

// Initialize Userback with the access token and options
Userback('**Userback Access Token**', options);

Using Userback in React App

You can initialize Userback once and use the instance throughout your app.

General approach

  • Initialize the Userback widget once β€” for example, in your root file or when the user logs in.
  • Store the instance (returned as a Promise) in a context, global store, or a simple module.
  • Use the instance in any component or hook to trigger actions like open(), identify(), or startSessionReplay().

Examples:

Here are a few examples of how you can integrate and use Userback throughout your React app.

Example 1: Setting up a shared instance and use in a component

  1. Create a simple module (eg: userbackClient.js) to manage the shared instance:
// userbackClient.js
import Userback from '@userback/widget';

let userbackInstance;

export async function initUserback(options) {
  userbackInstance = await Userback("**Userback Access Token**", options);
  return userbackInstance;
}

export function getUserback() {
  return userbackInstance;
}
  1. Using in a Component
// FeedbackButton.jsx
import React from 'react';
import { getUserback } from './userbackClient';

export function FeedbackButton() {
  const handleClick = () => {
    const userback = getUserback();
    if (userback) userback.open('bug');
  };

  return <button onClick={handleClick}>Give Feedback</button>;
}

Example 2: Using React Context

This pattern is great for larger apps that want to expose the Userback instance globally with React hooks.

  1. Create Context Provider
// UserbackProvider.jsx
import React, { createContext, useContext, useEffect, useState } from 'react';
import Userback from '@userback/widget';

const UserbackContext = createContext(null);

export const UserbackProvider = ({ children }) => {
  const [userback, setUserback] = useState(null);

  useEffect(() => {
    const init = async () => {
      const instance = await Userback('**Userback Access Token**', {
        user_data: {
          id: '123456',
          info: {
            name: 'Jane Doe',
            email: '[email protected]',
          },
        },
      });
      setUserback(instance);
    };

    init();
  }, []);

  return (
    <UserbackContext.Provider value={userback}>
      {children}
    </UserbackContext.Provider>
  );
};

export const useUserback = () => useContext(UserbackContext);
  1. Wrap Your App
// main.jsx or App.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { UserbackProvider } from './UserbackProvider';

ReactDOM.createRoot(document.getElementById('root')).render(
  <UserbackProvider>
    <App />
  </UserbackProvider>
);
  1. Use in Component
// FeedbackButton.jsx
import React from 'react';
import { useUserback } from './UserbackProvider';

export function FeedbackButton() {
  const userback = useUserback();

  const handleClick = () => {
    if (userback) {
      userback.open('bug');
    }
  };

  return <button onClick={handleClick}>Give Feedback</button>;
}

For more use cases, refer to the Userback Npm docs.


πŸ›Ÿ Support

Need help? Here’s how to get assistance:

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