Docs
Install
API
Log in
Setup
Install CannyAdd Company DataAdd Custom FieldsSecurityAdvanced
Feedback Widget
OverviewWebMobileSingle Sign-OnAdvanced
Changelog Widget
SetupCustomizationsPrivacy
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
Web Widget
These are instructions on how to embed Canny's widget into your website.
  1. 1. Embed the widget
    Add the following code where you'd like to embed the widget, anywhere inside the <body> tag.
    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 step 2
    ssoToken: null, // See step 3,
    theme: 'light', // options: light [default], dark, auto
  });
</script>
    You should now be able to load the widget. It's that easy! 😃
  2. 2. Configure the basePath parameter for URL Syncing
    This syncs the URLs inside our widget with your website. For example, if our widget is embedded at yourwebsite.com/feedback then you'd pass in '/feedback'.
    Also don't forget to update your routing so that /feedback/* points to the same page.
    Rails
    React
    Angular
    Vue.js
    get "/feedback(/*any)" => "feedback#index", as: :feedback
  3. 3. Configure the ssoToken parameter for Single Sign-On
    Single Sign-On connects the widget to your existing user accounts. This provides a more seamless experience for your users. It also lets you know exactly who is posting and voting.
    Follow our Setup Single Sign-On guide to generate SSO tokens on your server.
    This is required if you would like to install the widget with a private board.
  4. Questions
    If you have any questions or issues, email us at support@canny.io and we'll get back to you ASAP.