Saltar al contenido principal

Adaptadores de framework

Wrapper de ReactWrapper de Flutter

SDK de TypeScript

Un paquete con seis puntos de entrada. Importa el que corresponda a tu entorno de ejecución, y la compilación con tree shaking deja el resto fuera de tu bundle.

Dónde se publica

@prodantix/sdk on npm.

Instalación

Bash
bun add @prodantix/sdk

Puntos de entrada

Cada subruta trae su propia compilación ESM y CommonJS con sus propios tipos. La raíz es independiente del entorno, y las demás añaden lo que necesita un entorno concreto.

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

El cliente, el evaluador de banderas y las interfaces de almacenamiento y transporte. Nada de esto toca el DOM, así que puedes aportar tu propio almacenamiento, transporte, reloj o fábrica de ids y ejecutarlo donde quieras.

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

El cableado de navegador sobre el mismo cliente: persistencia en el almacenamiento local, envío por baliza cuando la página se oculta, y autocaptura de vistas de página y clics. La repetición de sesión sigue apagada hasta que le des un host de repetición.

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

El mismo cliente con valores por defecto de servidor. Los eventos se almacenan en un búfer y se envían en segundo plano, así que llama a shutdown antes de que el proceso termine o el último lote no saldrá nunca.

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

Las fuentes de la política de seguridad de contenido que una aplicación necesita para llegar a Prodantix. No importa nada de React ni del navegador, así que un archivo de configuración de compilación puede leerlo directamente.

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

El widget de soporte. Móntalo y obtienes un manejador que abre, cierra, destruye e identifica al usuario. Se renderiza dentro de una shadow root cerrada, así que los estilos de la página anfitriona nunca lo alcanzan.

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

El lector de ajustes que hay detrás del widget: obtiene la configuración del mensajero de un proyecto, la guarda en caché e informa de si el proyecto tiene el mensajero activado. El fragmento autoejecutable se compila aparte y no es accesible por esta subruta.

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
}