Use canny to show the product changelog updates
I've used a product called Canny to show a Changelog widget inside my products.
To integrate Canny into your Next.js app you need to apply this changes.
update layout.tsx
And add the HTML data attribute data-canny-changelog to the button that will trigger the Changelog pop-up.
Your Changelog widget should now be ready.
Last updated
Was this helpful?
Was this helpful?
import Script from "next/script";
/* .... */
useEffect(() => {
// @ts-ignore
if (window?.Canny) {
// @ts-ignore
Canny("initChangelog", {
appID: "<your_canny_app_id>",
});
}
// @ts-ignore
}, [typeof window === "undefined"]);
/* .... */
<head>
<Script
id="canny"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
!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");
`,
}}
/>
</head>