# Changelog widget

I've used a product called [Canny](https://canny.io/?ref=shipped.club) to show a Changelog widget inside my products.

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FTfvnFUxwmqvPdQF6xQKy%2Fimage.png?alt=media&#x26;token=c0623936-0576-4bd1-a510-c3bb264584dd" alt=""><figcaption></figcaption></figure>

To integrate Canny into your Next.js app you need to apply this changes.

1. update layout.tsx

{% code title="app/layout.tsx" %}

```jsx
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>
```

{% endcode %}

2. 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.
