CSM-SDK

Client SDK for communication with CSM (Customer Service Management) https://mediainfokreasindo.com/

Installation

npm i @csm-sdk/client --save

Basic Usage

Get YOUR_CLIENT_KEY from https://mediainfokreasindo.com/

Usage with CDN include JS Cdn to your page

<script src="https://client.mediainfokreasindo.com/csm.client.min.js" ></script>
<script>
    let csm = new CSM.ClientSDK({
        clientKey: "YOUR_CLIENT_KEY"
    }); 
    csm.buildChat({
        user: null,
        config: {
            type: "floating"
        }
    }); 
</script>

Usage with ESM First you need initial ClientSDK instance

import { ClientSDK } from '@csm-sdk/client';
const csm = new ClientSDK({
  clientKey: "YOUR_CLIENT_KEY"
})
csm.buildChat({
  user: null,
  config: {
    type: "floating",
  }
})

Scenario Usage

1. Guest User Example chat for guest user

csm.buildChat({
  user: null,
  config: {
    type: "floating",
  }
})

2. Authenticate User Example chat for authenticate user

csm.buildChat({
  user: {
    accountId: '123456789', // required
    name: 'Jhon Doe', // required
    email: '[email protected]', // optional
    phone: '+12345678', // optional
    photo: 'https://jhon.doe.com/profile.png', // optional
  },
  config: {
    type: "floating",
  }
})

Style

Floating Action Button

csm.buildChat({
  user: null,
  config: {
    type: "floating",
  }
})

Element Container

csm.buildChat({
  user: null,
  config: {
    type: "container",
    containerId: "chat-container",
    containerStyle: 'width:100%;height:800px'
  }
})

Available Style Configuration

{
    type: 'floating' | 'container'
    title?: string
    logo?: string
    containerId?: string
    containerStyle?: string
    floatingButtonIcon?: string
    theme?: 'light' | 'dark' 
    themeStyle?: {
        backgroundColor?: string
        color?: string
    }
}