Install Userback
      Back to home
      1. Help Center
      2. Installation & Developers
      3. Install Userback

      Install the Userback Widget

      Check out our Developer Docs which is aimed at developers and technical users which includes installable packages, code examples and API references.


      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.

      Learn more on Customizing the Userback Widget to match your branding and feedback objectives, if you need a hand, we'd love to hear from you.

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

       

      Basic Installation Guide

      A simple and straightforward way to add the Userback Widget to your website or app. Suitable for those who just want the most simple way to add the widget and only need to apply basic customizations.

      1. Go to the Widget page: Log in to your Userback account and access the Widget page for the project you'd like to collect feedback in.
      2. Copy Widget Code: Once on the Widget Page, find the "Widget Code" section and select the JavaScript Option. A modal will appear with the widget code. Click on the copy icon located at the bottom right of the code box to add it to your clipboard.



      3. Insert Widget Code: Open the source code of the webpage or app where you want the widget to appear. Locate the closing </head> or </body> tag and paste the copied widget code just before it. The ideal location for the widget code may vary depending on your website or app's layout and design.
      4. Save and Reload: After pasting the widget code, save your changes and reload the webpage or app to view the installed Userback Widget.

      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 seeking greater control over the widget's behavior and integration with their website or app, including packages for popular frameworks such as React and Vue, the Advanced Installation Guide is the recommended option. This guide is particularly suitable for advanced and single-page applications.

      To get started with the advanced installation, you'll need a Widget Access Token, which can be found (highlighted below) in the JavaScript Widget Code on the Widget Page.


      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

      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

      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

      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.

       

      🔐 Plan Availability: All Plans

      Learn more about plans and upgrading here.