Install Userback in your application

Installing Userback is the first step in getting started.

This guide will walk you through the process of adding Userback to your app or website, allowing you to collect feedback, launch surveys to users, and target user segments.

Getting started

There are two options available when installing Userback on your application or website. Global code or project-specific code.

Global Access token: Use the same code for all survey and feedback projects, and manage their domains in Userback.
Project-specific code: Manage the domain a survey or feedback widget is displayed on by installing project-specific code.

To install userback, you will need to add the Userback code to your application or website.

Go to the Userback code page: Log in to your Userback account, and click the <> code button from the header.
Select install method and copy: Select from JavaScript, npm, React or Vue.js and toggle between Global Access Tken or select a specific project. Copy the code.
Paste Userback Code: Paste the Userback code to all of the pages you would like to launch surveys or feedback widgets on. Our recommendation is to locate the closing </head> or </body> tag and paste the copied Userback code just before it.
Configure domains: When using the global access token, you will need to set the domains for any survey or feedback projects. From the project dashboard, click Manage Domains from the project options.
Save and test: After pasting the Userback code and configuring your domains for your project, you will need to activate a survey or feedback widget to verify the installation. You can alternatively install Userback on a test page or staging site to do the same.

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.

Alternative Installation Guide

This section of the installation guide will run through alternative installation using either Script tag, or alternative development framework options including npm, react, or vue.js.

To get started, you will need either the Global Access Token or Project Token, which can be found (highlighted below) in the JavaScript Widget Code on the Widget Page.

Script Tag

When using the script tag method, the feedback 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>

NPM Package

You can also install the Userback 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

React

To install the Userback 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

Vue

To install the Userback 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 Userback loading on your app or website 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 your activated survey or feedback widget button, there are a few reasons that could be happening:

The feedback widget has been customized: Review the widget customization options to ensure that the button is set to the correct look and location.

The feedback widget is hidden: Check the widget targeting options to make sure that "On all pages where the widget code is installed" is enabled.
The survey is not activated: From the survey overview page, activate the survey and confirm targeting options.
Survey targeting criteria are not matched: Confirm that the targeting criteria are set correctly including segments, URL targeting, and device targeting.
Domains have not been configured: Check that the domains have been correctly configured for the survey or feedback project.