Changelog Widget
The changelog widget lets you embed your changelog into your website.
It works by attaching itself to a button. Whenever the button is clicked, the changelog will open.
Here's a live example that loads Canny's changelog widget:
1. Install our client-side SDK
Our client-side SDK lets you perform Canny-related actions on your website. This includes identifying your users and adding widgets.
Add the following code anywhere inside the <head> or <body> tags.
<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://canny.io/sdk.js",f.parentNode.insertBefore(e,f)}}if("function"!=typeof w.Canny){var c=function(){c.q.push(arguments)};c.q=[],w.Canny=c,"complete"===d.readyState?l():w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}}(window,document,"canny-jssdk","script");</script>2. Add data-canny-changelog to your button
The data-canny-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.
<button data-canny-changelog>
View Changelog
</button>3. Initialize the changelog
The final step is to tell our SDK to initialize the widget. You can only initialize the widget once, re-initializations may result in errors or unpredictable behaviour.
If your button element is created at page load, you can simply add the HTML snippet anywhere after the code from step #1.
If your button element might be rendered after page load, then you'll want to call our SDK after the button is created.
HTML
React
Angular
Vue.js
<script>
Canny('initChangelog', {
appID: 'YOUR_APP_ID',
position: 'bottom',
align: 'left',
theme: 'light', // options: light [default], dark, auto
});
</script>