Changelog widget

I currently have support for the following Changelog tools:

• Canny

Canny

Canny allows you to add a data attribute to any button on your website, and turn it into a fully functioning changelog widet.

This can be a great way to keep your users up to date with the latest changes to your website and inspire confidence in your users that you are actively working on the product.

Sign up for an account on Canny.

Environment variables

Once you've created a new app on Canny, go ahead and grab your App ID and add it to your environment variables.

.env
NEXT_PUBLIC_CANNY_APP_ID="your app id"

Enable changelog widget

In order to enable the changelog widget, we need to add a small piece of code to our providers.tsx file.

Ensure you add the code inside the Providers function component and import the useEffect hook from React.

src/app/providers.tsx
// ... existing imports
import { useEffect } from "react";

// Add the following useEffect block
useEffect(() => {
  window.Canny("initChangelog", {
    appID: "6633cddcf7f255d6211b5a40",
    position: "bottom",
    align: "left",
    theme: theme, // options: light [default], dark, auto
  });
}, [theme]);

The full file should look like this after adding the code (unless you've added other features):

src/app/providers.tsx
"use client";

import { useEffect } from "react";
import { SessionProvider } from "next-auth/react";
import { useTheme } from "next-themes";
import { Toaster } from "sonner";
import { CannySDKScript } from "@/lib/canny";

export function Providers({ children }: { children: React.ReactNode }) {
  const { theme } = useTheme();

  // Add the following useEffect block
  useEffect(() => {
    window.Canny("initChangelog", {
      appID: "6633cddcf7f255d6211b5a40",
      position: "bottom",
      align: "left",
      theme: theme, // options: light [default], dark, auto
    });
  }, [theme]);

  return (
    <SessionProvider>
      <Toaster
        richColors
        position="bottom-right"
        expand={false}
        theme={theme === "dark" ? "light" : "dark"}
      />
      <CannySDKScript />
      {children}
    </SessionProvider>
  );
}

Now you just need to add the following data attribute to any element on your website, and it will trigger the changelog widget when clicked.

<button data-canny-changelog>Changelog</button>

The setup script for Canny can be found in the @/lib/canny.tsx file.

More information on how to set up Canny can be found in their official developer documentation.