Chuyển đến nội dung chính

Bộ điều hợp framework

Trình bao ReactTrình bao Flutter

Trình bao React

Một provider và hai hook đặt trên SDK TypeScript. Nó cài một client cho mỗi trang, nên chế độ nghiêm ngặt của React không nhân đôi sự kiện của bạn.

Nơi phát hành

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

Cài đặt

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

Provider

Hãy gắn ProdantixProvider một lần, gần gốc. Nó tạo client web ở lần gắn đầu tiên rồi dùng lại sau đó, vì tạo cái thứ hai sẽ vá History API hai lần và nhân đôi mọi sự kiện được thu tự động.

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>
);
Trình nhắn tin chỉ xuất hiện khi bạn truyền messengerHost và dự án đã bật nó trong console. Không có cấu hình và không có bộ đệm thì không dựng gì cả, vì một nút mở mặc định sẽ là phỏng đoán vẽ lên trang của khách hàng.

Các hook

useProdantix trả về client của trang, hoặc null khi ở phía máy chủ, trước khi effect chạy, và bên ngoài provider. useMessenger trả về handle để mở và đóng tiện ích, và vẫn là null cho tới khi cấu hình dự án được đọc và cho biết đã bật.

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>
  );
};

Khi nó không gửi gì

Một ứng dụng vẫn phát hành y như vậy khi tắt Prodantix, nên thiếu khoá hay host không phải là lỗi. prodantixConfig cho biết cả hai giá trị có mặt hay không, còn skipReason nói trong một dòng vì sao lần gắn này sẽ không gửi gì, thay vì lặng lẽ trả về.

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));
}