In-App Widget

The In-App Widget is a floating button that provides quick access to feedback, roadmap, changelog, and surveys from anywhere in your application.

Features

• Floating action button
• Slide-out panel with tabs for different features
• Unread changelog badge
• Customizable appearance
• Mobile-responsive

Web Integration

Basic Usage

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

<klero-widget></klero-widget>

Configuration Options

<klero-widget data-config='{
    "customerToken": "YOUR_TOKEN"
}'></klero-widget>

Option	Type	Default	Description
customerToken	string	-	JWT token for authenticated users

JavaScript Control

Control the widget programmatically:

// Open the widget
window.Klero.widget.open();

// Close the widget
window.Klero.widget.close();

// Toggle the widget
window.Klero.widget.toggle();

// Open to a specific tab
window.Klero.widget.open('changelog');

Styling

Adjust z-index if needed:

klero-widget {
    --klero-widget-z-index: 10000;
}

React

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

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

Vue

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

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

React Native

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

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

Programmatic Control

import { useRef } from 'react';
import { KleroWidget, KleroWidgetHandle } from '@kleroai/react-native';

function App() {
  const widgetRef = useRef<KleroWidgetHandle>(null);

  return (
    <>
      <Button title="Open" onPress={() => widgetRef.current?.open()} />
      <KleroWidget ref={widgetRef} projectSlug="myproject" />
    </>
  );
}

Android

import com.klero.sdk.KleroConfig
import com.klero.sdk.KleroWidget

val config = KleroConfig(
    projectSlug = "myproject",
    customerToken = "user-jwt-token" // optional
)
val widget = KleroWidget(this, config)

// Add to your layout
container.addView(widget)

// Programmatic control
widget.open()
widget.close()
widget.toggle()

iOS

import KleroSDK

let config = KleroConfig(
    projectSlug: "myproject",
    customerToken: "user-jwt-token" // optional
)
let widget = KleroWidget(config: config)

view.addSubview(widget)

// Programmatic control
widget.open()
widget.close()
widget.toggle()

Complete Web Example

<!DOCTYPE html>
<html>
<head>
    <title>My SaaS App</title>
</head>
<body>
    <!-- Your app content -->
    <main>
        <h1>Dashboard</h1>
        <!-- ... -->
    </main>

    <!-- Klero Widget - appears as floating button -->
    <klero-widget data-config='{
        "customerToken": "{{ $customerToken }}"
    }'></klero-widget>

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

Mobile Behavior

On mobile devices:

• The button appears as a smaller floating action button
• The panel opens as a full-screen modal
• Swipe gestures are supported for closing

Changelog Badge

The widget automatically shows a badge when there are unread changelog entries. This is based on the user's last visit timestamp (stored in localStorage for anonymous users, or in the user profile for authenticated users).