Mentiq - SaaS Retention Analytics Platform

mentiq-sdk

Mentiq SDK

Track user onboarding, identify users, and send custom events in your React & Next.js app — in minutes.

Installation

Terminal

npm install mentiq-sdk

Quick Start

Add <Mentiq> to your root layout — that's it. Only apiKey and projectId are required. Page views and errors are tracked automatically.

app/layout.tsx

import { Mentiq } from "mentiq-sdk";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Mentiq apiKey="mentiq_live_your_api_key" projectId="your-project-id">
          {children}
        </Mentiq>
      </body>
    </html>
  );
}

Tip: Find your API key in the Projects page of your dashboard. A key is created automatically with every new project.

What happens automatically

Anonymous ID & session created in localStorage

Page views tracked on every navigation (SPA-aware)

Session duration, scroll depth & click count recorded

Email auto-detected from NextAuth, Supabase, Firebase, Clerk, Auth0

Events batched and flushed every 10 seconds

Identify Users

Until you call identify(), events are anonymous. Call it after login to link all past and future events to a known user.

after-login.tsx

import { useMentiq } from "mentiq-sdk";

function AfterLogin({ user }) {
  const { identify } = useMentiq();

  // Call once after login
  identify(user.id, {
    email: user.email,
    name: user.name,
    plan: user.plan,
  });
}

Onboarding Tracking

Use the useOnboardingTracker hook to track every step of your user onboarding. Define your steps, then call methods as users progress.

onboarding.tsx

import { useOnboardingTracker, useMentiq } from "mentiq-sdk";

function OnboardingWizard() {
  const { analytics } = useMentiq();

  const tracker = useOnboardingTracker(analytics, {
    steps: [
      { name: "create_account",   index: 0, required: true  },
      { name: "complete_profile", index: 1, required: true  },
      { name: "invite_team",      index: 2, required: false },
      { name: "create_project",   index: 3, required: true  },
    ],
  });

  if (!tracker) return null;

  return <YourOnboardingUI tracker={tracker} />;
}

Track progress

Call these methods at the right points in your UI:

Using the tracker

// Start onboarding
tracker.start();

// When a user finishes a step
tracker.completeStep("complete_profile");

// Skip an optional step
tracker.skipStep("invite_team", "will do later");

// If the user leaves early
tracker.abandon("closed_modal");

// Check progress anytime
const progress = tracker.getProgress();
// => { currentStep, completedSteps, totalSteps, progressPercent, duration }

Tip: When all required steps are completed, an onboarding_completed event fires automatically — no extra code needed.

Custom Events

Use track() to send any custom event:

Component.tsx

import { useMentiq } from "mentiq-sdk";

function SignupButton() {
  const { track } = useMentiq();

  return (
    <button
      onClick={() =>
        track("button_clicked", {
          button: "signup_cta",
          page: "hero",
        })
      }
    >
      Sign Up Free
    </button>
  );
}

Configuration

Only apiKey and projectId are required. You can optionally enable more features:

All available props

<Mentiq
  apiKey="mentiq_live_abc123"
  projectId="my-project"

  // Optional
  endpoint="https://api.mentiq.io"
  userId="user-123"          // Pre-identify a user
  trackPageViews={true}      // Auto-track page views (default: true)
  trackErrors={true}         // Auto-track JS errors (default: true)
  trackPerformance={false}   // Track Core Web Vitals
  trackHeatmaps={false}      // Track clicks, scrolls, hovers
  trackSessions={false}      // Record sessions (requires rrweb)
>
  <App />
</Mentiq>

Need Help?

Check out the SDK source on GitHub or reach out to support.