@userback/react

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.