Your widget can be edited and customized to suit the requirements of your project. There are even pre-configured templates to make it easier.
To start, select the project that you would like to edit and select the Widget menu.
The widget screen will allow you to completely customize your widget for your project. You can tweak each section and save as you go.
To make things easier, start with the Appearance card and work your way through the options. Remember to hit "Save Settings" on the last step when you are done.
Most of the time, you’ll be safe to select a template to start, based on your use case and add your own personal touches from there. Selecting a template will change things like the welcome message, button style, button text and even the fields displayed at each step of the feedback process.
By clicking Edit Widget, you will be taken to the Widget Settings workflow that will help you create the perfect feedback widget for your project.
Follow the steps below and make sure to hit "Save Settings" on the last step when you are done.
When editing your widget, all of the changes will be shown in the preview window as you make changes and update the widget. These changes wont be reflected on your project site until you save the widget settings.
1. Customize the widget button
The first step is to customize your widget button. Choose the button style, colour, text and position.
Tip: Most of the time, you'll want your widget button to say "Feedback". But if you are using your widget for something like bug tracking, you might change it to say "Report a bug".
2. Select the feedback style
Customise your widget by choosing the feedback options available to your customers.
Screenshot Feedback: Customers give feedback with annotated screenshots.
Video Feedback: Customers give feedback with video screen capture.
General Feedback: Customers give text feedback by typing comments in your widget.
The text displayed for each of the feedback items can be edited should you wish to customize them further or translate them to your desired language.
Tip: If you choose to only display a single feedback option, users will not see this step in the widget. When they click your feedback button, they will jump straight to the feedback option you have enabled for them.
3. Customize your form settings
This is the final screen used for submitting feedback and it can be customized to match how you are using the widget.
Use the toggle buttons to turn each option on/off and whether to make it mandatory.
Logo: Upload your logo to display at the top of the widget
Welcome Message: Display a text message at the top of your widget.
Rating Type: Allow users to rate the page they are giving feedback on.
Button Text: Change the text of the submit button
Name: The name of the Reporter.
Email: The email of the Reporter.
Comment: The main feedback comment for the final step of leaving feedback.
Category: Allow users to categorize their feedback as things like Bugs, Tasks, Improvements etc.
Priority: Allow users to set a priority for the feedback.
Assign Feedback: Allow users to assign their feedback to a specific team member.
Custom Field: Setup an additional field to capture information. This can also be used for adding disclaimer text.
Attachment: Allow users to attach a file with their feedback (up to 2 mb).
View Other Feedback: Allow users to see the feedback already submitted for this project. Most suitable when collecting feedback from internal users.
Powered By Userback: Remove the 'Powered by Userback' from your widget. Available to customers on the Growth plan.
4. Thank You Message
Customize your thank you message after someone leaves feedback.
Icon: Select a confirmation icon
Icon Color: Select a color for your icon, by default it will be set to your widget color
Message: Set a thank you message along with a message below. You can link to other resources using the following link format [Text to link](insert URL here)
5. Additional Tweaks
Language: Select the language of the text within the widget.
Display form in a modal: When clicking the feedback button, the feedback form will load, center of the screen in a modal. Turning this off, the form will display right next to the feedback button.
Show feedback form only: Enabling this option will skip the first step of the feedback process, the feedback selection step. If screenshot and video feedback are still enabled, users will still be able to select these options by clicking the icon in the comment field.
Show help annotation tools: Adds a small help icon to the annotation tools. This can be helpful for first time users.
Trigger: Select how the widget should be loaded. On page load, after a specific amount of time, via the API or using the widget URL.
Learn more about Audience and Page Targeting
7. Advanced Tracking
Collect valuable information with each feedback collected via the feedback widget such as console logs and event tracking. This information will be displayed in the feedback viewer and will also be parsed through to any integrations you have set up.
Learn more about how to get the most our of console logs and event tracking
8. Widget Code
Once you're happy with your widget, click "Save Settings" to save your work, expand the widget code and paste this into the website that you’re looking to collect feedback from.
If you have already added the widget to your website, you do not need to do anything further. The widget automatically updates with your new settings.
Tip: To preview your widget, simply click "See it in action" from the Widget Code menu. This loads your widget in a demo page where you can try it out.