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.
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 every time 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>