How to Build A Live Customer Service Chat

Live customer service chats are a great way to provide 24/7 support to your customers. They can be integrated with your website or social media pages, and they allow customers to get help quickly and easily. In this article, we will show you how to build a live customer service chat using the ZEGOCLOUD In-app Chat Kit.

How to Build A Real-time Customer Service Chat

Building a real-time customer service chat can be a daunting task, but it doesn’t have to be. With ZEGOCLOUD’s In-app Chat Kit, you can create a powerful and user-friendly chat app in minutes.

ZEGOCLOUD’s In-app Chat Kit is a comprehensive solution that includes everything you need to build a successful live chat customer service, including:

A powerful chat engine that supports real-time messaging, file sharing, and more
A user-friendly chat interface that can be customized to match your brand
A variety of features to help you manage your chat apps, such as analytics and user management

Preparation

A ZEGOCLOUD developer account – Sign up
Create a project to obtain your project’s appID and appSign
Have NodeJS installed
Basic understanding of web development

If you have met the prerequisites, you can follow these steps to start building your customer support live chat app:

Integrate the SDK

To add SDK dependencies using NPM, run the command npm i @zegocloud/zimkit-react. To enable In-app Chat functionality using the ZEGOCLOUD SDK, follow these straightforward steps:

Create an In-app Chat Kit Instance In the file where you need In-app Chat UI components, import the necessary modules for In-app Chat integration from the ZEGOCLOUD SDK. Create an instance of the In-app Chat Kit.
Initialize the SDK

Call the init method on the In-app Chat Kit instance to initialize the SDK and prepare it for usage.

User Authentication and Login Utilize the connectUser method, providing your user information and a token. This process ensures that only authenticated users can log in to the chat. Implement custom rules to generate the userID and username, ensuring they are meaningful and relevant to your business account system.

To display the In-app Chat Kit components, import the Common module in the file that needs to use In-app Chat Kit components.

// Import the necessary modules and CSS for integrating the ZEGOCLOUD SDK
import { ZIMKitManager, Common } from '@zegocloud/zimkit-react';
import '@zegocloud/zimkit-react/index.css';

// This example uses the App instance to demonstrate integration.
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            appConfig: {
                appID: 0,        // Replace with the AppID you get from the ZEGOCLOUD admin console.
                serverSecret: '' // Replace with the serverSecret you get from ZEGOCLOUD Admin Console.
            },
            userInfo: {
                // Your ID as a user (1 to 32 characters). Only digits, letters, and specific special characters are supported.
                userID: '',
                // Your name as a user.
                userName: '',
                // Ensure that the user avatar image you set is accessible via a network link, such as "https://storage.zego.im/IMKit/avatar/avatar-0.png."

                userAvatarUrl: ''
            },
        }
    }

    async componentDidMount() {
        const zimKit = new ZIMKitManager();
        const token = zimKit.generateKitTokenForTest(this.state.appConfig.appID, this.state.appConfig.serverSecret, this.state.userInfo.userID);
        await zimKit.init(this.state.appConfig.appID);
        await zimKit.connectUser(this.state.userInfo, token);
    }

    render() {
        return (
            <Common></Common> 
        );
    }
}

Start a one-on-one chat for chat customer service

Make sure that the other user has logged in to the In-app Chat UIKit before starting a chat. Use your unique business logic to get the userID, then run the provided code snippet.

createChat(userID: string) {
    ZIMKitChatListVM.getInstance().initWithConversationID(userID, ZIMKitConversationType.ZIMKitConversationTypePeer);
}

Start a group chat for customer chat service

Use your own business logic to get the userIDList and groupName. The userIDList contains the user IDs of the people you want to invite to the group chat. Once you have them, fill in the appropriate parameters and run the provided code snippet to continue.

// Function to create a group chat with the given group name and list of user IDs.
createGroupChat(groupName: string, userIDList: string[]) {
    ZIMKitManager.getInstance()
        .createGroup(groupName, userIDList)
        .then((data) => {
            const { groupInfo, errorUserList } = data;
            const { baseInfo } = groupInfo;

            if (errorUserList.length) {
                // Handle the case when there are non-existing user IDs in the group.
                // Implement the appropriate logic for displaying a prompt window or notifying users.
            } else {
                // Proceed to the chat page when the group chat is created successfully.
                const groupID = baseInfo.groupID;
                ZIMKitChatListVM.getInstance().initWithConversationID(groupID, ZIMKitConversationType.ZIMKitConversationTypeGroup);
            }
        })
        .catch((error) => {
            // Handle the case when there is an error while creating the group chat.
            // Implement the appropriate logic for displaying a prompt window or notifying users about the failure.
        });
}

Join a group chat

Identify the group ID using your own business logic. The groupID is a unique identifier for the group chat you want to join. Once you have the group ID, enter it into the provided parameter and run the code snippet.

joinGroupChat(groupID: string) {
    ZIMKitManager.getInstance()
        .joinGroup(groupID)
        .then((data) => {
            const groupID = data.groupInfo.baseInfo.groupID;
            ZIMKitChatListVM.getInstance().initWithConversationID(groupID, ZIMKitConversationType.ZIMKitConversationTypeGroup);
        });
}

ZEGOCLOUD In-app Chat Kit for customer support live chat provides custom components for conversation lists and messages for further customization. Below is more detailed information on these two components:

Conversation list component: This component displays a list of all conversations in the chat app. You can customize the appearance of the conversation list by changing the font, color, and size of the text, as well as the layout of the list.

import React from 'react';

// Integrate the SDK
import { ConversationList } from '@zegocloud/zimkit-react';
import '@zegocloud/zimkit-react/index.css';

class App extends React.Component {
  render() {
    return (
        <ConversationList></ConversationList>
    );
  }
}

Message component: This component displays a single message in the chat app. You can customize the appearance of the message by changing the font, color, and size of the text, as well as the background color of the message.

import React from 'react';

// Import the necessary components and CSS for integrating the ZEGOCLOUD SDK.
import { Chat, ZIMKitChatListVM, ZIMKitConversationType } from '@zegocloud/zimkit-react';
import '@zegocloud/zimkit-react/index.css';

// The following uses the App instance as an example.
class App extends React.Component {
    componentDidMount() {
        // Display the 1-on-1 chat data.
        this.showPeerChat();
        // Display the group chat data.
        this.showGroupChat();
    }

    // Function to display the 1-on-1 chat.
    showPeerChat() {
        const conversationID = ''; // Replace with the ID of an existing 1-on-1 chat, also the User ID of the user who has logged into the In-app Chat Kit.
        // Call the `initWithConversationID` method to initiate a new chat with the specified conversation ID and type as 'ZIMKitConversationTypePeer'.
        ZIMKitChatListVM.getInstance().initWithConversationID(conversationID, ZIMKitConversationType.ZIMKitConversationTypePeer);
    }

    // Function to display the group chat.
    showGroupChat() {
        const conversationID = ''; // Replace with the ID of an existing group chat.
        // Call the `initWithConversationID` method to initiate a new chat with the specified conversation ID and type as 'ZIMKitConversationTypeGroup'.
        ZIMKitChatListVM.getInstance().initWithConversationID(conversationID, ZIMKitConversationType.ZIMKitConversationTypeGroup);
    }

    render() {
        return (
            <div id="main">
                <Chat></Chat>
            </div>
        );
    }
}

Run a Demo

You can download the ZEGOCLOUD In-app Chat Kit demo app source code to learn more.

Conclusion

Building a live customer service chat is a great way to improve customer satisfaction and provide real-time support to users. With the right tools and resources, developers can easily create a chat app that meets the needs of their customers. Many options include pre-built chat technology and SDKs like ZEGOCLOUD’s In-app Chat Kit.

Moreover, ZEGOCLOU comes with a 100% customized app chat API to build world-class in-app messaging experiences in your mobile and web apps. With its customer service chat SDK & API, you can provide excellent customer support and improve overall customer experience.