React SDK


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

Official NPM Package

Official Github Repository



Userback Widget Token

You will need your Userback Widget Token, you can get your project-specific Userback Widget Token from Widget Customiser.

We've got 2 options, utilizing NPM or Yarn in the code example below.

npm i @userback/react
yarn add @userback/react


The easiest way to get started with Userback is to simply use the Provider near the top of your React Tree like so:

import { UserbackProvider } from '@userback/react'

  return (
      <UserbackProvider token={USERBACK_TOKEN}>
        <App />


Along with token, you can also provide an options prop:

const {email, name} = getUserDetails()
return (
  <UserbackProvider token={USERBACK_TOKEN} options={{ email, name, priority: 'high' }} >


You can access Userback hooks in child components of the <UserbackProvider> with useUserback():

import { useUserback } from '@userback/react'

function App() {
  const { open, hide } = useUserback()
  return (
    <div id="app">
      <button type="button" onClick={() => open('general', 'screenshot')}>Take a screenshot</button>
      <button type="button" onClick={() => hide()}>Hide me :(</button>

export default App

Class based components

If you are using class based components and need an alternative to hooks, you can use the withUserback Higher Order Component:

import { withUserback } from '@userback/react'

class App extends React.Component {
  render() {
    return (
      <div id="app">
        <button type="button" onClick={() =>'general', 'screenshot')}>Take a screenshot</button>
        <button type="button" onClick={() => this.props.userback.hide()}>Hide me :(</button>

export default withUserback(App)

For more information about available configuration settings and and functions available, see our JavaScript API