@trustingsocial/ltv-web-sdk

LTV-WEB-SDK

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

Installation

1. Install ltv-web-sdk using yarn

   yarn add @trustingsocial/ltv-web-sdk

   or npm

   npm i @trustingsocial/ltv-web-sdk

2. Import to project

   Using HTML

   <script src="https://unpkg.com/@trustingsocial/ltv-web-sdk@0.0.17/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);

or

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]
AFTER_SEND_MESSAGE	[context]

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