Lumaktaw sa pangunahing nilalaman

Mga framework adapter

React wrapperFlutter wrapper

React wrapper

Isang provider at dalawang hook sa ibabaw ng TypeScript SDK. Isang client lang ang ini-install nito bawat pahina, kaya hindi dinodoble ng React strict mode ang iyong mga event.

Saan ito nakalathala

@prodantix/react on npm. It wraps @prodantix/sdk, so install both.

I-install

Bash
bun add @prodantix/sdk @prodantix/react
ExportWhat it is
ProdantixProviderCreates the client once per page and provides it
useProdantixThe client for the page, or null
useMessengerA handle that opens and closes the widget, or null
prodantixConfigThe config when both key and host are present, else null
skipReasonWhy this mount will send nothing, or null
resetProdantixForTestClears the once-per-page install, for tests

Ang provider

I-mount ang ProdantixProvider nang isang beses, malapit sa root. Ginagawa nito ang web client sa unang mount at ginagamit muli pagkatapos, dahil ang paggawa ng pangalawa ay magpa-patch sa History API nang dalawang beses at dodoblehin ang bawat autocaptured na event.

TypeScript
import { ProdantixProvider } from '@prodantix/react';

export const Providers = ({ children }: { children: ReactNode }) => (
  <ProdantixProvider
    options={{
      apiKey: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
      host: 'https://eu.api.prodantix.com',
      messengerHost: 'https://eu.edge.prodantix.com',
    }}
  >
    {children}
  </ProdantixProvider>
);
Lumilitaw lang ang messenger kapag ipinasa mo ang messengerHost at naka-on ito sa proyekto mula sa console. Kapag walang konfigurasyon at walang cache, wala itong ini-render, dahil ang isang default na launcher ay hula lang na ipininta sa pahina ng kostumer.

Ang mga hook

Ibinabalik ng useProdantix ang client para sa pahina, o null sa server, bago tumakbo ang effect, at sa labas ng provider. Nagbabalik ang useMessenger ng handle na nagbubukas at nagsasara ng widget, at nananatiling null hangga sa mabasa ang konfigurasyon ng proyekto at sabihin nitong naka-enable.

TypeScript
import { useMessenger, useProdantix } from '@prodantix/react';

export const HelpButton = () => {
  const prodantix = useProdantix();
  const messenger = useMessenger();

  // Both are null until the provider effect has run, so neither is assumed.
  return (
    <button
      onClick={() => {
        prodantix?.capture('help.opened');
        messenger?.open();
      }}
      type="button"
    >
      Get help
    </button>
  );
};

Kapag wala itong ipinapadala

Pareho pa ring naipapadala ang isang app kahit naka-off ang Prodantix, kaya hindi error ang nawawalang key o host. Sinasabi ng prodantixConfig kung nasa lugar ang dalawang halaga, at sinasabi ng skipReason sa isang linya kung bakit walang ipapadala ang isang mount, sa halip na tahimik na bumalik.

TypeScript
import { prodantixConfig, skipReason } from '@prodantix/react';

const env = {
  host: process.env.NEXT_PUBLIC_PRODANTIX_HOST,
  key: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
};

// null when either value is missing: the app runs with Prodantix switched off.
if (prodantixConfig(env) === null) {
  console.warn(skipReason(env, null));
}