Installing the Userback widget is a crucial step in getting started with Userback. This guide will walk you through the process of adding the Userback Widget Code to your website or app, ensuring that you are able to receive valuable feedback from your users.

For those looking for a more streamlined approach, the Userback Browser Extension offers a no-code alternative that makes it easy to add feedback without installing the Widget.

Basic Installation Guide

This guide provides a simple and straightforward way to add the Userback widget to your website or app. It's suitable for those who just want the most simple way to add the widget and only need to apply basic customizations.

Access Widget Settings
Log in to your Userback account and access the Widget Settings for the project you want to add the widget to.
Copy Widget Code
Locate the </> Widget Code card in the Widget Settings and copy the code provided. This code is unique to your Userback project and contains your unique widget token.
Paste Widget Code
Open the source code of the webpage where you want the widget to appear. Paste the widget code into the source code of the webpage, before the closing </head> or </body> tag. The ideal location for the widget code may vary depending on your website or app's layout and design.
Save or upload your changes
Congratulations! You have successfully installed the Userback widget on your website or app. If you encounter any issues or need further assistance, please don't hesitate to contact our support team.

Advanced Installation Guide

For those who want more control over the widget's behavior and integration with their website or app, including packages for popular frameworks such as React and Vue. It's also the recommended install option for advanced and single page application.

To get started, go to your Widget Settings in Userback and find the </> Widget Code card to copy the code provided. From there, choose the installation method that best fits your preference.

Advanced Method 1: Script Tag

When using the script tag method, the widget button is created by calling the init() method. This is the preferred option for single page apps. Add the following code to the head and body of your website or app.

<head>
    <script src="https://static.userback.io/widget/v1.js"></script>
</head>

<body>
    <script>
	// Initializing Widget & Setting Userback Access Token
	Userback.init('[YOUR_ACCESS_TOKEN]', {
		on_load: () => {
			console.log('Widget Load Successful');
		}
	});
    </script>
</body>

Advanced Method 2: Official NPM Package

You can also install the Userback widget using npm by running the following command:

npm install @userback/widget

or

yarn add @userback/widget

Also found on: https://www.npmjs.com/package/@userback/widget

Advanced Method 3: React

To install the Userback widget in a React application, run the following command:

npm install @userback/react

or

yarn add @userback/react

Also found on: https://www.npmjs.com/package/@userback/react

Advanced Method 4: Vue

To install the Userback widget in a Vue application, run the following command:

npm install @userback/vue

or

yarn add @userback/vue

Also found on: https://www.npmjs.com/package/@userback/vue

Verify it's working

Manually checking to see if the Userback widget is loading on your website or app is the most reliable method of verification, as it allows you to directly observe the Userback script loading in your browser on a live webpage.

If you can't see the widget button, there are a few reasons that could be happening:

The widget has been customized: Review the widget customization options to ensure that the button is set to the correct look and location.
The widget is hidden: Check the widget targeting options to make sure that "On all pages where the widget code is installed" is enabled.

If you are still unable to see the widget button, don't hesitate to reach out for help. You can contact us directly for further assistance.

What next?

Customize the widget to reflect your brand or simplify your user experience.
Connect with your apps by using one of our many integrations.
Advanced users can do custom things using our JavaScript API

Who is this article for? 🔐

Plans	Solo	Startup	Company	Premium
User type	Client	Collaborator	Admin	Owner

Basic Installation Guide

Access Widget Settings

Copy Widget Code

Paste Widget Code

Save or upload your changes