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