Changelog Widget
The changelog widget lets you embed your changelog into your website or app. So your users can view your changelog without having to leave your application.

What the changelog widget looks like

How the changelog widget will look on your site

Setup

1. Install our script

Add the following code anywhere inside the <head> or <body> tags. Include your team ID found in UserVitals inside the UV_CL_CONFIG variable.
1
<script>
2
var UV_CL_CONFIG = {
3
team: 'YOUR_TEAM_ID',
4
};
5
</script>
6
<script>!function(w,d,i,s){function l(){if(!d.getElementById(i)){var f=d.getElementsByTagName(s)[0],e=d.createElement(s);e.type="text/javascript",e.async=!0,e.src="https://widget.uservitalshq.com/changelog/loader.js",f.parentNode.insertBefore(e,f)}}if("function"!=typeof w.UserVitals){var c=function(){c.q.push(arguments)};c.q=[],w.UserVitals=c,"complete"===d.readyState?l():w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}}(window,document,"uservitals","script");</script>
Copied!
The data-uservitals-changelog attribute tells us which element is your button. Once the changelog is initialized, we will listen for clicks on elements with this attribute, to trigger the changelog to open.
1
<button data-uservitals-changelog>
2
What's new
3
</button>
Copied!

2. Customizations

There are a few other customizations that you might want to make when embedding your changelog widget.
The position parameter determines which side of the button the widget appears on. It can be set to left or right.
The align parameter determines which side of the button the widget is aligned with. It can be set to top or bottom.
1
var UV_CL_CONFIG = {
2
team: 'YOUR_TEAM_ID',
3
align: 'right',
4
position: 'bottom'
5
};
Copied!
Last modified 4mo ago