Advanced Widget Features

• Web Widget "Ready" Callback

  In some cases, you may want to be informed when the web widget has finished loading. This can be helpful for showing and hiding loading states, or other conditional views.

  The widget configuration accepts an optional onLoadCallback parameter, which will run a specified function when the web widget has finished loading.

  To find your board token, log in above and select your board from the dropdown.

  HTML

  React

  Angular

  Vue.js

  <div data-canny></div>
  <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://sdk.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>
  <script>
    Canny('render', {
      boardToken: 'YOUR_BOARD_TOKEN',
      basePath: null, // See 'web' tab
      ssoToken: null, // See 'web' tab
      onLoadCallback: () => console.log('done'),
      theme: 'light', // options: light [default], dark, auto
    });
  </script>

• Change the Theme

  If your app switches between light and dark mode, you can update the web widget's theme without reloading the page.

  Call setTheme after the widget has rendered, with light, dark or auto. If the changelog widget is also on the page, its theme changes too.

  // options: light, dark, auto
  Canny('setTheme', 'dark');

• Questions

  If you have any questions or issues, email us at support@canny.io and we'll get back to you ASAP.