> ## Documentation Index
> Fetch the complete documentation index at: https://docs.insito.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Sign up, install the SDK, and ship your first in-app survey in under 5 minutes.

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`.

<Note>
  This quickstart uses React Native. On **Flutter**? The flow is identical —
  jump to the [Flutter SDK → Install](/sdk/flutter/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).
</Note>

## 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](/sdk/react-native/install)) and **Flutter** (Flutter >= 3.27,
  Dart >= 3.6).
* Five minutes.

## 1. Create a workspace and project

<Steps>
  <Step title="Sign up">
    Head to [admin.insito.app](https://admin.insito.app), pick an
    email + password, and confirm via the email you receive.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 2. Install the SDK

<CodeGroup>
  ```bash npm theme={null}
  npm install @insito/react-native @react-native-async-storage/async-storage @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated
  ```

  ```bash yarn theme={null}
  yarn add @insito/react-native @react-native-async-storage/async-storage @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated
  ```

  ```bash pnpm theme={null}
  pnpm add @insito/react-native @react-native-async-storage/async-storage @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated
  ```

  ```bash bun theme={null}
  bun add @insito/react-native @react-native-async-storage/async-storage @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated
  ```
</CodeGroup>

<Note>
  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](/sdk/react-native/install) for the full setup.
</Note>

## 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.

```tsx app/_layout.tsx theme={null}
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>
  );
}
```

<Tip>
  `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.
</Tip>

## 4. Build a survey

Back in [admin.insito.app](https://admin.insito.app):

<Steps>
  <Step title="New survey">
    Open your project, click **New survey**.
  </Step>

  <Step title="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?".
  </Step>

  <Step title="Activate">
    Toggle the survey to **Active** and save.
  </Step>
</Steps>

See [Creating surveys](/dashboard/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:

```tsx theme={null}
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](/dashboard/integrations/slack)).

## You're done

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

<CardGroup cols={2}>
  <Card title="Screen tracking" icon="map" href="/sdk/react-native/screen-tracking">
    Auto-discover screens so trigger keys can target specific paths.
  </Card>

  <Card title="Theming" icon="palette" href="/sdk/react-native/theming">
    Match the modal to your brand — colors, typography, radii.
  </Card>

  <Card title="Lifecycle events" icon="podcast" href="/sdk/react-native/events">
    `MicroSurvey.on("response_submitted", ...)` for analytics fan-out.
  </Card>

  <Card title="Slack integration" icon="slack" href="/dashboard/integrations/slack">
    Get a Block Kit ping in `#feedback` for every response.
  </Card>
</CardGroup>