@trustingsocial/ltv-web-sdk

v0.0.19

Published

3 months ago

This project is meant to give developers full control LTV Chat that can be easily used in any web applications.

Downloads

342

0High
0Medium
0Low

emle

cuong.nguyen.ts

sre-cloud-account

LTV-WEB-SDK

This project is meant to give developers full control LTV Chat that can be easily used in any web applications.

Installation

Install ltv-web-sdk using yarn

yarn add @trustingsocial/ltv-web-sdk

or npm

npm i @trustingsocial/ltv-web-sdk

Import to project

Using HTML

<script src="https://unpkg.com/@trustingsocial/[email protected]/index.umd.js"></script>
<script>
  window.LtvWebSdk.init(...);
</script>

Using React/Vue/Angular

import { LtvWebSdk } from '@trustingsocial/ltv-web-sdk';

LtvWebSdk.init(...)

Quick Start

import { LtvWebSdk } from '@trustingsocial/ltv-web-sdk';

const ltvWebSdkInstance = LtvWebSdk.init({
  sdkCode: '<sdk_code>',
  xApiKey: '<api_key>',
  baseURL: '<base_url>',
  websocketURL: '<websocket_url>',
  pageId: '<page_id>',
  getAccessToken: async () => {
    // Call to Bank BE to get access token
    // ...
    // Resolve
    return {
      accessToken: "<token>",
      expiredTime: "2024-05-28T03:53:46.522463+00:00",
      sdkChannel: "web_sdk_ea01913b-8f9c-4d09-9bb0-933af9abc834",
      webviewChannel: "webview_ea01913b-8f9c-4d09-9bb0-933af9abc834",
    }
  }
});

/*******************************************************************/

// Using React JS
const App = () => {
   useEffect(() => {
      ltvWebSdkInstance.mount();
      return () => ltvWebSdkInstance.unmount();
   }, []);

   return <View></View>
}
// Or Using Angular JS
export class App implements OnInit, OnDestroy {
   constructor() {}

   ngOnInit() {
      ltvWebSdkInstance.mount();
   }

   ngOnDestroy() {
      ltvWebSdkInstance.unmount();
   }
};
// Or Using Vue JS
<script setup>
  import { beforeUnmounted, onMounted } from 'vue'
  onMounted(() => {
    ltvWebSdkInstance.mount();
  })
  beforeUnmounted(() => {
    ltvWebSdkInstance.unmount();
  })
</script>

<template>
  <div ref="el"></div>
</template>

Usage UI builder

To setup ltv-web-sdk please follow the step-by-step instructions below

1. Initialize instance

const ltvWebSdkInstance = new LtvWebSdk(configs: AppConfigs);

const ltvWebSdkInstance = LtvWebSdk.init(configs: AppConfigs);

Example

import { LtvWebSdk } from '@trustingsocial/ltv-web-sdk';

const ltvWebSdkInstance = LtvWebSdk.init({
  sdkCode: config.sdkCode,
  xApiKey: config.xApiKey,
  baseURL: config.baseURL,
  websocketURL: config.websocketURL,
  pageId: 'page-id',
  getAccessToken: async () => {
    // Call to Bank BE to get access token
    // ...
    // Resolve
    return {
      accessToken: '<token>',
      expiredTime: '2024-05-28T03:53:46.522463+00:00',
      sdkChannel: 'web_sdk_ea01913b-8f9c-4d09-9bb0-933af9abc834',
      webviewChannel: 'webview_ea01913b-8f9c-4d09-9bb0-933af9abc834',
    };
  },
});

2. Update Bubble UI Config

ltvWebSdkInstance.setBubble(configs: BubbleConfigs | ((context: SdkContext) => BubbleConfigs))

Example

setBubble((context) => ({
  enable: true,
  size: 56,
  offset: {
    offsetX: context.window.width <= 667 ? 16 : 32,
    offsetY: context.window.width <= 667 ? 16 : 32,
    anchorX: 'right',
    anchorY: 'bottom',
  },
  closeColor: '#fff',
  closeIconBackground: '#0476f1',
  closeIconSize: 28,
  imageIconBackground: '#0476f1',
  imageIconSize: 56,
  imageIconUrl: '/assets/logo.svg',
}));

3. Update Button UI Config

ltvWebSdkInstance.setButton(configs: ButtonConfigs | ((context: SdkContext) => ButtonConfigs))

Example

ltvWebSdkInstance.setButton({
  enable: true,
  backgroundColor: '#fff',
  color: '#000',
  element: '.ltv-button',
  iconSize: 24,
  iconUrl: '/assets/logo.svg',
  radius: 24,
  text: 'Support',
});

4. Update Chat UI Config

ltvWebSdkInstance.setChat(configs: ChatConfigs | ((context: SdkContext) => ChatConfigs));

Example

// Set full screen
ltvWebSdkInstance.setChat((context) => ({
  width: context.window.width,
  height: context.window.height,
  offset: {
    offsetX: 0,
    offsetY: 0,
    anchorX: 'left',
    anchorY: 'top',
  },
  radius: 0,
  closeButtonColor: '#fff',
}));

// Set top bubble button and full screen on mobile screen
ltvWebSdkInstance.setChat((context) => {
  if (context.window.width <= 667) {
    return {
      width: context.window.width,
      height: context.window.height,
      offset: {
        offsetX: 0,
        offsetY: 0,
        anchorX: 'left',
        anchorY: 'top',
      },
      radius: 0,
      closeButtonColor: '#fff',
    };
  }
  return {
    width: 400,
    height: 500,
    offset: {
      offsetX: 0,
      offsetY: 8,
      anchorX: 'right',
      anchorY: 'bottom',
    },
    radius: 16,
    closeButtonColor: '#fff',
  };
});

5. Update Notification UI Config

ltvWebSdkInstance.setNotification(configs: NotificationConfigs | ((context: SdkContext) => NotificationConfigs));

Example

ltvWebSdkInstance.setNotification((context) => ({
  enable: true,
  width: context.window.width - 32,
  offset: {
    offsetX: 16,
    offsetY: 30,
    anchorX: 'left',
    anchorY: 'top',
  },
  orderBy: 'top-down',
  iconSize: 24,
  iconUrl: '/assets/logo.svg',
  backgroundColor: '#ebf3ff',
  borderColor: '#bfdbfe',
}));

6. Mount / Unmount SDK

// Mount sdk
ltvWebSdkInstance.mount();
// Unmount sdk
ltvWebSdkInstance.unmount();

7. Open / Close Chat

// Open chat conversation
ltvWebSdkInstance.openChat();
// Close chat conversation
ltvWebSdkInstance.closeChat();

EVENT LISTENER

Event listener

ltvWebSdkInstance.addEventListener(EVENT_NAME, (...args: Params) => any): [eventId: number];

ltvWebSdkInstance.removeEventListener(eventId: number);

Event name

| Event | Params | description | | --------------------------- | -------------------------- | ------------------------- | | BEFORE_MOUNT | [context] | | | AFTER_MOUNT | [context] | | | BEFORE_UNMOUNT | [context] | | | AFTER_UNMOUNT | [context] | | | NOTIFICATION_CHANGE | [context] | When has new notification | | OPEN_CHAT | [context] | | | CLOSE_CHAT | [context] | | | TYPING_MESSAGE | [context, message: string] | | | BEFORE_SEND_MESSAGE | [context, message: string] | | | AFTER_SEND_MESSAGE | [context, message: string] | | | BEFORE_SEND_IMAGE | [context] | | | AFTER_SEND_IMAGE | [context, { id: string }] | | | BEFORE_SEND_SUGGESTION_CHIP | [context, message: string] | | | AFTER_SEND_SUGGESTION_CHIP | [context, message: string] | |

Web Sdk Types

1. SdkContext

| Configs Field | Type | Optional | Default | Note | | -------------------- | -------------------------------- | -------- | ------- | ---- | | appConfigs | AppConfigs | Required | | | | window | { width: number, height: number} | Required | | | | notification | | Required | | | | notification.configs | NotificationConfigs | Required | | | | notification.element | HTMLElement | Optional | | | | notification.items | InAppNoti[] | Required | | | | bubble | | Required | | | | bubble.configs | BubbleConfigs | Required | | | | bubble.element | HTMLElement | Optional | | | | chat | | Required | | | | chat.configs | ChatConfigs | Required | | | | chat.element | HTMLElement | Optional | | | | button | | Required | | | | button.configs | ButtonConfigs | Required | | | | button.element | HTMLElement | Optional | | |

Type: InAppNoti

| Configs Field | Type | Optional | Note | | ------------- | ------ | -------- | ---- | | id | String | Required | | | content | String | Required | | | createdAt | String | Required | | | isRead | bool | Optional | | | isShown | bool | Optional | |

2. AppConfigs

| Configs Field | Type | Optional | Note | | -------------- | --------------------------------- | -------- | ----------------------------- | | sdkCode | String | Required | | | xApiKey | String | Required | X-API-KEY Provided from admin | | baseURL | String | Required | | | websocketURL | String | Required | | | pageId | String | Optional | | | getAccessToken | () => Promise | Required | |

Type: GetAccessTokenData

| Configs Field | Type | Optional | Note | | -------------- | ---------------- | -------- | ------------------------- | | accessToken | String | Required | | | expiredTime | String | number | Required | toISOString | timestamps | | sdkChannel | String | Required | | | webviewChannel | String | Required | |

3. BubbleConfigs

| Configs Field | Type | Optional | Default | Note | | ------------------- | ---------------- | -------- | ---------------------------- | ---- | | enable | Boolean | Optional | false | | | offset | Offset | Optional | (bottom - 32) & (right - 32) | | | size | Number | Optional | 56 | | | imageIconBackground | String | Optional | #0476f1 | | | imageIconUrl | String | Optional | <chat-icon> | | | imageIconSize | Number | String | Optional | 28 | | | imageColor | String | Optional | #ffffff | | | closeIconBackground | String | Optional | #0476f1 | | | closeIconUrl | String | Optional | <close-icon> | | | closeIconSize | Number | String | Optional | 28 | | | closeColor | String | Optional | #ffffff | |

4. ButtonConfigs

| Configs Field | Type | Optional | Default | Note | | --------------- | --------------------- | -------- | ---------------- | ---- | | enable | Boolean | Optional | false | | | element | String | HTMLElement | Optional | #ltv-chat-button | | | text | String | Optional | Support | | | radius | Number | String | Optional | 20 | | | color | String | Optional | #000000 | | | backgroundColor | String | Optional | #ffffff | | | iconUrl | String | Optional | <empty> | | | iconSize | Number | Optional | 24 | |

5. ChatConfigs

| Configs Field | Type | Optional | Default | Note | | ---------------- | --------------- | -------- | ----------------------------- | ---- | | offset | Offset | Optional | (bottom - 104) & (right - 32) | | | radius | Number | Optional | 16 | | | width | Number |String | Optional | 400 | | | height | Number |String | Optional | 500 | | | closeButtonColor | String | Optional | #fff | |

6. NotificationConfigs

| Configs Field | Type | Optional | Default | Note | | --------------- | ------------------------- | -------- | ----------------------------- | --------------------------- | | enable | Boolean | Optional | false | | | offset | Offset | Optional | (bottom - 104) & (right - 32) | | | width | Number |String | Optional | 400 | | | orderBy | 'top-down' | 'bottom-up' | Optional | bottom-up | | | msTimeout | Number |String | Optional | 10000 | Timeout to auto close popup | | iconUrl | String | Optional | <empty> | Notification icon | | iconSize | Number | Optional | 40 | | | backgroundColor | String | Optional | #ebf3ff | | | borderColor | Sting | Optional | #bfdbfe | |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

LTV-WEB-SDK

Installation

Quick Start

Usage UI builder

1. Initialize instance

2. Update Bubble UI Config

3. Update Button UI Config

4. Update Chat UI Config

5. Update Notification UI Config

6. Mount / Unmount SDK

7. Open / Close Chat

EVENT LISTENER

Event listener

Event name

Web Sdk Types

1. SdkContext

2. AppConfigs

3. BubbleConfigs

4. ButtonConfigs

5. ChatConfigs

6. NotificationConfigs