@userback/react
Quickly integrate Userback via NPM or Yarn with this step-by-step guide and code samples
Overview
The official NPM module for embedding the Userback Widget into your React application.
- Official NPM Package: https://www.npmjs.com/package/@userback/react
- Official GitHub Repository: https://github.com/userback/widget-js/tree/develop/widget-react
Installation
To install any of the packages and embed Userback, you'll need a Widget Access Token.
NPM Installation
npm i @userback/react
Yarn Installation
yarn add @userback/react
Quickstart
To embed the Userback Widget, use the following example code snippets:
JavaScript Example
import { UserbackProvider } from '@userback/react';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<UserbackProvider token={**Widget Access Token**}>
<App />
</UserbackProvider>
</React.StrictMode>
);
Examples
Here are some examples to customize the behavior of the Userback Widget:
Example 1: Show the Widget Immediately
Userback(**Widget Access Token**).then(ub => {
ub.show('bug');
});
Example 2: Delay Showing the Widget
Userback(**Widget Access Token**, { autohide: true }).then(ub => {
document.querySelector('button.show-feedback').addEventListener('click', function(){
ub.show();
});
});
Example 3: Enable Native Screenshots
const userback = await Userback(**Widget Access Token**, { native_screenshot: true });
document.querySelector('button.screenshot').addEventListener('click', (event) => {
event.preventDefault();
userback.open('bug', 'screenshot');
});
Example 4: Get a Reference to the Userback Widget
import { getUserback } from '@userback/widget';
document.querySelector('button.screenshot').addEventListener('click', (event) => {
event.preventDefault();
getUserback().open('bug', 'screenshot');
});
For advanced customization information, refer to our JavaScript SDK documentation.
We hope this guide helps you seamlessly integrate the Userback Widget into your React application. If you have any questions or need further assistance, please visit the Userback Help Center for additional resources and support.
Updated about 2 months ago
Whatβs Next