Feedback

The Feedback module displays your public feedback board, allowing users to view, submit, and vote on feedback items.

Features

• View feedback items organized by board and status
• Submit new feedback (with optional authentication)
• Vote on existing items
• Filter and search feedback
• View individual feedback details and comments

Web Integration

Basic Usage

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

<klero-feedback></klero-feedback>

With Authenticated User

When users are logged into your application, pass their token to enable seamless feedback submission:

<klero-feedback data-config='{
    "customerToken": "YOUR_JWT_TOKEN"
}'></klero-feedback>

See Authentication for token generation.

Configuration Options

<klero-feedback data-config='{
    "customerToken": "YOUR_TOKEN",
    "openInNewWindow": true
}'></klero-feedback>

Option	Type	Default	Description
customerToken	string	-	JWT token for authenticated users
openInNewWindow	boolean	true	Open login/auth links in new window

Styling

The widget adapts to its container width:

<div style="max-width: 800px; margin: 0 auto;">
    <klero-feedback></klero-feedback>
</div>

React

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

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

See the React SDK guide for full setup instructions.

Vue

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

<template>
  <KleroFeedback
    project-slug="myproject"
    customer-token="user-jwt-token"
  />
</template>

React Native

Use the @kleroai/react-native package to show Klero feedback in your React Native app.

Installation

npm install @kleroai/react-native react-native-webview

Usage

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

function App() {
  return (
    <KleroFeedback
      projectSlug="myproject"
      customerToken="user-jwt-token" // optional
      onError={(error) => console.error('Error:', error)}
    />
  );
}

Android

Use the Klero Android SDK to show feedback in your Android app.

Installation

dependencies {
    implementation("com.github.klero-ai:klero-android:0.1.0")
}

Usage

import com.klero.sdk.KleroConfig
import com.klero.sdk.KleroFeedback

val config = KleroConfig(
    projectSlug = "myproject",
    customerToken = "user-jwt-token" // optional
)
val feedback = KleroFeedback(this, config)
setContentView(feedback)

iOS

Use the KleroSDK package to show feedback in your iOS app.

Installation (Swift Package Manager)

dependencies: [
    .package(url: "https://github.com/klero-ai/klero-ios.git", from: "0.1.0")
]

Usage

import KleroSDK

let config = KleroConfig(
    projectSlug: "myproject",
    customerToken: "user-jwt-token" // optional
)
let feedback = KleroFeedback(config: config)
view.addSubview(feedback)

Flutter

import 'package:klero_flutter/klero_flutter.dart';

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

Complete Web Example

<!DOCTYPE html>
<html>
<head>
    <title>Feedback</title>
</head>
<body>
    <div style="max-width: 800px; margin: 0 auto; padding: 20px;">
        <h1>Share Your Feedback</h1>
        <klero-feedback></klero-feedback>
    </div>

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