Quickstart

This walks you through everything from a fresh account to a real response landing in the dashboard. Total wall-clock: about five minutes, three of which are npm install.

This quickstart uses React Native. On Flutter? The flow is identical — jump to the Flutter SDK → Install guide for the flutter pub add insito_flutter equivalent, then come back for steps 4–6 (building a survey and firing the trigger are the same).

Prerequisites

An iOS or Android app you can rebuild today. Both our SDKs are supported — React Native (RN >= 0.72, React >= 18, plus the AsyncStorage, @gorhom/bottom-sheet, gesture-handler, and reanimated peers — see Install) and Flutter (Flutter >= 3.27, Dart >= 3.6).
Five minutes.

1. Create a workspace and project

Head to admin.insito.app, pick an email + password, and confirm via the email you receive.

Finish onboarding

Name your workspace, give your first project a name (one project = one app), and pick your platform. We’ll show you the API key on the next screen — keep it; you’ll paste it into your app in a moment.

Save the API key

The key starts with proj_ and looks like proj_e014b2efbf474530955c48d40c5bb794. Drop it in your password manager or .env file — it’s a project secret.

2. Install the SDK

npm install @insito/react-native @react-native-async-storage/async-storage @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated

yarn add @insito/react-native @react-native-async-storage/async-storage @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated

pnpm add @insito/react-native @react-native-async-storage/async-storage @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated

bun add @insito/react-native @react-native-async-storage/async-storage @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated

The survey UI is a @gorhom/bottom-sheet, so gesture-handler and reanimated are required peers (remember reanimated’s Babel plugin and importing gesture-handler at your entry point). AsyncStorage backs the persistent offline queue. See Install for the full setup.

3. Initialise the SDK

Call MicroSurvey.init() once at app startup with the API key from step 1, then wrap your app in <InsitoProvider> so the modal can render.

app/_layout.tsx

import { useEffect } from "react";
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { InsitoProvider, MicroSurvey } from "@insito/react-native";

MicroSurvey.init({
  apiKey: "proj_e014b2efbf474530955c48d40c5bb794",
  debug: __DEV__,
});

export default function RootLayout() {
  useEffect(() => {
    void MicroSurvey.identify({
      userId: "user-from-your-auth-system",
      platform: "ios",
      appVersion: "1.0.0",
    });
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <InsitoProvider>
        <Stack />
      </InsitoProvider>
    </GestureHandlerRootView>
  );
}

init() is safe to call from a module top-level (executes once at bundle load). identify() ties subsequent triggers to a stable user — call it as early as you can after login.

4. Build a survey

Back in admin.insito.app:

New survey

Open your project, click New survey.

Configure

Give it a name (Checkout NPS), add an App event trigger with the key checkout_completed, leave throttling at its default (7 days), and add one question — nps type, text “How likely are you to recommend us to a friend?”.

Activate

Toggle the survey to Active and save.

See Creating surveys for a longer walk-through of the builder.

5. Fire the trigger

Find the point in your app where the matching event happens — for our example, the screen shown after a successful checkout — and call:

import { MicroSurvey } from "@insito/react-native";

void MicroSurvey.trigger("checkout_completed");

The SDK round-trips the event to the API, evaluates throttling + audience rules server-side, and either:

Renders the modal (the user sees question 1 immediately), or
Returns silently (the trigger fired but no survey was eligible).

6. Watch the response land

Submit an NPS in your dev build. Switch back to your project in admin.insito.app and you’ll see:

The survey’s analytics update shortly after (NPS score and 30-day trend).
The survey’s Responses tab gets the new row with the answer attached.
Slack posts a notification if you’ve connected an integration (wire up Slack).

You’re done

That’s the full loop. Real beta partners typically deepen the integration with:

Screen tracking

Auto-discover screens so trigger keys can target specific paths.

Theming

Match the modal to your brand — colors, typography, radii.

Lifecycle events

MicroSurvey.on("response_submitted", ...) for analytics fan-out.

Slack integration

Get a Block Kit ping in #feedback for every response.

Get started

Concepts

React Native SDK

Flutter SDK

Dashboard

MCP server

Prerequisites

1. Create a workspace and project

2. Install the SDK

3. Initialise the SDK

4. Build a survey

5. Fire the trigger

6. Watch the response land

You’re done

Screen tracking

Theming

Lifecycle events

Slack integration

​Prerequisites

​1. Create a workspace and project

​2. Install the SDK

​3. Initialise the SDK

​4. Build a survey

​5. Fire the trigger

​6. Watch the response land

​You’re done

Screen tracking

Theming

Lifecycle events

Slack integration

Prerequisites

1. Create a workspace and project

2. Install the SDK

3. Initialise the SDK

4. Build a survey

5. Fire the trigger

6. Watch the response land

You’re done