KingsChat Web SDK

https://github.com/kingschat/kingschat-web-sdk

Stack

• Babel - Write next generation JavaScript today.
• Jest - JavaScript testing framework used by Facebook.
• ESLint - Make sure you are writing a quality code.
• Prettier - Enforces a consistent style by parsing your code and re-printing it.
• TypeScript - Typed superset of JavaScript that compiles to plain JavaScript.
• Travis CI - Automate tests and linting for every push or pull request.

Table of Contents

• Installation
• Api
  • login
    • loginOptions interface
    • authenticationTokenResponse interface
  • refreshAuthenticationToken
    • refreshAuthenticationTokenOptions interface
    • authenticationTokenResponse interface
  • sendMessage
    • sendMessageOptions interface
• Styles
• Usage
  • Webpack
  • Vue.js
  • React
  • SASS / SCSS
• License

Instalation

NPM

Install our node module using npm

npm install --save-dev kingschat-web-sdk

Yarn

yarn add kingschat-web-sdk --dev

API

import kingsChatWebSdk from 'kingschat-web-sdk';

login

Use this function to get KingsChat's authenticate code, that you will need for any KingsChat request. You have to pass login options.

After user will login and allow a permissions, Promise will resolve with authenticationTokenResponse payload. Make sure to store these tokens in your application for later use.

You will get your clientId on KingsChat's Developer Site

kingsChatWebSdk.login(loginOptions);

loginOptions Interface:

interface loginOptionsI {
  // Scopes is an Array of scopes you want access
  scopes: string; // ex. ["send_chat_message"]
  // Your clientId generated on KingsChat's Developer Site
  clientId: string; // ex. 'a1234567-abcd-1234-abcd-12345abc1234'
}

authenticationTokenResponse Interface:

interface authenticationTokenResponseI {
  // Access Token used for every KingsChat Request
  accessToken: string;
  // time in milliseconds until token expires
  expiresInMillis: number;
  // Refresh Token is used for refreshing Access Token
  refreshToken: string;
}

refreshAuthenticationToken

Use this function to refresh / get KingsChat's authenticate code again. You have to pass refreshAuthenticationTokenOptions.

Promise will resolve with authenticationTokenResponse payload. Make sure to store these tokens in your application for later use.

kingsChatWebSdk.refreshAuthenticationToken(refreshAuthenticationTokenOptions);

refreshAuthenticationTokenOptions Interface:

interface refreshAuthenticationTokenOptionsI {
  // Your clientId generated on KingsChat's Developer Site
  clientId: string; // ex. 'a1234567-abcd-1234-abcd-12345abc1234'
  // Refresh token you got from login function
  refreshToken: string;
}

sendMessage

Use this function to send text message to KingsChat user as user you logged on with login function You have to pass sendMessageOptions.

Promise will resolve without payload after message being sent.

kingsChatWebSdk.sendMessage(sendMessageOptions);

sendMessageOptions Interface:

interface sendMessageOptionsI {
  message: string; // Message you want to send to KingsChat user
  userIdentifier: string; // You have to know KingsChat userId 
  accessToken: string; // You got that from login / refresh function
}

Styles

Import styles.min.css in your project.

If you installed package then our styles are located in kingschat-web-sdk/dist/stylesheets/style.min.css

Alternatively you can add latest stylesheet link into html head:

<link
  rel="stylesheet"
  href="https://unpkg.com/kingschat-web-sdk/dist/stylesheets/style.min.css"
/>

or specific version of it:

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/stylesheets/style.min.css"
/>

then add some a element with one of the classes:

• kc-web-sdk-btn - for normal button
• kc-web-sdk-btn-m - for medium size button
• kc-web-sdk-btn-s - for small size button

<a class="kc-web-sdk-btn"></a>
<a class="kc-web-sdk-btn-m"></a>
<a class="kc-web-sdk-btn-s"></a>

Usage

Webpack

inside main.js / main.ts

import 'kingschat-web-sdk/dist/stylesheets/style.min.css';

inside any HTML template

<a class="kc-web-sdk-btn"></a>

Vue.js

inside any component or App.vue

<template>
  <a class="kc-web-sdk-btn" @click="loginWithKingsChat"></a>
</template>

<script>
import kingsChatWebSdk from 'kingschat-web-sdk';

export default {
  methods: {
    loginWithKingsChat() {
      kingsChatWebSdk.login(loginOptions)
      .then(authenticationTokenResponse => ...)
      .catch(error => ...);
    },
    refreshKingsChatAuthenticationToken() {
      kingsChatWebSdk.refreshAuthenticationToken(refreshAuthenticationTokenOptions)
      .then(authenticationTokenResponse => ...)
      .catch(error => ...);
    },
    sendKingsChatMessageRequest() {
      kingsChatWebSdk.sendMessage(sendMessageOptions)
      .then(() => ...)
      .catch(error => ...);
    }
  },
};
</script>

<style src="kingschat-web-sdk/dist/stylesheets/style.min.css"></style>

or

<template>
  <a class="kc-web-sdk-btn" @click="loginWithKingsChat"></a>
</template>
<script>
import kingsChatWebSdk from 'kingschat-web-sdk';
import 'kingschat-web-sdk/dist/stylesheets/style.min.css';

export default {
  methods: {
    loginWithKingsChat() {
      kingsChatWebSdk.login(loginOptions)
      .then(authenticationTokenResponse => ...)
      .catch(error => ...);
    },
    refreshKingsChatAuthenticationToken() {
      kingsChatWebSdk.refreshAuthenticationToken(refreshAuthenticationTokenOptions)
      .then(authenticationTokenResponse => ...)
      .catch(error => ...);
    },
    sendKingsChatMessageRequest() {
      kingsChatWebSdk.sendMessage(sendMessageOptions)
      .then(() => ...)
      .catch(error => ...);
    }
  },
};
</script>

React

inside any React component

import kingsChatWebSdk from 'kingschat-web-sdk';
import 'kingschat-web-sdk/dist/stylesheets/style.min.css';

function loginWithKingsChat() {
  kingsChatWebSdk.login(loginOptions)
  .then(authenticationTokenResponse => ...)
  .catch(error => ...);
}
function refreshKingsChatAuthenticationToken() {
  kingsChatWebSdk.refreshAuthenticationToken(refreshAuthenticationTokenOptions)
  .then(authenticationTokenResponse => ...)
  .catch(error => ...);
}
function sendKingsChatMessageRequest() {
  kingsChatWebSdk.sendMessage(sendMessageOptions)
  .then(() => ...)
  .catch(error => ...);
}

export function KingsChatButton() {
  return <a className="kc-web-sdk-btn" onClick={loginWithKingsChat} />;
}

Angular

inside any Angular component

import { Component } from '@angular/core';
import kingsChatWebSdk from 'kingschat-web-sdk';
import 'kingschat-web-sdk/dist/stylesheets/style.min.css';

@Component({
  template: `
    <a class="kc-web-sdk-btn" (click)="loginWithKingsChat()"></a>
  `,
})
export class customComponent {
  loginWithKingsChat() {
    kingsChatWebSdk.login(loginOptions)
    .then(authenticationTokenResponse => ...)
    .catch(error => ...);
  }
  refreshKingsChatAuthenticationToken() {
    kingsChatWebSdk.refreshAuthenticationToken(refreshAuthenticationTokenOptions)
    .then(authenticationTokenResponse => ...)
    .catch(error => ...);
  }
  sendKingsChatMessageRequest() {
    kingsChatWebSdk.sendMessage(sendMessageOptions)
    .then(() => ...)
    .catch(error => ...);
  }
}

SASS / SCSS

@import '~kingschat-web-sdk/dist/stylesheets/style.min.css';

License

ISC © KingsChat