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.

In this guide, we will be using some important terms that are worth defining upfront:

  • Userback Widget Code: A snippet of JavaScript code that adds the Userback widget to your website or app. It can be found in your Userback Dashboard or Widget Settings.

  • Source Code: The code that makes up your website. It can be accessed through platforms like WordPress or Shopify, or manually. The Userback Widget Code will need to be added here

Advanced Users or Developers, jump ahead to our Advanced Installation Guide.


Basic Installation Guide

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

  1. Go to your Widget Settings in Userback.

  2. Find the </> Widget Code card and copy the code provided.

  3. Paste the widget code into the source code of the webpage where you want the widget to appear, before the closing </head> or </body>tag.

  4. Replace "[your widget token]" with your actual widget token.

Quick preview of the installation steps


Advanced Installation Guide

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

  1. Go to your Widget Settings in Userback.

  2. Find the </> Widget Code card and copy the code provided.

  3. Decide which method below which fits your preference below:

Method 1: Embed code

When using the embed code method, the widget button is created on page load. Simply add the following code to the page where you would like the widget to be displayed, replacing "[your widget token]" with your widget token:

<script>
window.Userback = window.Userback || {};
Userback.access_token = '[YOUR WIDGET TOKEN]';
(function(d) {
var s = d.createElement('script');s.async = true;
s.src = 'https://static.userback.io/widget/v1.js';
(d.head || d.body).appendChild(s);
})(document);
</script>

Method 2: 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 of your HTML file:

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

And add the following code to the body of your HTML file, replacing "[your widget token]" with your widget token:

<body>
<script>
Userback.init('[your widget token]', {
email: 'aross@example.com',
name: 'Adriane Ross',
on_load: () => {
console.log('widget is loaded');
}
});
</script>
</body>

Method 3: Install via 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


This package can be found on npmjs.com at the following link: https://www.npmjs.com/package/@userback/widget

Method 4: Install in React

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

npm install @userback/react

or

yarn add @userback/react

This package can be found on npmjs.com at the following link: https://www.npmjs.com/package/@userback/react

Method 5: Install in Vue

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

npm install @userback/vue

or

yarn add @userback/vue

This package can be found on npmjs.com at the following link: https://www.npmjs.com/package/@userback/vue


Verify it's working

Manually checking to see if the Userback widget is loading on your 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 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?


🔐 Who is this article for?

Plans

Solo ✔

Startup ✔

Company ✔

Premium ✔

User type

Client

Collaborator

Admin ✔

Owner ✔

📙 Helpful articles

How to install Userback on WordPress

Did this answer your question?