@userback/widget

Overview

The Userback JavaScript package allows you to seamlessly integrate the Userback Widget into your JavaScript or TypeScript application for feedback collection and management.

Official NPM Package: https://www.npmjs.com/package/@userback/widget
Official GitHub Repository: https://github.com/userback/widget-js/tree/develop/widget-js

Installation

To install any of the packages and embed Userback, you'll need a Widget Access Token.

NPM Installation

npm i @userback/widget

Yarn Installation

yarn add @userback/widget

Quickstart

To embed the Userback Widget, use the following example code snippets:

JavaScript Example

import Userback from '@userback/widget'
Userback('**Widget Access Token**')

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.