Integration with Canny.io



  • Hello!

    I'm trying to make a widget show up in nodebb under one of the categories I have.
    The idea is to check node_modules\nodebb-theme-slick\templates\category.tpl which category it's displaying (for now) and then display the widget instead of the category content.

    <div data-canny />
    <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
      });
    </script>
    

    As I suspected, I'm not sure if this is the right way to do this kind of integration. I know one approach is to build a plugin. But I want to fix this in the template asap to test the canny.io functionality first before I put more time on it.



  • An approach I've had is like this:

    Inside Custom javascript:

    
    function cannyRender() {
    	Canny('render', {
    		boardToken: 'xxxxxx',
    		basePath: null, // See step 2
    		ssoToken: null, // See step 3
    	});
    }
    
    function cannyLoader(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)
        }
    	
    	cannyRender();
    }
    

    And I've placed this code in category.tpl (in slick theme) (PS: FOR NOW):

    <div data-canny />
    

    I'm trying to find a hook that fires on each page visit, or better yet, each time I enter a category!
    Are there any like that? All hooks I've tried seem to fire the first time I enter the categoy on a cold start, not when clicking from the main page.

    Everything seems to fire the first time I save the custom script (because of live reload), but I'm not really sure what the approach should be here, even this line of code runs the first time I run it but no more when visiting the categories.

    $(window).on('AKHFSDAJHFG', console.log('test end'));
    

  • Global Moderator

    action:ajaxify.end is the hook you're looking for.



  • @PitaJ said in Integration with Canny.io:

    action:ajaxify.end is the hook you're looking for.

    I had tried ajaxify.end many times. But missed the fact that I can't run console.log like that, I had to put it in a callback function and it worked great. Thanks for pushing me to this direction again!


Log in to reply
 

Suggested Topics

  • 2
  • 1
  • 5
  • 6
  • 4
| |