In-App Chatting UIKit

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

Live Streaming Documentation : Live Streaming

In-App Chatting Documentation : In-App Chatting

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.

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

1. Define <Common><Common/> in return statement for UI

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

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

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.

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

Checkout In-App Chatting UI Kit Documentation In App Chatting kit

Follow for more content Find me here