Initialize

React
JavaScript
Script Tag

Wrap your app with MilanaProvider to initialize recording automatically on mount:

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>
  );
}

With options

<MilanaProvider
  productId="prd_YOUR_PRODUCT_ID"
  clientKey="key_YOUR_CLIENT_KEY"
  sessionInfo={{
    environment: "production",
    version: "1.0.0",
    metadata: {
      plan: "enterprise",
      region: "us-east",
    },
  }}
  options={{
    shouldRecordCanvas: false,
    privacy: {
      blockClass: "milana-block",
      maskTextClass: "milana-mask",
      maskInputTypes: {
        password: true,
        tel: true,
      },
    },
  }}
>
  <YourApp />
</MilanaProvider>

Deferred initialization

To gate Milana behind a feature flag, use deferred initialization. See the Feature-flagged Rollout guide for a complete walkthrough.

import { init } from "milana-js";

await init("prd_YOUR_PRODUCT_ID", "key_YOUR_CLIENT_KEY", {
  environment: "production",
  version: "1.0.0",
});

With options

import { init } from "milana-js";

await init(
  "prd_YOUR_PRODUCT_ID",
  "key_YOUR_CLIENT_KEY",
  {
    environment: "production",
    version: "1.0.0",
    metadata: {
      plan: "enterprise",
      region: "us-east",
    },
  },
  {
    shouldRecordCanvas: false,
    privacy: {
      blockClass: "milana-block",
      maskTextClass: "milana-mask",
      maskInputTypes: {
        password: true,
        tel: true,
      },
    },
  }
);

Deferred initialization

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

<script>
  window._milanaQueue = window._milanaQueue || [];
  function Milana() { window._milanaQueue.push([].slice.call(arguments)); }
</script>
<script async src="https://cdn.getmilana.ai/milana.js"></script>

<script>
  Milana("init", "prd_YOUR_PRODUCT_ID", "key_YOUR_CLIENT_KEY", {
    environment: "production",
    version: "1.0.0",
  });
</script>

With options

Milana("init", "prd_YOUR_PRODUCT_ID", "key_YOUR_CLIENT_KEY",
  {
    environment: "production",
    version: "1.0.0",
    metadata: {
      plan: "enterprise",
      region: "us-east",
    },
  },
  {
    shouldRecordCanvas: false,
    privacy: {
      blockClass: "milana-block",
      maskTextClass: "milana-mask",
      maskInputTypes: {
        password: true,
        tel: true,
      },
    },
  }
);

Checking the result

Enable debug mode from your browser console to see session state, then reload the page:

localStorage.setItem("milana_debug_mode", "true");
// Reload, then check the console for "Milana:" log messages

To disable, run localStorage.removeItem("milana_debug_mode") and reload.

Parameters

string

required

Your Milana product ID. Find it on your Settings page.

Must start with prd_ and be exactly 30 characters long. Passing an invalid product ID throws an error and prevents initialization.

string

required

Your Milana client key. Must start with key_. Find it on your Settings page alongside your product ID.

object

required

Session-level information sent with every recording.

Show SessionInfo properties

string

required

The environment your app is running in, for example "production" or "staging". Used to filter sessions in the dashboard.

string

required

Your application’s release version, for example "1.0.0". Visible on session detail pages and available in AI queries.

object

Any additional key-value pairs to attach to the session at the start. Values can be any JSON-serializable type.

object

Optional configuration. All fields are optional.

Show Options properties

string

default:"https://in.getmilana.ai"

Override the default ingest endpoint. Only change this if instructed by Milana support.

boolean

default:"false"

Enable recording of <canvas> elements. Increases payload size; enable only when canvas content is critical to your analysis.

boolean

default:"false"

Enable recording inside cross-origin iframes. Same-origin iframes are recorded automatically. You must also call initCrossOriginIframe() from within each cross-origin iframe. See iframe Recording.

boolean

default:"false"

Disable recording of contenteditable elements. Enable this if you use a rich-text editor and do not want its content captured.

object

Privacy controls. See Privacy Controls for the full reference.

boolean

default:"false"

React only. Skip auto-initialization on mount. Call initialize() from useMilana() later to trigger initialization manually.

Return value

boolean

true if the session started and was included in the current sampling rate. false if the session was not sampled, the credentials were invalid, or a network error occurred. Your application is not affected either way — a false result simply means no data will be recorded for this session.

Get Started

Guides

SDK Reference

Help

With options

Deferred initialization

With options

Deferred initialization

With options

Checking the result

Parameters

Return value

​With options

​Deferred initialization

​With options

​Deferred initialization

​With options

​Checking the result

​Parameters

​Return value

With options

Deferred initialization

With options

Deferred initialization

With options

Checking the result

Parameters

Return value