React Native SDK

Integrate Klero feedback, roadmap, changelog, surveys, and widgets into your React Native app.

Requirements

• React Native >= 0.60.0
• react-native-webview >= 11.0.0

Installation

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

For iOS, run pod install:

cd ios && pod install

Quick Start

Any Module with KleroEmbed

KleroEmbed is the generic component that supports all Klero module types. Convenience wrappers are also provided.

import { KleroEmbed, KleroFeedback, KleroRoadmap, KleroChangelog, KleroWidget } from '@kleroai/react-native';

// Using the generic component
<KleroEmbed projectSlug="myproject" embedType="feedback" />

// Or use convenience components
<KleroFeedback projectSlug="myproject" />
<KleroRoadmap projectSlug="myproject" />
<KleroChangelog projectSlug="myproject" />
<KleroWidget projectSlug="myproject" />

Survey with KleroSurvey

For surveys, use the dedicated KleroSurvey component which provides survey-specific event callbacks:

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

function SurveyScreen() {
  return (
    <KleroSurvey
      projectSlug="myproject"
      surveyUlid="01ABC123..."
      onComplete={(data) => {
        console.log('Completed:', data.responseUlid);
        console.log('Answers:', data.answers);
      }}
      onClose={(data) => {
        console.log('Closed, completed:', data.completed);
      }}
      onError={(error) => {
        console.error('Error:', error);
      }}
    />
  );
}

Programmatic Control

KleroEmbed

import { useRef } from 'react';
import { KleroEmbed, KleroEmbedHandle } from '@kleroai/react-native';

function FeedbackScreen() {
  const embedRef = useRef<KleroEmbedHandle>(null);

  return (
    <>
      <Button title="Reload" onPress={() => embedRef.current?.reload()} />
      <KleroEmbed
        ref={embedRef}
        projectSlug="myproject"
        embedType="feedback"
      />
    </>
  );
}

KleroSurvey

import { useRef } from 'react';
import { KleroSurvey, KleroSurveyHandle } from '@kleroai/react-native';

function SurveyScreen() {
  const surveyRef = useRef<KleroSurveyHandle>(null);

  return (
    <>
      <Button title="Open" onPress={() => surveyRef.current?.open()} />
      <Button title="Close" onPress={() => surveyRef.current?.close()} />
      <KleroSurvey
        ref={surveyRef}
        projectSlug="myproject"
        surveyUlid="01ABC123..."
      />
    </>
  );
}

Widget Events

Listen for widget open/close events:

<KleroWidget
  projectSlug="myproject"
  onWidgetOpened={() => console.log('Widget opened')}
  onWidgetClosed={() => console.log('Widget closed')}
/>

Authentication

Pass a customer token to identify logged-in users:

<KleroFeedback
  projectSlug="myproject"
  customerToken="your-jwt-token"
/>

See the Authentication Guide for token generation.

Custom Base URL

For self-hosted or custom domain setups:

<KleroFeedback
  projectSlug="myproject"
  baseUrl="https://feedback.mycompany.com"
/>

Additional Embed Config

Pass extra configuration to the embed:

<KleroEmbed
  projectSlug="myproject"
  embedType="survey"
  embedConfig={{ surveyUlid: "01ABC123..." }}
/>

Event Hook

For granular event handling across multiple components, use the useKleroEvents hook:

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

function App() {
  const { on } = useKleroEvents();

  useEffect(() => {
    const unsubscribe = on('survey:completed', (data) => {
      console.log('Survey completed:', data.responseUlid);
    });
    return unsubscribe;
  }, [on]);
}

API Reference

KleroEmbed Props

Prop	Type	Required	Description
projectSlug	string	Yes	Your Klero project slug
embedType	KleroEmbedType	Yes	Module type (feedback, roadmap, changelog, widget, survey)
baseUrl	string	No	Custom base URL
customerToken	string	No	JWT token for user identification
embedConfig	Record<string, unknown>	No	Additional config passed to the embed
style	ViewStyle	No	Custom container styles
onWidgetOpened	() => void	No	Widget panel opened
onWidgetClosed	() => void	No	Widget panel closed
onLoad	() => void	No	WebView finished loading

KleroEmbedHandle Methods

Method	Description
reload()	Reload the embed

KleroSurvey Props

Prop	Type	Required	Description
projectSlug	string	Yes	Your Klero project slug
surveyUlid	string	Yes	The survey's unique identifier
baseUrl	string	No	Custom base URL
customerToken	string	No	JWT token for user identification
style	ViewStyle	No	Custom container styles
onComplete	(data: SurveyCompletedEvent) => void	No	Survey completed
onClose	(data: SurveyClosedEvent) => void	No	Survey closed
onError	(error: string) => void	No	Survey failed to load
onLoad	() => void	No	WebView finished loading

KleroSurveyHandle Methods

Method	Description
open(surveyUlid?)	Open the survey
close()	Close the survey

Convenience Components

Component	Equivalent
KleroFeedback	<KleroEmbed embedType="feedback" />
KleroRoadmap	<KleroEmbed embedType="roadmap" />
KleroChangelog	<KleroEmbed embedType="changelog" />
KleroWidget	<KleroEmbed embedType="widget" />