The Userback Feedback Widget is a powerful tool designed to streamline feedback collection and enhance user experience on your website or application. With its user-friendly interface and extensive customization options, you can effortlessly tailor the widget to meet your specific needs, from minor adjustments to a complete transformation.
Discover the limitless possibilities of widget customization and interaction through our JavaScript SDK. Learn how to dynamically tailor the widget to your specific needs with just a few lines of code.
How to Edit the Userback Widget
Tailor the Userback Widget to match your brand and achieve your feedback objectives. Explore a wide range of customization options and experiment in real time.
-
Open the Widget Editor within your project: Navigate to the project where you want to customize the widget. Locate the top navigation menu and click on "Widget."
-
Access the widget customization options: Once you are in the Widget section, look for the "Edit widget" button situated at the top-right corner of the page. Click on "Edit widget" to enter the customization mode.
-
Customize and Preview the Widget: Inside the Widget Editor, you will find a range of options to modify various aspects of the Userback widget. As you make changes, the Widget Editor provides a real-time preview, allowing you to see the widget's updated appearance and behavior.
-
Apply and Activate Your Changes: Once you've completed your customizations, you can find the "Save & Exit" button on the top right of the page.
For detailed instructions on installing the widget, please refer to our installation article that outlines the best installation methods for your feedback objectives.
Using the Widget Editor: Part 1
Widget
Enhance the Widget Layout to control the appearance and behavior of the Userback widget. With these customization options, you can create a tailored feedback experience for your users.
Take full control of the widget layout by effortlessly dragging and dropping items to rearrange their order. This flexibility allows you to design the widget to suit your unique preferences and optimize user interaction.
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.
Header
Customize the Userback Widget header, this not only reinforces your identity but also helps users understand the purpose of the widget.
- Upload Logo: Make your widget stand out by uploading your logo max. 36 pixels.
- Add a message: Text Description: You can add custom text to provide guidance or instructions (up to 200 characters)
Feedback forms: Bug, Idea and General
Userback includes three core feedback types: Bug, Idea, and General. These feedback types are essential components of the widget workflow, allowing users to select the most appropriate category for their feedback.
✍️ 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.
You have the flexibility to enable or disable each feedback type based on your specific collection requirements. From here you can customize the content, text, available fields, and options for the reporter when submitting feedback (like Session Replay and Attachments).
Form fields: Tailor the feedback forms for Bug, Idea, and General feedback types to collect the precise information you need. Customize each form by fine-tuning the form fields and text, ensuring that you capture the necessary details and provide a seamless user experience.
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.
Name: Request the reporter's name to identify the source of the feedback.
Email: Capture the reporter's email address for communication and follow-ups.
Category: Specify the category or area to which the feedback relates, aiding in organization and analysis.
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.
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.
Custom Field: Add a customizable field to gather specific information relevant to the feedback process.
Button: Customize the text or label of the submit button to align with your application or website's language and tone.
Form options: Customize workflow options available for each Feedback type. Show a considerate/helpful success message, Enable Session Replays, Disable Screenshots and Screen Recordings for Ideas. You can even customize the workflow like launching the screenshot tool before showing the feedback form, it's up to you.
-
Success Message: Craft a delightful success outcome message to greet users when they successfully submit bug reports. This positive reinforcement assures them that their feedback has been received and encourages future engagement.
-
Capturing Tools: Screenshot - Enable users to capture screenshots to provide visual context and assist in bug identification and resolution. Or Screen Recording (Video) - Empower users to record their screen, demonstrating the bug in action and providing detailed feedback.
-
Flow options / Launching Tool: Define whether to launch the screenshot or video tool when a user selects the "Report a Bug" or any other feedback option.
-
Attachments: Enable or disable the ability for users to include attachments or additional files with their bug reports.
-
Session Replay: Optimize your troubleshooting process by enabling or disabling session replay functionality. Replay user interactions to gain a better understanding of reported bugs and facilitate analysis and resolution.
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.
Using the Widget Editor: Part 2
Appearance
Refine the appearance of the Userback widget to align with your branding and provide a visually appealing experience for your users.
Launcher
Customize the style, position, icon, and text of the widget launcher to create an engaging and intuitive user interface.
- 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).
- Position: Select the position of the launcher button on the screen. Choose from Left, Right, Bottom Left, or Bottom Right.
- 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.
- Text: Customize the text of the widget button (up to 30 characters). Emojis can be used in this section as well.
Colors
Enhance the visual appeal of the widget by customizing the colors used throughout:
- 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.
Using the Widget Editor: Part 3
More
Explore additional features to optimize your feedback collection and widget behavior.
Media
Options to configure the media within feedback collection.
- Contextual Screenshot: Automatically capture a screenshot of the screen if a user does not provide one. This feature ensures that visual context is included even when users don't take screenshots themselves, providing valuable insights for your team.
- Screen Recording Max Length: Specify the maximum length for screen recordings when users capture video feedback. Choosing an appropriate limit balances the ease of reviewing and triaging feedback with allowing users to fully demonstrate their feedback.
Targeting
Efficiently target specific users or scenarios for displaying the widget.
- Device: Select the device(s) on which the widget launcher will be displayed. Choose from Desktop, Tablet, and Phone to ensure optimal visibility.
- 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.
- Delay: Set a specific time delay (in 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.
Tracking
Gain valuable insights and streamline the feedback review process with tracking options.
- 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.
🔐 Plan Availability: All Plans
Learn more about plans and upgrading here.