React
Overview
The official NPM module for embedding the Userback Widget into your React application.
- Official NPM Package: @userback/widget
- Official GitHub Repository: Userback Widget SDK
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
- 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;
}
- 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.
- 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);
- 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>
);
- 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:
- 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.
Updated about 16 hours ago