Widget Changelog — powiadomienia o nowościach

Widget Changelog to narzędzie informujące użytkowników o nowościach, aktualizacjach i zmianach w produkcie. Wyświetla się jako ikona dzwoneczka z licznikiem nieprzeczytanych wpisów.

Ścieżka: Baza Wiedzy → wybrana KB → Kategorie → wybrana kategoria → Changelog

Jak to działa

1. Tworzysz kategorię w dowolnej Bazie Wiedzy — np. “Changelog” lub “Nowości”
2. Dodajesz wpisy do tej kategorii (mogą mieć statusy, tagi, treść)
3. Kopiujesz kod widgetu ze strony kategorii i wklejasz go na swoją stronę (np. w nagłówku aplikacji)
4. Widget automatycznie pobiera najnowsze wpisy z API i wyświetla je użytkownikom

Widget na stronie

Po osadzeniu kodu na stronie pojawia się ikona dzwoneczka w prawym górnym rogu:

• Żółta kropka z liczbą — liczba nowych, nieprzeczytanych wpisów
• Kliknięcie otwiera listę ostatnich wpisów (domyślnie 5)
• Nowe wpisy podświetlają się na żółto przez 3 sekundy
• Kliknięcie wpisu otwiera pełną treść w nowej karcie i oznacza go jako przeczytany

Oznaczanie wpisów do changeloga

Wpisy trafiają do widgetu na dwa sposoby:

• Przez kategorię — wszystkie publiczne wpisy z przypisanej kategorii
• Przez flagę “Changelog” — zaznaczenie opcji “Changelog” w edycji wpisu (sekcja Więcej opcji) sprawia, że wpis pojawia się w widgecie niezależnie od kategorii

Śledzenie przeczytanych wpisów

Widget zapamiętuje stan odczytu w przeglądarce użytkownika (localStorage):

• Nieprzeczytane wpisy mają niebieską kropkę
• Po kliknięciu wpis zostaje oznaczony jako przeczytany
• Licznik w dzwoneczku zmniejsza się
• Dane odświeżają się co godzinę (cooldown)

Kod do osadzenia

Kod widgetu znajdziesz na stronie kategorii w Bazie Wiedzy. Zawiera:

• Token KB — identyfikator bazy wiedzy (publiczny, tylko do odczytu)
• ID kategorii — z której pobierane są wpisy
• Plik CSS — stylowanie widgetu
• Plik JS — logika Svelte

Przykład osadzenia:

<script>
var ChangelogWidget = {
  base_url: "https://twoja-domena.sugester.pl",
  kb_token: "TOKEN_BAZY_WIEDZY",
  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>

Konfiguracja