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/ltv-web-sdk@0.0.6/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({
  xApiKey: '...',
  baseURL: '...',
  websocketURL: '...',
  userId: '...',
  pageId: '...'
});

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

// Using Bubble template
ltvWebSdkInstance.renderBubbleTemplate({
   imageIconUrl: '/assets/logo.svg',
});
// Or Using Button Template
ltvWebSdkInstance.renderButtonTemplate({
   element: '.ltv-button',
   iconUrl: '/assets/logo.svg',
   text: 'Trợ giúp',
});

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

// 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: InitSdkConfigs);

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

Type: InitSdkConfigs

Configs Field	Type	Optional	Note
xApiKey	String	Required	X-API-KEY Provided from admin
baseURL	String	Required
websocketURL	String	Required
userId	String	Optional	Set empty if use anonymous user
pageId	String	Optional

Example

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

const ltvWebSdkInstance = LtvWebSdk.init({
  xApiKey: config.xApiKey,
  baseURL: config.baseURL,
  websocketURL: config.websocketURL,
  userId: "user-id",
  pageId: "page-id"
});

2. Add Bubble Icon

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

Type: BubbleConfigs

Configs Field	Type	Optional	Default
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

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. Add Button Icon

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

Type: ButtonConfigs

Configs Field	Type	Optional	Default
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

Example

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

4. Render Chat Position

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

Type: ChatConfigs

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

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

// 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,
    };
  }
  return {
    width: 400,
    height: 500,
    offset: {
      offsetX: 0,
      offsetY: 8,
      anchorX: 'right',
      anchorY: 'bottom',
      targetX: {
        element: context.bubble.element!,
        anchor: 'right',
      },
      targetY: {
        element: context.bubble.element!,
        anchor: 'top',
      },
    },
    radius: 16,
  };
});

5. Render Notification position

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

Type: 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

Example

ltvWebSdkInstance.setNotification((context) => ({
  enable: true,
  width: context.window.width - 32,
  offset: {
    offsetX: 16,
    offsetY: 30,
    anchorX: 'left',
    anchorY: 'top',
    targetY: {
      element: context.button.element!,
      anchor: 'bottom',
    },
  },
  orderBy: 'top-down',
  iconSize: 24,
  iconUrl: '/assets/logo.svg',
}));

6. Render Template Bubble

Quick render UI as Bubble template

ltvWebSdkInstance.renderBubbleTemplate(configs: RenderBubbleTemplateConfigs);

Type: RenderBubbleTemplateConfigs

Configs Field	Type	Optional	Note
imageIconBackground	String	Optional	Bubble background
imageColor	String	Optional	Bubble image color
imageIconUrl	String	Optional	Bubble image
imageIconSize	Number \|String	Optional	Bubble image size
closeIconBackground	String	Optional	Bubble close background
closeColor	String	Optional	Bubble close image color
closeIconUrl	String	Optional	Bubble close image
closeIconSize	Number \|String	Optional	Bubble close image size
notificationIconUrl	String	Optional	Notification icon
notificationIconSize	Number	Optional	Notification icon size

Example

ltvWebSdkInstance.renderBubbleTemplate({
  imageIconUrl: '/assets/logo.svg',
  notificationIconUrl: '/assets/logo.svg',
});

// You can custom bubble / chat / notification
ltvWebSdkInstance.renderBubbleTemplate({
  imageIconUrl: '/assets/logo.svg',
  notificationIconUrl: '/assets/logo.svg',
})
ltvWebSdkInstance.setChat((context) => {
  if (context.window.width <= 667) {
    return {};
  }
  return {
    height: Math.min(500, context.window.height - 220),
  };
})
ltvWebSdkInstance.setBubble((context) => ({
  offset: {
    offsetX: context.window.width <= 667 ? 16 : 32,
    offsetY: (context.window.width <= 667 ? 16 : 32) + 100,
    anchorX: 'right',
    anchorY: 'bottom',
  },
}));

7. Render Template Button

Quick render UI as Button template

ltvWebSdkInstance.renderButtonTemplate(configs: RenderButtonTemplateConfigs);

Type: RenderButtonTemplateConfigs

Configs Field	Type	Optional
element	String \| HTMLElement	Required
text	String	Required
radius	Number \|String	Optional
color	String	Optional
backgroundColor	String	Optional
iconUrl	String	Optional
iconSize	Number	Optional
notificationIconUrl	String	Optional
notificationIconSize	Number	Optional

Example

ltvWebSdkInstance.renderButtonTemplate({
  element: '.ltv-button',
  iconUrl: '/assets/logo.svg',
  text: 'Trợ giúp',
  notificationIconUrl: '/assets/logo.svg',
});

// You can custom bubble / chat / notification
ltvWebSdkInstance.renderButtonTemplate({
  element: '.ltv-button',
  iconUrl: '/assets/logo.svg',
  text: 'Trợ giúp',
  notificationIconUrl: '/assets/logo.svg',
})
ltvWebSdkInstance.setChat((context) => {
  if (context.window.width <= 667) {
    return {};
  }
  return {
    height: Math.min(500, context.window.height - 220),
  };
});

8. Mount / Unmount Component

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

Events

1. Send visit page event

This event produced after user have visited at this page

ltvWebSdkInstance.sendVisitPageEvent(pageId: string);

2. sendAnonymousLoginEvent

Meaning anonymous user have logged in successfully

ltvWebSdkInstance.sendAnonymousLoginEvent(userId: string);

3. sendLoginSuccessEvent

Customer (Bank’s user) have logged in successfully to Alice system

ltvWebSdkInstance.sendLoginSuccessEvent();

4. sendErrorEvent

Customer encounters an error

ltvWebSdkInstance.sendErrorEvent();

5. sendLoggedInSessionExpiredEvent

Customer has logged out or the session has expired

ltvWebSdkInstance.sendLoggedInSessionExpiredEvent();

@trustingsocial/ltv-web-sdk

LTV-WEB-SDK

Installation

Quick Start

Usage UI builder

1. Initialize instance

2. Add Bubble Icon

3. Add Button Icon

4. Render Chat Position

5. Render Notification position

6. Render Template Bubble

7. Render Template Button

8. Mount / Unmount Component

Events

1. Send visit page event

2. sendAnonymousLoginEvent

3. sendLoginSuccessEvent

4. sendErrorEvent

5. sendLoggedInSessionExpiredEvent

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@trustingsocial/ltv-web-sdk

LTV-WEB-SDK

Installation

Quick Start

Usage UI builder

1. Initialize instance

2. Add Bubble Icon

3. Add Button Icon

4. Render Chat Position

5. Render Notification position

6. Render Template Bubble

7. Render Template Button

8. Mount / Unmount Component

Events

1. Send visit page event

2. sendAnonymousLoginEvent

3. sendLoginSuccessEvent

4. sendErrorEvent

5. sendLoggedInSessionExpiredEvent

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads