The Userback Feedback Widget simplifies feedback collection and enhances user experience on your site or app. This guide will walk you through the process of customizing the Userback Widget and using the Widget Editor.
If you want to customize the widget further you can utilize our Javascript SDK. Learn more about it here.
Using the Userback Widget Editor
Open the Widget Editor: Navigate to your Project and select the 'Widget' tab from the top menu.
Customize the Widget: Modify the options based on your preferences. You can find detailed customization options below.
Preview Changes: As you customize, you'll see a real-time preview of your widget's appearance and behavior.
Save & Exit: Once satisfied with your changes, click 'Save' to apply and activate your customizations.
Design
In the Design Tab, you can customize the type of feedback you collect, adjust the widget’s appearance and placement, set the language, enable CAPTCHA, and manage media components.
Components: Header
Upload Logo: Enhance your widget's appearance by uploading your logo at a maximum height of 36 pixels. By default, logos can have a width of up to 380 pixels and a height of up to 36 pixels. If your logo exceeds this size, you can still use it by applying the CSS code below on your site.
.userback-button-container .userback-controls .userback-controls-logo { height: 100px; }💡 Tip: For best results, we recommend your logo is uploaded as a JPEG or PNG with a max width of 380 pixels and max height of 36 pixels
Add a message: Text Description: You can add custom text to provide guidance or instructions (up to 200 characters)
Components: Feedback: Bug, Idea, and General
Toggle the different Feedback categories on or off, modify the displayed text, or redirect the 'Idea' Feedback to your active Portal. Click the 'Edit Form' to customize the form fields, content, tool, text, and success form.
Form
Add any combination of the following components. You can rearrange them by dragging and dropping, delete them, or mark them as required fields:
Intro: Add introductory text to guide users and set expectations for their feedback.
Rating: Include a rating scale (1-5) for users to rate the sentiment or impact of their feedback.
Email: Capture the reporter's email address for communication and follow-ups.
Name: Request the reporter's name to identify the source of the feedback.
Title: Prompt users to provide a concise title or summary for their feedback.
Description: Allow users to provide a detailed description of their feedback, including any relevant information.
Category: Specify the category or area to which the feedback relates.
Priority: Allow users to select the priority level of their feedback to assist your team in prioritizing and addressing issues.
Assignee: Provide an option for users to assign their feedback to a specific team member or department.
Custom Field: Add a customizable field to gather specific information relevant to the feedback process.
Choose the Tools that are available for your reporters:
Screenshot: Enable users to capture screenshots to provide visual context and assist in bug identification and resolution.
Screen Recording (Video): Allow users to record their screen, demonstrating the bug in action and providing detailed feedback.
Attachments: Enable or disable the ability for users to include attachments or additional files with their bug reports.
Launching Tool: Define whether to launch the screenshot or video tool when a user selects the "Report a Bug" or any other feedback option.
Button: Customize the text or label of the submit button.
Success
Edit the Success Form message and style when reporters successfully submit bug reports.
Components: Feedback: List
Provide users with the ability to explore and review submitted feedback. By default, they can see feedback related to the current URL. However, by enabling the option to show all feedback, users gain access to a broader scope of feedback for the project.
Components: Custom Link
Add a custom link to connect users to specific pages on your website or other support channels. You can leverage this feature to create direct paths to your contact page or support forms. For more detailed information check out this article: Add a custom field to your widget.
Components: Powered by Userback
To remove the "Powered by Userback" branding from your widget, you'll need to upgrade to the Scale, Company, or Premium plans.
✍️ Prefill fields and attach metadata to feedback with information about the user, such as their name, email address, and plan details with the JavaScript SDK.
Appearance
Refine the appearance of the Userback widget to align with your branding and provide a visually appealing experience for your users.
UI Theme
You can customize your widget’s theme to match your website, this helps your widget feel more consistent with your site. Options include:
Browser Default: Follows the user’s system or browser theme.
Light: Applies a light theme.
Dark: Applies a dark theme.
Colors
Highlight Color: Choose a color that will be used to highlight buttons, links, and other important elements.
Complementary Color: Select a color that complements the highlight color and will be used for text and icons on the highlighted elements.
Launcher
Style: Choose between an Icon Button or a Text Button. The Icon Button displays a visually appealing icon, while the Text Button allows for customized text (with support for emojis).
Icon: Enable or disable the display of an icon for the launcher. You can also use an emoji instead of an icon by disabling the icon option.
Position: Select the position of the launcher button on the screen. Choose from Left, Right, Bottom Left, or Bottom Right.
Text: Customize the text of the widget button (up to 30 characters). Emojis can be used in this section as well.
Widget
Widget Position: Choose the location where the widget modal will appear when opened.
Highlight Color: Choose a color that will be used to highlight buttons, links, and other important elements.
Complementary Color: Select a color that complements the highlight color and will be used for text and icons on the highlighted elements.
More
Explore additional features to optimize your feedback collection and widget behavior.
Media
Contextual Screenshot: Automatically capture a screenshot of the screen if a user does not provide one. Screenshots taken automatically will be watermarked in the Userback Platform.
Screen Recording Max Length: Specify the maximum length for screen recordings when users capture video feedback.
Tracking
Console Logs: Enable or disable the automatic capture of browser console logs, providing additional technical context for feedback. Choose the log levels to automatically capture, allowing you to focus on the specific information that helps you identify and resolve issues effectively.
Event Tracking: Enable or disable the automatic capture of a trail of events, providing a comprehensive understanding of user interactions leading up to feedback submissions.
Language
Select a language to be used in the widget. By default, it is set to English, but users can click on the language switcher to select their preferred language.
Security
Enable Captcha which is an anti-spam tool that ensures your datas integrity within your Userback Widget by preventing bot attacks and eliminating spam.
Navigate to Edit Widget
Select the 'More' Tab
Under the Security settings, locate the hCaptcha option and select 'Yes'
Select 'Save Changes'.
Target
Efficiently target specific users or scenarios for displaying the widget.
Domains
Set the domains for where you want the widget code installed. See more information here.
Segments
Define who can see the launcher. Options include all users or a specific segment of users, which is defined in your User database and Segments.
Pages
Define where the widget launcher should be shown. Options include displaying it on all pages where the widget code is installed, on specific pages based on their URLs, or when a query string is added.
All pages: Show the Userback widget on all pages where the widget code has been installed.
On specific pages based on URL: Use the drop-down selection to choose the correct URL targeting for your use case.
When Query String is added: Use the widget query string to display the Userback widget only when it’s added to the end of your project URL. The query string is stored in a cookie for 1 hour, so users don't need to add it to every URL as they navigate the site or app.
Do not show the widget: If you're using the Javascript SDK to trigger the feedback widget, you likely want to hide it elsewhere. Select this option to display the widget only when triggered by the JavaScript API.
Device
Select the device(s) on which the widget launcher will be displayed. Choose from Desktop, Tablet, and Phone to ensure optimal visibility. By default, the Userback widget is set to display for all users on all devices.
Delay
Set a specific time delay (up to 600 seconds) after the page loads before the widget launcher appears. This ensures users have ample time to familiarize themselves with the page content before engaging with the widget.
Widget Preview
Access the Preview from the editor or the right-side menu on the Projects Overview Page. In the Previewer, your widget or survey will load, allowing you to interact with it and submit test feedback. To view submitted feedback, go to the Feedback/Response tab in the project.
💡 Verifying your installation?
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.
Widget Install
There are multiple ways to install the Userback widget. For a step-by-step guide, check out our detailed Installation Article.
Considering the Switch to the Next-Gen Widget?
This guide breaks down the key differences to help you decide if it’s the right fit for your product. 🚀
📝 Switching to the Next-Gen Widget may cause some setup changes. We recommend noting your current configuration before making the switch to ensure a smoother transition.
🚨⚠️ Important Notice: Once you switch to the Next-Gen Widget, you cannot revert to the Classic Widget. Be sure this is the right choice for your needs before making the change. 🚀 Not sure if you're ready to switch? Test it out in a new project first!
What are the new Features of the Next-Gen Widget?
🔥 AI-Powered Feedback
Let AI do the heavy lifting! The Next-Gen Widget automatically categorizes feedback, analyzes user sentiment, and prioritizes submissions. It even suggests feedback titles and flags unanswered feedback, making it easier to manage.
🛠️ Smarter Feedback Collection
No more extra steps—users can simply share their thoughts without manually selecting a feedback type. The Next-Gen Widget intelligently captures and organizes feedback for a more seamless experience.
🎯 Greater Customization & Control
Take full control of your feedback experience! Personalize user interactions with custom greetings, adjust the widget’s appearance, and choose exactly where and how it’s displayed on your site.
A Fully Integrated Feedback Hub
The Next-Gen Widget brings everything together—feedback collection, your portal, and your roadmap—all in one place. A modern, streamlined experience designed to keep your team and users in sync.
Classic vs. Next-Gen: What’s Changed?
A side-by-side comparison table showcasing key differences:
Feature | Classic Widget | Next-Gen Widget |
Feedback Collection | Structured Forms with set feedback types (Bug, General, and Idea) | All-in-one Single Feedback Form |
Screenshot & Annotation | Click to enable Screenshot capture | Simplified screenshot workflow |
AI Assist | Not Available | Automatically categorizes feedback type, generates title, sentiment, and waiting response. |
Portal and Roadmap | Available though separate Portal URL | Embeddable within the widget for seamless access |
View Existing Feedback | Show existing feedback in the widget modal | Not Available |
Frequently Asked Questions
How Can I Continue Using the Classic Widget?
When you create a new project, it will automatically use the Next-Gen Widget. However, your existing projects will continue to use the Classic Widget.
If you need a new project with the Classic Widget, simply copy an existing project. Here’s how: Create and Manage Your Projects.