IMKit Web SDK

FUNTEK provides the chat API and SDK to be integrated with your web service and to enable real-time communications for all users.

You can explore more versions in different languages as below.

• Chinese
• Japanese

Sample

• Basic Sample
• Widget Sample

Concept

• About IMKit Web SDK
• What Is In-Web Chat?
• Component of Chat
• Chat Scenario
• How IMKit Web SDK Works?

Get Started

If you are ready to integrate chat to your service, please follow instructions step-by-step as below.

Step 1. Create a Chat Application from IMKit Dashboard

1. Visit IMKit Dashboard and create a new account.
2. Create a new application.
3. Each applicaiton has its own Chat Server URL, API Key, and Client Key.

1. Use Chat Server URL and Client Key to initialize the connection of chat server and SDK intalled in your web service.
2. Use Chat Server URL and API Key to call chat server api for more chat functions.

Step 2. Download the Web SDK

Clone Web SDK and put its static folder to target path.

git clone https://github.com/imkit/imkit-web-sdk

Step 3. Install the Web SDK

Add following code to index.html.

<!-- CSS -->
<link href="static/css/reset.css" rel="stylesheet" />
<link href="static/css/index.css" rel="stylesheet" />
<link href="static/css/app.css" rel="stylesheet" />

<!-- JS -->
<script type="text/javascript" src="static/js/manifest.js"></script>
<script type="text/javascript" src="static/js/vendor.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>

<!-- BODY -->
<div id="IMKitApp">
  <div class="loader appLoader"></div>
</div>

Step 4. Initialize the Web SDK

• Read IMKit Auth to set up auth service.

• Read CONFIG.md for more configuration settings.

• Insert Chat Server URL and Client Key from IMKit Dashboard to static/config.js.

<script>
	const config = {
		domain: "https://howard7.imkit.io",
		clientKey: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcGlLZXkiOiIySllwWWhEYVFsSVFsRFN2VkxDTExvMk1QekZmVm05allweHcydnVCcm1rPSIsImNyZWF0ZUF0IjoxNTkxOTcyNTc2NDE0LCJjbGllbnRJZCI6IjJiM2JkNWNjLTRhODYtNGE0MC1hMTU0LTE2NDA0MDE0ZGE4OCJ9.bdIWOcPfDrNuLRszgtrQDaQiow_X-WolzjDhtiLEED8",
		token: "fVy7YhqBZqEzNO9LhMmcyA=="
	}
	window.IMKitUI.init(config);
</script>

Step 5. Create a New User

let api = new IMKitApi({
  domain: config.domain,
  clientKey: config.clientKey,
  token: config.token
});
api.me
  .updateInfo({
    // user nickname
    nickname: "nickname",
    // url of user photo
    avatarUrl: "http://funtek.co/logo/logo_funtek_2020.png",
    // user description
    description: "description",
  })
  .then(function (data) {
    console.log(data);
  });

Step 6. Create a New Chat Room and Invite User

1 on 1 Chat

api.room
  .createAndJoinRoom({
    //invitee to join room
    invitee: "invitee",
    //type of 1 on 1 chat
    roomType: "direct"
  })
  .then(function (data) {
    console.log(data);
  });

Group Chat

api.room
  .createAndJoinRoom({
    // title of the room
    name: "room title",
    //url of group photo
    cover:"http://funtek.co/logo/logo_funtek_2020.png",
    // group chat description
    description: "description",
    //list of invitees to join room
    invitee: ["invitee1", "invitee2"],
    //type of 1 on 1 chat
    roomType: "group", 
  })
  .then(function (data) {
    console.log(data);
  });

Step 7. Logout

Logout user from chat server.

localStorage.removeItem('IMKit-token');

Documentation

• Customized Stickers: Add own stickers to chat SDK.
• Badge Usage: Count the unread badges.
• User and Room Management: Manage users and rooms.
• Chat Server API: Use API Key and Chat Server URL provided in IMKit Dashboard to call APIs and fulfill actual scenario.
• IMKit JavaScript API: Build own chat UI by IMKit JavaScript API.
• IMKit Dashboard: Chat server management.

Terms & Privacy

• Terms Agreement
• Privacy Policy