Aller au contenu principal

Adaptateurs de framework

Wrapper ReactWrapper Flutter

SDK TypeScript

Un seul paquet, six points d'entrée. Importez celui qui correspond à votre environnement, et la construction avec élagage laisse le reste hors de votre bundle.

Où il est publié

@prodantix/sdk on npm.

Installation

Bash
bun add @prodantix/sdk

Points d'entrée

Chaque sous-chemin fournit sa propre build ESM et CommonJS avec ses propres types. La racine est indépendante de l'environnement, les autres ajoutent ce dont un environnement précis a besoin.

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

Le client, l'évaluateur de drapeaux et les interfaces de stockage et de transport. Rien ici ne touche au DOM : vous pouvez fournir vos propres stockage, transport, horloge ou fabrique d'identifiants et l'exécuter n'importe où.

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

Le câblage navigateur au-dessus du même client : persistance dans le stockage local, envoi par balise quand la page se masque, et capture automatique des pages vues et des clics. La relecture de session reste désactivée tant que vous ne fournissez pas d'hôte de relecture.

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

Le même client avec des valeurs par défaut côté serveur. Les événements sont mis en tampon et envoyés en arrière-plan : appelez shutdown avant la fin du processus, sinon le dernier lot ne part jamais.

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

Les sources de politique de sécurité du contenu dont une application a besoin pour joindre Prodantix. Ce module n'importe rien de React ni du navigateur : un fichier de configuration de build peut donc le lire directement.

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

Le widget de support. Montez-le et vous obtenez une poignée qui ouvre, ferme, détruit et identifie. Il se rend dans une racine fantôme fermée : les styles de la page hôte ne l'atteignent jamais.

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

Le lecteur de configuration derrière le widget : il récupère la configuration de la messagerie d'un projet, la met en cache et indique si le projet a activé la messagerie. Le fragment auto-exécutable est construit séparément et reste inaccessible par ce sous-chemin.

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
}