Lumaktaw sa pangunahing nilalaman

Mga framework adapter

React wrapperFlutter wrapper

TypeScript SDK

Isang package na may anim na entry point. I-import ang tumutugma sa iyong runtime, at iiwan ng tree-shaken na build ang iba sa labas ng iyong bundle.

Saan ito nakalathala

@prodantix/sdk on npm.

I-install

Bash
bun add @prodantix/sdk

Mga entry point

Bawat subpath ay may sariling ESM at CommonJS na build kasama ang sariling mga type. Runtime agnostic ang root, at idinaragdag ng iba ang kailangan ng isang partikular na runtime.

SubpathWhat it exports
@prodantix/sdkProdantixClient, createClient, evaluateFlag, FlagsClient, MessagesClient
@prodantix/sdk/webcreateWebClient, installAutocapture, installSessionReplay, WebTransport
@prodantix/sdk/nodecreateNodeClient
@prodantix/sdk/cspprodantixConnectSrc, prodantixScriptSrc
@prodantix/sdk/chatmountChat, ChatClient, ChatPanel, resolveAppearance
@prodantix/sdk/messengerfetchMessengerConfig, cachedMessengerConfig, MESSENGER_CACHE_KEY

@prodantix/sdk

Ang client, ang tagatasa ng flag, at ang mga interface para sa storage at transport. Walang anumang humahawak sa DOM dito, kaya puwede kang magbigay ng sarili mong storage, transport, orasan o id factory at patakbuhin ito kahit saan.

TypeScript
import { createClient, MemoryStorage } from '@prodantix/sdk';

const prodantix = createClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  storage: new MemoryStorage(),
});

prodantix.capture('order.completed', { properties: { amount: 4200, currency: 'XAF' } });
await prodantix.flush();

@prodantix/sdk/web

Kableng pang-browser sa ibabaw ng parehong client: pananatili sa local storage, paghahatid sa pamamagitan ng beacon kapag itinago ang pahina, at autocapture ng pageview at click. Nananatiling naka-off ang session replay hangga't wala kang ibinibigay na replay host.

TypeScript
import { createWebClient } from '@prodantix/sdk/web';

const prodantix = createWebClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  flagsHost: 'https://api.prodantix.com',
  autocaptureOptions: { clicks: true, pageviews: true },
});

prodantix.identify('user-42', { set: { plan: 'pro' } });

if (await prodantix.isFeatureEnabled('new-checkout')) {
  // ...
}

// Every per-flag read records one $feature_flag_called exposure.
const variant = await prodantix.getVariant('new-checkout');
if (variant?.key === 'treatment') {
  // ...
}

// A flag targeting a cohort reads this user's memberships from the store;
// pass them yourself to skip the lookup.
if (await prodantix.isFeatureEnabledLocal('members', { cohorts: ['<cohort id>'] })) {
  // ...
}

@prodantix/sdk/node

Ang parehong client na may mga default na pang-server. Ini-buffer ang mga event at ipinapadala sa background, kaya tawagin ang shutdown bago lumabas ang proseso o hindi kailanman aalis ang huling batch.

TypeScript
import { createNodeClient } from '@prodantix/sdk/node';

// A node client streams flag changes over Socket.IO by default and refetches
// the snapshot on push; streamFlags: false leaves only the 30s poll.
const prodantix = createNodeClient({
  apiKey: process.env.PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  streamFlags: true,
});

prodantix.capture('job.completed', { properties: { queue: 'emails' } });
await prodantix.shutdown();

@prodantix/sdk/csp

Ang mga pinagmulan ng content security policy na kailangan ng isang app para maabot ang Prodantix. Wala itong ini-import mula sa React o sa browser, kaya direktang mababasa ito ng isang build config file.

TypeScript
import { prodantixConnectSrc, prodantixScriptSrc } from '@prodantix/sdk/csp';

const hosts = {
  ingest: 'https://eu.api.prodantix.com',
  edge: 'https://eu.edge.prodantix.com',
  replay: 'https://eu.replay.prodantix.com',
};

const policy = [
  `connect-src ${prodantixConnectSrc(hosts)}`,
  `script-src ${prodantixScriptSrc(hosts)}`,
].join('; ');

@prodantix/sdk/chat

Ang widget ng suporta. I-mount ito at makakakuha ka ng handle na nagbubukas, nagsasara, sumisira, at nagpapakilala ng user. Nagre-render ito sa loob ng saradong shadow root, kaya hindi kailanman naaabot ito ng mga estilo ng host page.

TypeScript
import { mountChat } from '@prodantix/sdk/chat';

const messenger = mountChat({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.edge.prodantix.com',
  distinctId: prodantix.distinctId,
});

document.querySelector('#help')?.addEventListener('click', () => messenger.open());

@prodantix/sdk/messenger

Ang tagabasa ng setting sa likod ng widget: kinukuha nito ang konfigurasyon ng messenger para sa isang proyekto, kina-cache ito, at sinasabi kung naka-on ang messenger sa proyekto. Hiwalay na binubuo ang self-executing na snippet at hindi ito maaabot sa pamamagitan ng subpath na ito.

TypeScript
import { fetchMessengerConfig } from '@prodantix/sdk/messenger';

const config = await fetchMessengerConfig({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.edge.prodantix.com',
});

if (config?.enabled) {
  // the project has the messenger switched on
}