Quick Start

Get Klero widgets running on your website in under 5 minutes.

Step 1: Add the Loader Script

Add the Klero loader script to your HTML. Using your project's subdomain automatically configures all widgets.

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

Replace YOUR-PROJECT with your actual project slug (e.g., acme, myapp).

Step 2: Add Widget Elements

Place widget elements wherever you want them to appear:

Feedback Board

<klero-feedback></klero-feedback>

Product Roadmap

<klero-roadmap></klero-roadmap>

Changelog

<klero-changelog></klero-changelog>

In-App Widget

<klero-widget></klero-widget>

Survey

// Open a survey programmatically
window.Klero.openSurvey('YOUR_SURVEY_ULID');

Step 3: Authenticate Users (Optional)

If users are logged into your application, you can pass their identity to Klero:

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

See the Authentication Guide for token generation.

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>Feedback</title>
</head>
<body>
    <h1>Share Your Feedback</h1>

    <!-- Klero Feedback Widget -->
    <klero-feedback></klero-feedback>

    <!-- Load Klero (place at end of body) -->
    <script src="https://your-project.klero.ai/embed/klero.js" async></script>
</body>
</html>

Multiple Widgets

You can use multiple widgets on the same page:

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

<div class="feedback-section">
    <h2>Feature Requests</h2>
    <klero-feedback></klero-feedback>
</div>

<div class="roadmap-section">
    <h2>Our Roadmap</h2>
    <klero-roadmap></klero-roadmap>
</div>

<div class="changelog-section">
    <h2>Recent Updates</h2>
    <klero-changelog></klero-changelog>
</div>

Web Frameworks

For React and Vue applications, use the dedicated SDK packages:

Framework	Package	Install
React	@kleroai/react	npm
Vue	@kleroai/vue	npm

Mobile Apps

Klero provides native SDKs for mobile platforms, as well as a direct WebView integration option for any platform:

Platform	Package	Install
React Native	@kleroai/react-native	npm
Flutter	klero_flutter	pub.dev
iOS	KleroSDK	Swift Package Manager
Android	com.github.klero-ai:klero-android	JitPack

For platforms without a dedicated SDK (Capacitor, etc.), see the Direct WebView Integration guide.

What's Next?

• Authentication - Authenticate your users
• Feedback - Detailed feedback module docs
• Roadmap - Detailed roadmap module docs
• Changelog - Detailed changelog module docs
• In-App Widget - Floating widget docs
• Surveys - Survey module docs
• React SDK - React integration
• Vue SDK - Vue integration
• React Native SDK - React Native integration
• Flutter SDK - Flutter integration
• iOS SDK - Native iOS integration
• Android SDK - Native Android integration
• Direct Integration - WebView integration without SDKs