In-App Chatting UIKit
Tags: javascript, react, webdev, programming
Published: 2022-12-29 06:56:01


We often use Chatting feature in our Applications, & to build that feature we required some logic, and a lot coding. What if i tell you that you can create a chatting feature with simple integration and small chunk of code. Here is [ZEGOCLOUD](https://www.zegocloud.com/) which have many features and In-App Chatting is one of them.

## Introduction
ZEGOCLOUD is a platform which you can use to integrate multiple feature like Live Audio/Video calling, Live Streaming, In-App chatting  and much more in your App/Web Application & the best part they have custom code integrations as well as UI Kits integration.

## Custom Integration
They offer Libraries for different stacks like 
IOS (Flutter, React Native IOS Native)
Android (Flutter, React Native, Android Native)
Web (JavaScript) (React.JS, Vue.JS, etc).

## UI Kits
They offer some pre-design UI kits which just need a little configuration and a chunk of code and you feature will be ready to test and deploy.

Feature
VIDEO Calling Documentation : [Video Calling](https://docs.zegocloud.com/article/5542)

Live Streaming Documentation : [Live Streaming](https://docs.zegocloud.com/article/7927)

In-App Chatting Documentation : [In-App Chatting](https://docs.zegocloud.com/article/13919)

You can find different tech stack in each documentation for each feature.

Here for my In-App Chatting feature i am using UI Kit to integrate the feature.

Introduction of In-App Chatting SDK

As experience developer and build many chatting features, I love to use ZEGOCLOUD for many feature from now on. Here are some point to use In-App Chatting SDK

1. The SDK provide smooth communication and transmission for messaging even when network is poor.
2. The **priority** feature is really useful when you want to never miss any message from any user.
3. 

## Integration
1. `npm i @zegocloud/zimkit-react`

2. Import ZIMKitManager, Common from zimkit-react

3. Define state for some configuration and add AppID, serverSecret along with some user details like userID, userName & avatar.

4. Get AppId and serverSecret from dashboard

![AppID and serverSecret](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj29fvjkunds9w4alb4r.png)

4. Define `<Common><Common/>` in return statement for UI

5. Create a useEffect, which will run only once when first time render happen.

6. Create a function to configure UI kit with parameter we define in component state

![load UI kit method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkq8inyescix6f3i15mp.png)

create a instance of **ZIMKitManager** then call generateKitTokenForTest to generate token 

call **init** function to inject the UI Kit 
then call **connection** function which will create a connection for Chatting.

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqntihae06e9q6pp30jq.png)

```
import React, { useEffect } from 'react';
import { ZIMKitManager, Common } from '@zegocloud/zimkit-react';
import '@zegocloud/zimkit-react/index.css';

function ZEGOCLOUDUIKIET(props) {
    const state = {
        appConfig: {
            appID:***********,        // The AppID you get from the ZEGOCLOUD admin console.
            serverSecret: '****************************' // The serverSecret you get from ZEGOCLOUD Admin Console.
        },
        // The userID and userName is a strings of 1 to 32 characters.
        // Only digits, letters, and the following special characters are supported: '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '=', '-', '`', ';', '’', ',', '.', '<', '>', '/', '\'
        userInfo: {
            // Your ID as a user.
            userID: '12345',
            // Your name as a user.
            userName: 'Zain Ahmed',
            // The image you set as a user avatar must be network images. e.g., https://storage.zego.im/IMKit/avatar/avatar-0.png
            userAvatarUrl: 'https://storage.zego.im/IMKit/avatar/avatar-0.png'
        },
    }
    useEffect(() => {
        loadUIKIT()
    }, [])
    const loadUIKIT = async () => {
        const zimKit = new ZIMKitManager();
        const token = zimKit.generateKitTokenForTest(state.appConfig.appID, state.appConfig.serverSecret, state.userInfo.userID);
        await zimKit.init(state.appConfig.appID);
        await zimKit.connectUser(state.userInfo, token);
    }

    return (
        <div>
            <Common></Common>
        </div>
    );
}

export default ZEGOCLOUDUIKIET;
```

### Application UIKit
![Chatting app UIKit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug318q810xd7vs3arf0c.png)

Checkout In-App Chatting UI Kit Documentation [In App Chatting kit](https://docs.zegocloud.com/article/14665)

Follow for more content [Find me here](https://linktr.ee/zaahmed?fbclid=PAAab2H3ZN7kLlwTfmWMOEBcjLCyGdCooDqwGjJ0WCvBlk77l6WIr38rWmbFs)