[Sugester V2 EN](https://sugester.intum.pl/kb/sugester-v2-en.md) / [Knowledge Base](https://sugester.intum.pl/kb/sugester-v2-en/knowledge-base.md)

# [Widget Changelog — notifications about new features](https://sugester.intum.pl/kb/sugester-v2-en/widget-changelog-notifications-about-new-features.md)

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:

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

<table>
<tr><th>Parameter</th><th>Description</th></tr>
<tr><td><code>base_url</code></td><td>Your Sugester account address</td></tr>
<tr><td><code>kb_token</code></td><td>Knowledge base token (visible in KB settings)</td></tr>
<tr><td><code>category_id</code></td><td>ID of the category with changelog entries</td></tr>
<tr><td><code>reload_cooldown</code></td><td>Time between refreshes in seconds (default is 3600)</td></tr>
</table>