@intunix/react

Official React binding for Intunix, the AI-native experience management platform — in-app surveys, NPS, CSAT, and feedback forms with triggers, targeting, and analytics.

Install

npm install @intunix/react @intunix/core

Usage

Wrap your app once. <IntunixProvider> creates the client and mounts the experience host.

import { IntunixProvider } from '@intunix/react';

export function Root() {
  return (
    // Register globally (optional) — these go live as soon as the SDK loads.
    <IntunixProvider apiKey="pk_live_xxx" config={{ register: ['welcome'] }}>
      <App />
    </IntunixProvider>
  );
}

A form shows in one of two ways. Register it to auto-show when its trigger (URL, event, time…) matches — useRegisterForm makes it live while the component is mounted, so it only fires on the right screen:

import { useRegisterForm } from '@intunix/react';

function PricingPage() {
  useRegisterForm('pricing_survey');   // opens automatically when its trigger matches
  return <Pricing />;
}

Or open one manually from a click:

import { useTrack, useExperience } from '@intunix/react';

function Checkout() {
  const track = useTrack();
  const nps = useExperience('nps_q4');
  return (
    <button onClick={() => { track('checkout_done'); nps.show(); }}>
      Pay
    </button>
  );
}

Only one form is on screen at a time — if several match at once they queue and show in sequence. URL-triggered forms wait urlTriggerDelayMs (default 600).

config.register (string[] | 'all') also controls what the SDK fetches at all, not just which triggers go live — and a form only reaches the SDK when the console's "Available in Web SDK" toggle and register both agree. Full table and details in @intunix/core's README.

Inline forms

Render a feedback form in normal document flow (hosted pages, builder previews):

import { FeedbackForm } from '@intunix/react';

<FeedbackForm content={formContent} onComplete={(r) => console.log(r)} />

Context

Attach dynamic context (course id, screen, plan tier…) to targeting, responses, and cooldown scoping — set once, session-scoped, or per call:

import { useSetContext, useExperience } from '@intunix/react';

const setContext = useSetContext();
setContext({ courseId: 'c-101' });   // sticky — stays attached until cleared/new session
setContext(null);                    // clear it

const nps = useExperience('nps_course');
nps.show({ context: { courseId: 'c-102' } });   // per-call — wins over sticky context

<FeedbackForm> takes the same idea as a prop — the context rides along on the onComplete result, it isn't submitted separately:

<FeedbackForm
  content={formContent}
  context={{ courseId: 'c-102' }}
  onComplete={(r) => console.log(r.context)}
/>

The catalog fields that drive targeting/eligibility/cadence for these forms (autoActivate, targeting, eligibility, cadence, frequencyScope, capabilities.batchShown) are set in the Intunix console, not in code — see the full reference in @intunix/core's README.

API

• <IntunixProvider apiKey config? components? renderExperience?> — setup + host.
• useIntunix() — the IntunixClient.
• useTrack() / useIdentify() — event + identity helpers.
• useReset() — returns a reset() to call on logout: forgets the user, rotates the anon id, ends the session, clears context. identify() already keeps one user's cooldowns off another's; reset() buys a clean session boundary and an honest anonymous_id on responses. See @intunix/core.
• useSetContext() — set/clear the sticky, session-scoped context bag.
• useRegisterForm(idOrSlug) — register on mount / unregister on unmount.
• useExperience(idOrSlug) — { show(opts?: { context }) } to open a form by id or slug.
• useActiveExperiences() — currently-shown experiences.
• <FeedbackForm context?>, <ExperienceHost>, and step/Header/Footer/Thanks overrides.

License

Proprietary © Intunix.