Embed a Canny widget into your website

Docs

Install

API

Setup

Install Canny Add Company Data Add Custom Fields Advanced

Feedback Widget

Overview Web Mobile Single Sign-On Advanced

Changelog Widget

Setup Customizations Privacy

Note

The widget is an advanced feature. For most cases, we recommend using your full Canny site instead (your-company.canny.io).

Still unsure which to use? Contact us

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://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>

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