UserVitals
UserVitalsHow It WorksUse CasesHelp Docs
Search…
UserVitals setup guide
Setup
Single Sign-On (SSO)
Embeddable Widgets
Customer Portal Widget
Changelog Widget
Feedback Widget
GraphQL API
Working with the GraphQL API
Terminology
API Reference
Powered By GitBook
Feedback Widget
You can add this widget to your application to collect feedback without friction.

What the feedback widget looks like

Collect feedback without friction

Setup

Install our script

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>

Customizations

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.
Embeddable Widgets - Previous
Changelog Widget
Next - GraphQL API
Working with the GraphQL API
Last modified 6mo ago
Copy link
Outline
What the feedback widget looks like
Setup
Install our script
Customizations