Customizations
There are a few other customizations that you might want to make when embedding your changelog widget.
Customize widget position and alignment
The position parameter determines which side of the button the widget appears on. It can be set to top, bottom, left, or right.
The align parameter determines which side of the button the widget is aligned with. It can be set to top, bottom, left, or right.
If position is top/bottom, then align must be left/right, and vice-versa.
Canny('initChangelog', {
appID: 'YOUR_APP_ID',
position: 'bottom', // widget is positioned below your button
align: 'left', // widget's left side is aligned with your button's left side
theme: 'light', // options: light [default], dark, auto
});Customize the unseen badge style
When there are new entries that your user has not seen yet, we will add a red badge to your trigger button.
By default, we style the badge using absolute positioning so that it does not disrupt your layout.
If you'd like to customize this badge, you can do this in the following way:
/* These are the default badge styles */
.Canny_BadgeContainer .Canny_Badge {
position: absolute;
top: -1px;
right: -1px;
border-radius: 10px;
background-color: red;
padding: 5px;
border: 1px solid white;
}Filter the changelog
To show entries that have a specific label, add this additional field with the desired label IDs.
Canny('initChangelog', {
appID: 'YOUR_APP_ID',
position: 'bottom',
align: 'left',
// only entries that have one of these labels will be shown
labelIDs: ['5f1234567890abcdef123111', '5f1234567890abcdef123222'],
theme: 'light', // options: light [default], dark, auto
});Close the changelog
If you want to close the changelog, for example when the user navigates to another page in an single-page app:
React
Angular
Vue.js
componentWillUnmount() {
Canny('closeChangelog');
}