Feedback Widget
You can add this widget to your application to collect feedback without friction.
Collect feedback without friction
Add the following code anywhere inside </body> tag.
<script id="uservitals-feedback-loader" async src="https://widget.uservitalshq.com/feedback/loader.js"></script>
<script>
const script = document.getElementById('uservitals-feedback-loader');
script.addEventListener('load', (event) => {
UVFeedbackWidget.init({
token: "{{token}}",
mode: 'floating',
align: 'right', // Default: right - Alignment of the widget when opened
position: 'bottom', // Default: bottom - Placement of the widget when element is clicked
title: 'Help improve our product', // Your custom title for the widget
subtitle: 'What feedback do you have?', // Your custom subtitle for the widget
// Your custom buttons for the widget
buttons: [
{
title: 'Feature Request',
subtitle: 'Have a feature idea? ',
color: 'blue',
labels: ['Ideas'],
placeholder: 'Describe your use case and any additional details our team needs to know.',
}
],
});
});
</script>
The
data-uservitals-feedback attribute tells us which element is your button. Once the feedback widget is initialized, we will listen for clicks on elements with this attribute, to trigger the widget to open.<button data-uservitals-feedback>
What's new
</button>
There are a few other customizations that you might want to make when embedding your changelog widget.
Parameter | Description |
|---|---|
mode | If the mode is floating, a button will appear on the page based on your position and align. If the mode is trigger then your widget will appear when an element with data-uservitals-feedback attribute. |
align | Determines which side of the button the widget is aligned with. It can be set to left or right. |
position | Placement of the widget when element is clicked. It can be bottom or top |
subtitle | Your custom subtitle for the widget |
title | Your custom title for the widget |
buttons | An array of button elements |
buttons.title | Title of the button |
buttons.subtitle | Subtitle of the button |
buttons.color | The color of the botton. Options are blue, red, yellow, green, gray, purple etc |
buttons.labels | An array of labels to be applied to the feedback message in your UserVitals inbox. |
buttons.placeholder | The placeholder of the message field. Useful for prompting the user of how to leave a useful message. |
xPositionNudge | A number value. Useful for adjusting the position of the widget on the x axis. |
yPositionNudge | A number value. Useful for adjusting the position of the widget on the y axis. |
ssoToken | Optional. This token allows the widget to identify your user. See Single Sign-On (SSO) for more information about generating a token. |