Changelog

The Changelog module displays your product updates and release notes, keeping users informed about new features and improvements.

Features

• View changelog entries with dates and descriptions
• Filter by tags/categories
• Rich text content with images
• Navigate to individual entry details

Web Integration

Basic Usage

<script src="https://YOUR-PROJECT.klero.ai/embed/klero.js" async></script>

<klero-changelog></klero-changelog>

Display Specific Entry

Link directly to a specific changelog entry:

<klero-changelog data-config='{
    "changelogSlug": "january-2024-update"
}'></klero-changelog>

Configuration Options

<klero-changelog data-config='{
    "changelogSlug": "v2-release",
    "customerToken": "YOUR_TOKEN"
}'></klero-changelog>

Option	Type	Default	Description
changelogSlug	string	-	Display a specific changelog entry
customerToken	string	-	JWT token for authenticated users

Styling

The changelog widget works well in content areas:

<article style="max-width: 800px; margin: 0 auto;">
    <h1>What's New</h1>
    <klero-changelog></klero-changelog>
</article>

React

import { KleroChangelog } from '@kleroai/react';

function App() {
  return (
    <KleroChangelog
      projectSlug="myproject"
      changelogSlug="v2-release" // optional
      customerToken="user-jwt-token" // optional
    />
  );
}

Vue

<script setup>
import { KleroChangelog } from '@kleroai/vue';
</script>

<template>
  <KleroChangelog
    project-slug="myproject"
    changelog-slug="v2-release"
    customer-token="user-jwt-token"
  />
</template>

React Native

import { KleroChangelog } from '@kleroai/react-native';

function App() {
  return (
    <KleroChangelog
      projectSlug="myproject"
      changelogSlug="v2-release" // optional
      customerToken="user-jwt-token" // optional
    />
  );
}

Android

import com.klero.sdk.KleroConfig
import com.klero.sdk.KleroChangelog

val config = KleroConfig(
    projectSlug = "myproject",
    customerToken = "user-jwt-token" // optional
)
val changelog = KleroChangelog(this, config, "v2-release") // slug optional
setContentView(changelog)

iOS

import KleroSDK

let config = KleroConfig(
    projectSlug: "myproject",
    customerToken: "user-jwt-token" // optional
)
let changelog = KleroChangelog(config: config, changelogSlug: "v2-release") // slug optional
view.addSubview(changelog)

Flutter

import 'package:klero_flutter/klero_flutter.dart';

KleroChangelog(
  projectSlug: 'myproject',
  customerToken: 'user-jwt-token', // optional
)

Complete Web Example

<!DOCTYPE html>
<html>
<head>
    <title>Changelog</title>
    <style>
        .changelog-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        .subtitle {
            color: #666;
            margin-bottom: 32px;
        }
    </style>
</head>
<body>
    <div class="changelog-container">
        <h1>Changelog</h1>
        <p class="subtitle">All the latest updates and improvements.</p>
        <klero-changelog></klero-changelog>
    </div>

    <script src="https://your-project.klero.ai/embed/klero.js" async></script>
</body>
</html>

Use Cases

In-App Changelog

Display recent updates within your application:

<div class="updates-panel">
    <h3>Recent Updates</h3>
    <klero-changelog></klero-changelog>
</div>

Marketing Site

Showcase your product's progress on your marketing site:

<section class="changelog-section">
    <h2>We're always improving</h2>
    <klero-changelog></klero-changelog>
</section>