On Site Activation Client Integration

Eager to get started? This quick start guide will help you integrate builder data in client.

yarn add @teko-builder/on-site-react

# or

npm install @teko-builder/on-site-react

Note

Currently

• Only support component popup banner
• Save shown state on cookie

Usage

import { lazy, Suspense } from 'react';
import SmartComponent from "@teko-builder/on-site-react";
import "@teko-builder/on-site-react/dist/base.css";

// lazy import
// const SmartComponent = lazy(() => import('@teko-builder/on-site-react));

function App() {
  const showSmartComponent = appId && trackingAppId && iamId;

  return (
    <Suspense fallback={<>Loading</>}>
      {showSmartComponent && (
        <SmartComponent env="dev" configs={{ appId, trackingAppId, iamId, sessionPeriodMinites }} />
      )}
      <AnotherComponent>
    </Suspense>
  );
}

export default App;

API

Picker

| Property | Type | Default | Description | | --- | --- | --- | --- | | env | dev | stag | production | - | environment to apply library | | configs | SmartComponentConfigs | - | Configs of smart component |

SmartComponentConfigs

| Property | Type | Default | Description | | --- | --- | --- | --- | | iamId | string | - | id of user on IAM system | | appId | number | - | App id of Smart Activation Client App | | trackingAppId | string | - | id of tracking app | | sessionPeriodMinutes | number | 20 minutes | expire time for session |