React example of the widget embed

CannySDK.js

const CannySDK = {
  init: () => {
    (function(w, d, i, s) {
      if (typeof w.Canny === 'function') {
        return;
      }

      var c = function(){
        c.q.push(arguments);
      };
      c.q = [];
      w.Canny = c;
      function l() {
        if (d.getElementById(i)) {
          return;
        }
        var f = d.getElementsByTagName(s)[0];
        var e = d.createElement(s);
        e.type = 'text/javascript';
        e.async = true;
        e.src = 'https://canny.io/sdk.js';
        f.parentNode.insertBefore(e, f);
      }
      if (d.readyState === 'complete') {
        l();
      } else if (w.attachEvent) {
        w.attachEvent('onload', l);
      } else {
        w.addEventListener('load', l, false);
      }
    })(window, document, 'canny-jssdk', 'script');
  },
};

export default CannySDK;

Feedback.js

import React, { Component, PropTypes } from 'react';

import CannySDK from './CannySDK';

const BoardToken = 'YOUR_BOARD_TOKEN';

export default class Feedback extends Component {
  static contextTypes = {
    viewer: PropTypes.shape({
      ssoToken: PropTypes.string,
    }),
  };

  componentDidMount() {
    CannySDK.init();
    
    const { viewer: { ssoToken } } = this.context;
    Canny('render', {
      boardToken: BoardToken,
      basePath: '/feedback',
      ssoToken: ssoToken,
    });
  }

  render() {
    return (
      <div data-canny />
    );
  }
}