React Setup

Get your Product ID and Client Key

Open your Milana Settings page.Copy your Product ID (starts with prd_) and your Client Key (starts with key_).

Install the SDK

npm install milana-js

Add the provider

Wrap your application with MilanaProvider near the root of the component tree:

import { MilanaProvider } from "milana-js/react";

function App() {
  return (
    <MilanaProvider
      productId="prd_YOUR_PRODUCT_ID"
      clientKey="key_YOUR_CLIENT_KEY"
      sessionInfo={{
        environment: "production",
        version: "1.0.0",
      }}
    >
      <YourApp />
    </MilanaProvider>
  );
}

Your Client Key is a public identifier meant to be included in client-side code. It does not grant access to your data.

If your site sends a Content-Security-Policy header, add https://in.getmilana.ai to connect-src so the SDK can send recorded data.

Identify users

When user information is available, use the useMilana() hook to identify the user:

import { useMilana } from "milana-js/react";

function Dashboard() {
  const { user } = useAuth();
  const { identify } = useMilana();

  useEffect(() => {
    if (user) {
      void identify({
        userId: user.id,
        email: user.email,
        name: user.name,
        metadata: {
          createdAt: user.createdAt,
        },
      });
    }
  }, [user, identify]);

  return <>{/* ... */}</>;
}

Verify in the dashboard

Open the Integration page. Within a few seconds of loading a page with the SDK, a new session should appear under Latest Sessions.If you don’t see sessions after a minute:

Open the browser console and look for Milana: log messages
Confirm you see Milana: Ready in the console
Check that your Product ID starts with prd_ and your Client Key starts with key_
See the Troubleshooting guide for more help

Feature-flagged rollout

To roll out Milana gradually or target specific user segments/flows, see the Feature-flagged Rollout guide.

useMilana hook

Property	Type	Description
`initialize`	`() => Promise<{ success: boolean }>`	Trigger initialization manually (for deferred init). One-shot; subsequent calls return `{ success: false }`.
`isInitialized`	`boolean`	`true` after initialization has completed successfully.
`identify`	`(input: IdentifyInput) => Promise<{ success: boolean }>`	Associate the session with a known user. See `identify`.
`updateUser`	`(user: UserUpdate) => Promise<{ success: boolean }>`	Refresh user identity. See `updateUser`.
`updateSession`	`(session: SessionUpdate) => Promise<{ success: boolean }>`	Push session metadata. See `updateSession`.
`trackEvent`	`(eventName: string, attributes?: TrackEventAttributes) => void`	Track a custom event. Calls are queued until initialization completes.
`stopRecording`	`() => Promise<{ success: boolean }>`	End the current session; next `initialize()` starts a fresh one. See `stopRecording`.
`update`	`(payload: UpdatePayload) => Promise<{ success: boolean }>`	Deprecated — prefer `identify` / `updateUser` / `updateSession`. See `update`.

useMilanaOptional

useMilanaOptional() returns MilanaContextValue | null. Returns null when used outside a MilanaProvider. Useful for shared components that may render in apps that don’t use Milana.

Get Started

Guides

SDK Reference

Help

Feature-flagged rollout

useMilana hook

useMilanaOptional

What’s next

Track custom events

Privacy controls

​Feature-flagged rollout

​useMilana hook

​useMilanaOptional

​What’s next

Track custom events

Privacy controls

Feature-flagged rollout

useMilana hook

useMilanaOptional

What’s next