Skip to main content

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.

The SDK ships four themes out of the box — light, dark, minimal, rounded — and a deep token system so you can override anything down to the corner radius of a button.

​
Pick a preset

MicroSurvey.init({
  apiKey: "proj_xxx",
  theme: { preset: "rounded" },
});
PresetWhen to use
light (default)Clean white surfaces, blue primary. Works against most app palettes.
darkBlack surfaces, off-white text. Pair with your app’s dark mode.
minimalHairline borders, neutral grey primary. Great for content-first apps that want the modal to disappear.
roundedPill buttons, large radii, friendly typography. Consumer / lifestyle apps.

​
Override tokens

Pass overrides to deep-merge on top of a preset. Only the keys you provide are changed. 
MicroSurvey.init({
  apiKey: "proj_xxx",
  theme: {
    preset: "light",
    overrides: {
      colors: {
        primary: "#FF6B35",
        primaryText: "#FFFFFF",
      },
      typography: {
        fontFamily: "Inter",
      },
      radii: {
        md: 12,
        pill: 999,
      },
    },
  },
});

​
Full token map

interface InsitoTheme {
  colors: {
    background: string;       // Modal canvas
    surface: string;          // Card / button surfaces
    overlay: string;          // Backdrop behind the modal (incl. alpha)
    text: string;
    textMuted: string;
    border: string;
    primary: string;          // "Next" / "Submit" buttons, accents
    primaryText: string;      // Text on top of primary
    npsDetractor: string;     // 0–6 bucket color
    npsPassive: string;       // 7–8 bucket color
    npsPromoter: string;      // 9–10 bucket color
  };
  typography: {
    fontFamily?: string;      // System default if unset
    questionSize: number;     // Question text
    bodySize: number;         // Body / option text
    labelSize: number;        // Helper text
    fontWeightRegular: "400" | "500";
    fontWeightBold: "600" | "700";
  };
  spacing: { xs: number; sm: number; md: number; lg: number; xl: number };
  radii: { sm: number; md: number; lg: number; pill: number };
  components: {
    showPoweredBy: boolean;        // "Powered by Insito" badge at bottom
    modalMaxHeightFraction: number; // 0..1, default 0.85
  };
}

​
Dynamic theme

Use the <InsitoProvider theme={...}> prop to react to your app’s runtime state (system dark mode, user preference, etc.). The prop wins over the SDK-level config. 
import { useColorScheme } from "react-native";
import { InsitoProvider } from "@insito/react-native";

function Root() {
  const scheme = useColorScheme();
  return (
    <InsitoProvider theme={{ preset: scheme === "dark" ? "dark" : "light" }}>
      <App />
    </InsitoProvider>
  );
}

​
Reading the resolved theme

If you want to extend Insito’s color system into the rest of your app (matching button colors, e.g.), read MicroSurvey.theme after init: 
const theme = MicroSurvey.theme;
console.log(theme.colors.primary);
// "#FF6B35"
Or use the standalone helper for preview / Storybook scenarios: 
import { resolveTheme } from "@insito/react-native";

const previewTheme = resolveTheme("rounded", {
  colors: { primary: "#FF6B35" },
});

​
Branding rules

  • The components.showPoweredBy flag is true on Free plans and cannot be disabled. Pro+ plans can set it to false.
  • Keep colors WCAG AA-compliant — primary on background should hit 3:1 contrast minimum for usability. The default presets already pass.
  • modalMaxHeightFraction is bounded [0.5, 0.95]. Values outside the range are clamped at runtime.

​
Custom rendering (advanced)

If the built-in modal isn’t enough — say you want a bottom sheet, or an inline survey inside a screen — you can render your own UI:
  1. Subscribe to useInsito() to read the activeSurvey reactively.
  2. When activeSurvey != null, render your custom UI from activeSurvey.questions.
  3. Call MicroSurvey.submitResponse(activeSurvey.surveyId, answers) when the user submits.
Note: <InsitoProvider> is still required for the legacy modal fallback. We’re tracking [INS-…] for a “headless mode” that drops the provider entirely.