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.
How to Edit the Userback Widget
Open the Widget Editor: Navigate to your Project Overview Page, and on the right-hand side under Widget, select 'Edit Widget.'
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.
Using the Userback Widget Editor
In the Widget Editor, you can customize the widget's appearance and behavior, preview it, send test feedback, and access installation options. These options are split up into the following four tabs:
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)
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.
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.
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.
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.
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.
📘Note: Automatic Screenshots will not work if using the native screenshot function.
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.
Frequently Asked Questions
Q: How do I open my link in a New Tab or Window?
A: Simply copy and paste the code below into the URL section and replace the URL https://example.com/contact-us with the link, you'd like users direct to.
javascript:window.open("https://example.com/contact-us", "_blank");
Q: Can I use other Javascript code snippets like the above?
A: Yes, you can! As an example, check out this article on how to open Intercom Messenger Windows from the Userback Widget Pop-up.
Q: Why can't I see my Widget?
A: 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.