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.
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.
Contact Us Link: Customers can click this link to contact you. You can also use this option to connect your feedback with live chat tools like Drift and Intercom.
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.
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.
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. 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.
4. 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.
Final Note
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.
Related Articles
- Adding the Userback widget to your webpage
- How to test your widget on a demo page
- Automatically load the feedback widget in your webpage
Comments
0 comments
Article is closed for comments.