JavaScript SDK

Overview

The official NPM module for embedding the Userback Widget into your JavaScript or TypeScript application.

Official NPM Package

https://www.npmjs.com/package/@userback/widget

Official Github Repository

https://github.com/userback/widget-js/tree/develop/widget-js

Installation

📘

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/widget

yarn add @userback/widget

Quickstart

import Userback from '@userback/widget'
Userback('**USERBACK_TOKEN**')

Examples

Show the Userback Widget immediately after loading on the bug screen.

Userback(..).then(ub => {
    ub.show('bug')
})

Or delay showing it until later:

Userback(.., { autohide: true }).then(ub => {
    document.querySelector('button.show-feedback').addEventListener('click', function(){
        ub.show()
    })
})

Using the options object to enable native screenshots while binding screenshots to a HTML button:

const userback = await Userback(..., { navtive_screenshot: true })
document.querySelector('button.screenshot').addEventListener('click', (event) => {
    event.preventDefault()
    userback.open('bug', 'screenshot')
})

After initialization, you can use the named function getUserback to get a reference to the UserbackWidget.

import { getUserback } from '@userback/widget'

document.querySelector('button.screenshot').addEventListener('click', (event) => {
    event.preventDefault()
    getUserback().open('bug', 'screenshot')
})

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