Widget Changelog — notifications about new features

Widget Changelog is a tool that informs users about new features, updates, and changes in the product. It appears as a bell icon with a counter for unread entries.

Path: Knowledge Base → selected KB → Categories → selected category → Changelog

How it works

1. Create a category in any Knowledge Base — e.g., “Changelog” or “News”
2. Add entries to this category (they can have statuses, tags, content)
3. Copy the widget code from the category page and paste it onto your site (e.g., in the application header)
4. The widget automatically fetches the latest entries from the API and displays them to users

Widget on the page

After embedding the code on the page, a bell icon appears in the upper right corner:

• Yellow dot with a number — the number of new, unread entries
• Clicking opens the list of recent entries (default is 5)
• New entries highlight in yellow for 3 seconds
• Clicking an entry opens the full content in a new tab and marks it as read

Marking entries for the changelog

Entries reach the widget in two ways:

• By category — all public entries from the assigned category
• By the “Changelog” flag — checking the “Changelog” option in the entry edit (section More options) makes the entry appear in the widget regardless of the category

Tracking read entries

The widget remembers the read state in the user’s browser (localStorage):

• Unread entries have a blue dot
• After clicking, the entry is marked as read
• The counter in the bell decreases
• Data refreshes every hour (cooldown)

Embed code

You can find the widget code on the category page in the Knowledge Base. It includes:

• KB Token — the identifier for the knowledge base (public, read-only)
• Category ID — from which entries are fetched
• CSS file — styling for the widget
• JS file — Svelte logic

Example of embedding:

<script>
var ChangelogWidget = {
  base_url: "https://your-domain.sugester.pl",
  kb_token: "KNOWLEDGE_BASE_TOKEN",
  category_id: 123
}
</script>
<link rel="stylesheet" href="https://widgets.intum.net/.../intum-changelog-widget-1.0.css">
<script src="https://widgets.intum.net/.../intum-changelog-widget-1.0.js"></script>
<div id="intum-changelog-widget"></div>

Configuration