How to Add a "What's New" Changelog Widget to Your Web App

You shipped a feature customers asked for. A month later, support is still answering "can you add…?" about the very same thing. The problem is rarely the feature; it's that users never found out about it.

A "What's new" widget puts your changelog inside the product, where active users already are. This guide covers why it works, what to show, design tips, and how to add one with Nitrozen.

Why in-app beats email for product updates

• Context. Users see the update while they're using the product, often next to the feature itself.
• Reach. Not everyone reads newsletters; everyone who logs in sees the app.
• Low friction. A small badge or button invites a look without blocking work.
• Always current. The widget reads from your changelog, so there's nothing extra to maintain.

Email and social still matter for big launches and for inactive users. The widget covers everyone else.

Common widget patterns

1. Button and panel. A "What's new" button, bell icon or floating launcher with an unread indicator. Clicking opens a panel listing recent entries. This is the least intrusive and most common pattern.
2. Sidebar or modal. A larger view for longer entries with images.
3. Inline announcement. A one-line banner for a single important change, such as a deprecation or pricing update. Use sparingly.

For ongoing product updates, the button-and-panel pattern is the safest default.

What to show in the widget

• The latest five to ten entries, newest first, with a link to the full changelog page.
• Category labels (New, Improvement, Fix, Announcement) so users can skim.
• A short title and one or two sentences per entry, plus an image for visual changes.
• A link to act: the setting, feature or docs page.

Write entries for the people inside the app. "Export reports to CSV from the Reports page" is better than "Export functionality added". There's more on wording in how to write a changelog users actually read.

UX tips

• Don't auto-open the panel. Let users choose when to look; an unread dot is enough.
• Place it consistently, for example a floating button in a corner or an icon near the help menu.
• Respect dark mode and your app's look so the widget feels native.
• Keep it lightweight. Load the script with defer or async so it never slows the first paint of your app.
• Make it accessible: the trigger should be a real button with a label, reachable by keyboard.
• Pair big launches with a fuller post. The widget entry can link to a blog post or video.

Add the Nitrozen widget

Nitrozen's widget adds a floating changelog button to any website or web app. Clicking it opens your latest entries, which it fetches from your Nitrozen project automatically.

1. Create a project at nitrozen.io (the free plan includes the widget) and publish an entry or two.
2. Style the button. In the dashboard, open your project's settings and choose a Widget Button Color and a Widget Button Icon (chat bubble, bell or megaphone), then save.
3. Copy the embed code. The same settings page has a Widget Embed Code section with a copy button. The snippet is a single deferred script tag that looks like this, with your own project slug, icon and colour filled in:

<script src="https://nitrozen.io/js/widget.js?v=…" data-project="your-project-slug" data-icon="bell" data-color="#4f46e5" defer></script>

4. Paste it into your app layout, just before the closing </body> tag, so the button appears on every page. In a single-page app, put it in the root HTML template rather than a component that re-mounts.
5. Publish an entry and check that it shows up when you click the button.

Because the widget reads from the same project as your hosted changelog page, you write each update once and it appears in both places. Paid plans let the public page live on your own domain, for example changelog.yourapp.com.

Keep the widget fresh automatically

An in-app widget with month-old entries hurts more than it helps. Automate publishing so the widget updates whenever you ship:

• Turn GitHub Releases into entries with the GitHub Action; see automating your changelog from GitHub Releases.
• Post from your deploy scripts with the REST API or the Node.js, Python or Go SDKs.
• Ask an AI assistant to draft and publish an entry through Nitrozen's MCP server.

Measuring whether it works

You don't need complex analytics to tell if the widget helps. Watch for:

• Fewer support questions about features that already exist.
• Usage of newly announced features in the weeks after an entry.
• Clicks from widget entries to docs or feature pages (add UTM parameters to links if you use web analytics).

FAQ

Will the widget slow down my app? The embed code uses defer, so it loads after your page is parsed and doesn't block rendering.

Can I use it on a marketing site as well as in the app? Yes, the same embed works on any web page.

Is the widget on the free plan? Yes. The free plan includes the embeddable widget, a public changelog page and five entries per month.

Tell users what you shipped

Create a free Nitrozen project, paste the widget snippet into your app, and your next update reaches users the moment they log in.