Integration with Canny.io

broskmenmi

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.

broskmenmi

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'));

PitaJ

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

broskmenmi

@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!