npm package: @nemme/js-sdk
Description: Nemme JS SDK
Author: Nemme AS
Latest version: 0.8.0

# Nemme SDK

Client-side SDK for integrating Nemme into websites and React apps.

**Package structure**

- `@nemme/js-sdk` — Core tracking and client (React-free)
- `@nemme/js-sdk/react` — React Provider and hooks
- `@nemme/js-sdk/forms` — Form manager and types

---

## 1) Use via script tag (CDN)

Add React/ReactDOM UMD, then the SDK and CSS, and initialize.

```html
<!doctype html>
<html>
  <head>
    <!-- React globals required by SDK UMD build -->
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

    <!-- Nemme SDK UMD -->
    <script src="https://unpkg.com/@nemme/js-sdk@0.5.2/dist/nemme-sdk.umd.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@nemme/js-sdk@0.5.2/dist/js-sdk.css" />
  </head>
  <body>
    <script>
      NemmeSDK('YOUR_CLIENT_KEY')
        .init({ userIdentifier: 'user-123', debug: true })
        .then(client => {
          window.nemme = client;
          client.track({ eventKey: 'page_view' });
        });
    </script>
  </body>
</html>
```

Notes:

- The UMD bundle externalizes React, so `React` and `ReactDOM` globals must be present.

---

## 2) Install with npm/yarn/pnpm

```bash
npm install @nemme/js-sdk
# or: yarn add @nemme/js-sdk
# or: pnpm add @nemme/js-sdk
```

If you use the SDK UI/forms in a bundler app, also import the SDK CSS:

```ts
import '@nemme/js-sdk/style.css';
```

### Core-only usage (tracking)

```ts
import NemmeSDK, { NemmeClient } from '@nemme/js-sdk';

async function start() {
  const client = NemmeSDK('YOUR_CLIENT_KEY');
  await client.init({ userIdentifier: 'user-123', debug: true });
  await client.track({ eventKey: 'button_clicked', data: { id: 'cta' } });
}

start();
```

Types:

```ts
import type { ClientConfigType, TrackEventOptions } from '@nemme/js-sdk';
```

---

## 3) React integration

Import React helpers from the `react` subpath.

```tsx
import ReactDOM from 'react-dom/client';
import { NemmeProvider, useNemme } from '@nemme/js-sdk/react';

import '@nemme/js-sdk/style.css';

function App() {
  const nemme = useNemme();
  return (
    <div id="nm">
      <button onClick={() => nemme.track({ eventKey: 'button_clicked', data: { id: 'cta' } })}>Track CTA</button>
    </div>
  );
}

async function bootstrap() {
  const root = ReactDOM.createRoot(document.getElementById('root')!);
  root.render(
    <NemmeProvider clientKey="YOUR_CLIENT_KEY" config={{ userIdentifier: 'user-123', debug: true }}>
      <App />
    </NemmeProvider>
  );
}

bootstrap();
```

- `NemmeProvider` initializes the `NemmeClient` internally.
- `useNemme()` returns helpers backed by the current client (and exposes `client`, `isInitialized`, `error`).

---

## 4) Forms (advanced)

Forms can be configured via `formConfig` during initialization.

```ts
import NemmeSDK from '@nemme/js-sdk';
import type { FormConfig } from '@nemme/js-sdk/forms';

async function start() {
  const formConfig: FormConfig = { theme: 'light' };

  const client = NemmeSDK('YOUR_CLIENT_KEY');
  await client.init({
    userIdentifier: 'user-123',
    debug: true,
    formConfig
  });
}

start();
```

---

## API (brief)

- `NemmeSDK(clientKey: string): NemmeClient`
- `NemmeSDK.init({ clientKey, ...config }): Promise<NemmeClient>`
- `nemme.init(config): Promise<void>`
- `nemme.track({ eventKey, data? }: TrackEventOptions): Promise<void>`

Examples: see `examples/browser-usage.html` and `examples/simple-example.html`.