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.
Go to your Widget Settings in Userback.
Find the </> Widget Code card and copy the code provided.
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.
Replace "[your widget token]" with your actual widget token.
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.
Go to your Widget Settings in Userback.
Find the </> Widget Code card and copy the code provided.
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/widgetor
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/reactor
yarn add @userback/reactThis 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/vueor
yarn add @userback/vueThis 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?
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 ✔ |