Roadmap

The Roadmap module displays your product roadmap, showing planned features organized by status columns.

Features

• View roadmap items organized by status (e.g., Planned, In Progress, Done)
• See linked feedback items
• Responsive layout that adapts to container width

Web Integration

Basic Usage

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

<klero-roadmap></klero-roadmap>

Display Specific Roadmap

If you have multiple roadmaps, display a specific one by slug:

<klero-roadmap data-config='{
    "roadmapSlug": "q1-2024-roadmap"
}'></klero-roadmap>

Configuration Options

<klero-roadmap data-config='{
    "roadmapSlug": "product-roadmap",
    "customerToken": "YOUR_TOKEN"
}'></klero-roadmap>

Option	Type	Default	Description
roadmapSlug	string	-	Display a specific roadmap by slug
customerToken	string	-	JWT token for authenticated users

Styling

The roadmap adapts to its container:

<div style="width: 100%; overflow-x: auto;">
    <klero-roadmap></klero-roadmap>
</div>

React

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

function App() {
  return (
    <KleroRoadmap
      projectSlug="myproject"
      roadmapSlug="product-roadmap" // optional
      customerToken="user-jwt-token" // optional
    />
  );
}

Vue

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

<template>
  <KleroRoadmap
    project-slug="myproject"
    roadmap-slug="product-roadmap"
    customer-token="user-jwt-token"
  />
</template>

React Native

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

function App() {
  return (
    <KleroRoadmap
      projectSlug="myproject"
      roadmapSlug="product-roadmap" // optional
      customerToken="user-jwt-token" // optional
    />
  );
}

Android

import com.klero.sdk.KleroConfig
import com.klero.sdk.KleroRoadmap

val config = KleroConfig(
    projectSlug = "myproject",
    customerToken = "user-jwt-token" // optional
)
val roadmap = KleroRoadmap(this, config, "product-roadmap") // slug optional
setContentView(roadmap)

iOS

import KleroSDK

let config = KleroConfig(
    projectSlug: "myproject",
    customerToken: "user-jwt-token" // optional
)
let roadmap = KleroRoadmap(config: config, roadmapSlug: "product-roadmap") // slug optional
view.addSubview(roadmap)

Flutter

import 'package:klero_flutter/klero_flutter.dart';

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

Complete Web Example

<!DOCTYPE html>
<html>
<head>
    <title>Product Roadmap</title>
    <style>
        .roadmap-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="roadmap-container">
        <h1>Our Product Roadmap</h1>
        <p>See what we're building and what's coming next.</p>
        <klero-roadmap></klero-roadmap>
    </div>

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