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
• Only show banner at home page
• Only show first banner
• Revalidate every 1 minute
• Save shown state on sessionStorage

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 = platformId && trackingAppId && iamId;

  return (
    <Suspense fallback={<>Loading</>}>
      {showSmartComponent && (
        <SmartComponent env="dev" configs={{ platformId, trackingAppId, iamId }} />
      )}
      <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 | | platformId | number | - | id of platform | | trackingAppId | string | - | id of tracking app |