Pular para o conteúdo principal

Adaptadores de framework

Wrapper ReactWrapper Flutter

SDK TypeScript

Um pacote com seis pontos de entrada. Importe o que corresponde ao seu runtime, e a build com tree shaking deixa o restante fora do seu bundle.

Onde está publicado

@prodantix/sdk on npm.

Instalação

Bash
bun add @prodantix/sdk

Pontos de entrada

Cada subcaminho traz sua própria build ESM e CommonJS com seus próprios tipos. A raiz independe do runtime, e os demais acrescentam o que um runtime específico precisa.

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

O cliente, o avaliador de flags e as interfaces de armazenamento e transporte. Nada aqui toca no DOM, então você pode fornecer seu próprio armazenamento, transporte, relógio ou fábrica de ids e executá-lo em qualquer lugar.

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

A fiação de navegador sobre o mesmo cliente: persistência no armazenamento local, entrega por beacon quando a página se oculta, e autocaptura de pageviews e cliques. A repetição de sessão fica desligada até você informar um host de repetição.

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

O mesmo cliente com padrões de servidor. Os eventos ficam em buffer e são enviados em segundo plano, então chame shutdown antes de o processo terminar ou o último lote nunca sai.

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

As fontes de política de segurança de conteúdo que um aplicativo precisa para alcançar o Prodantix. Não importa nada do React nem do navegador, então um arquivo de configuração de build pode lê-lo diretamente.

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

O widget de suporte. Monte-o e você recebe um handle que abre, fecha, destrói e identifica o usuário. Ele é renderizado dentro de uma shadow root fechada, então os estilos da página hospedeira nunca o alcançam.

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

O leitor de configurações por trás do widget: ele busca a configuração do mensageiro de um projeto, guarda em cache e informa se o projeto tem o mensageiro ligado. O trecho autoexecutável é construído à parte e não é alcançável por este subcaminho.

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
}