Changelog widget

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

app/layout.tsx

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>

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.

PreviousConfiguration NextFavicon

Last updated 12 months ago

Was this helpful?