DEV Community

Zain Ahmed
Zain Ahmed

Posted on

Build In-App chatting feature with ZEGOCLOUD

Customer service is one of the main key factor in any business and when it's comes to e-commerce business its really help to any owner to grow their business in online market, Most of the times users/costumers have different querier which they want to ask before visit any physical shop like, queries about products and shop locations, quires about order update.
let assume you order some products and the order is dispatch its been 5 to 7 days and the parcel didn't reach at your place. in that case you need to find the email address of that store then email them then wait for their response, isn't it kind of hectic, In-App feature can reduce and minimize that cycle and you can just ask any queries from their In-App chatting feature,
The In-App chatting feature not just help only in e-commerce but also in different fields like, medical, gaming, live youtube streaming etc.

When you developing any app or web feature the In-App feature can be some critical to implement as you need to create it from custom or need to use some third party library. In custom option, the feature can be take up to 15 to 20 days to develop and make it in working model. But for third party library you can just plug any play, but most of the times to use third party it become difficult to choose the best one, which can provide you all you necessary feature in one model.

What if i tell you a library/platform that can be really useful for In-App feature, in-fact not just for In-App feature but also it have more features like, Live Streaming, Video/Audio calling, Cloud recording, Super board and etc.

ZEGOCLOUD is a platform that provide varieties of features/options that are required my today's modern web/app(s). They provide best quality in terms of video calling, connectivity, Massive concurrency and much more.

ZEGOCLOUD In-App chatting feature have cool features like
Room module , Group module, Message priority, Push system notifications, Offline messages, Offline notifications and etc.

Some of the use cases where you can user ZEGOCLOUD as your In-App patner

Online shopping Build real-time purchasing-related communications with text, images, order information, and more.

Social interactions When you're planning a live-streaming event, it's important to make sure your audience can interact with you. You might want them to ask questions or get involved in the conversation--and doing so can be just as fun for you as it is for them.

Most of the time influencers use their chatting feature when they do Youtube Live events. You can create a Live chatting feature in your apps by using ZEGOCLOUD In-App feature.

Online education Online education apps are the future of education. When you develop an online education app, the in-app chatting feature of ZEGOCLOUD can create a big impact on your users' experience and grow your user base! Students can ask questions while learning, and get answers from mentors.

Online consulting If you're in the medical field, you know how important it is to be available for patients.

In-App features are a great way to make sure that you're always there for your patients. You can use these features to be a first aid for any patient and save millions of lives!

Online games Online gaming has become one of the biggest markets in today's world, with millions of people playing games together through live streaming platforms. In-app chatting is a feature that allows you to interact with your favorite gamer on any platform.

ZEGOCOLOUD Compatibility with almost every platform
Android
IOS
Windows
MacOS
Web
Flutter
React Native

Add permissions
Permissions can be set as needed.

Open the AndroidManifest.xml file from directory app/src/main, and add permissions:

<!-- Permissions required by the SDK -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Enter fullscreen mode Exit fullscreen mode

Prevent class name obfuscation
You can prevent the ZEGO SDK public class names from being obfuscated by adding the following code in file proguard-rules.pro

-keep class **.zego.**{*;}
Enter fullscreen mode Exit fullscreen mode

Import the class file
Import the class file to your project:

import im.zego.zim.ZIM
Enter fullscreen mode Exit fullscreen mode

Create instance of ZEGOCLOUD. Suppose you have 2 users A and B, they both need to create instance and call a method with app id and appsign id
developer can get both ids from project dashboard and add them in code.

// Create a ZIM SDK object and pass the AppID, AppSign, and Application in Android.
ZIMAppConfig appConfig = new ZIMAppConfig();
appConfig.appID = 12345;
appConfig.appSign = "appSign";
zim = ZIM.create(appConfig, application);
Enter fullscreen mode Exit fullscreen mode

add listener to listen messages from other connected client or if any error occur.

zim.setEventHandler(new ZIMEventHandler() {
    @Override
    public void onReceivePeerMessage(ZIM zim, ArrayList<ZIMMessage> messageList, String fromUserID) {
        // Implement the callback for receiving the one-to-one messages.
    }
});
Enter fullscreen mode Exit fullscreen mode
// userID must be within 32 bytes, and can only contain letters, numbers, and the following special characters: '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '=', '-', '`', ';', '’', ',', '.', '<', '>', '/', '\'.
// userName must be within 64 bytes, no special characters limited.
ZIMUserInfo zimUserInfo = new ZIMUserInfo();
zimUserInfo.userID = userID;
zimUserInfo.userName = userName;

// When logging in:
// If you are using the Token-based authentication mode, you will need to fill in the Token which you generated by referring to the [Authentication] doc.
// If you are using the AppSign mode for authentication (the default auth mode for v2.3.0 or later), leave the Token parameter blank.

zim.login(zimUserInfo, new ZIMLoggedInCallback() {
    @Override
    public void onLoggedIn(ZIMError error) {
          // You can know whether the login is successful according to the ZIMError.
    }
 });
Enter fullscreen mode Exit fullscreen mode

To send one to one message

// The following shows how to send one-to-one message, the [conversationType] needs to be set to [ZIMConversationTypePeer].
String conversationID = "xxxx";

ZIMTextMessage zimMessage = new ZIMTextMessage();
zimMessage.message = "Message content";

ZIMMessageSendConfig config = new ZIMMessageSendConfig();
// Set priority for the message. 1: Low (by default). 2: Medium. 3: High.
config.priority = ZIMMessagePriority.LOW;
// Set the offline push notificaition config.
ZIMPushConfig pushConfig = new ZIMPushConfig();
pushConfig.title = "Title of the offline push";
pushConfig.content= "Content of the offline push";
pushConfig.extendedData = "Extended info of the offline push";
config.pushConfig = pushConfig;

// In 1-on-1 chats, the conversationID is the peer user ID. In group chats, the conversationID is the groupID. In the chat room, the conversationID is the roomID.
zim.sendMessage(zimMessage, conversationID, ZIMConversationType.Peer,config, new ZIMMessageSentCallback() {
    @Override
    public void onMessageAttached(ZIMMessage zimMessage){
         // The callback on the message not sent yet. You can get a temporary object here and this object must be the same as that created zimMessage object. You can make your own business logic using this as needed, for example, display a UI ahead of time.
    }
    @Override
    public void onMessageSent(ZIMMessage zimMessage, ZIMError error) {
        // Implement the event callback on message sent.
    }
});
Enter fullscreen mode Exit fullscreen mode

to receive one to one message

zim.setEventHandler(new ZIMEventHandler() {
    @Override
    public void onReceivePeerMessage(ZIM zim, ArrayList<ZIMMessage> messageList, String fromUserID) {

      for (ZIMMessage zimMessage : messageList) {
          if (zimMessage instanceof ZIMTextMessage)
          {
            ZIMTextMessage zimTextMessage = (ZIMTextMessage) zimMessage;
            Log.e(TAG, "Received message:"+ zimTextMessage.message);
          }
      }
   }
});
Enter fullscreen mode Exit fullscreen mode

for logout

zim.logout();
Enter fullscreen mode Exit fullscreen mode

For destroy instance

zim.destroy();
Enter fullscreen mode Exit fullscreen mode

You can find a working documentation here

You can find sample app here

Top comments (7)

Collapse
 
tanasha89036712 profile image
Ashok Shakya

Hi, zego cloud works great. I am using zego for Live streaming and now my client wants to be able to enable/disable chats from host side (enable on a button click). is this possible?

Collapse
 
zainbinfurqan profile image
Zain Ahmed

You can handle it with 2 different logics. 1. You can create custom logic like a flag variable and send it to every attends then you can hide/show chat on that flag,

  1. I am not sure but i read about this flag whey provide on live streaming, i will check and get back to you on this.
Collapse
 
tanasha89036712 profile image
Ashok Shakya

ohh, that was fast. thank you for the reply. I can create a custom flag fot it, yes, but i dont know where to pass it to, so that it hides/shows the chat icon

Thread Thread
 
zainbinfurqan profile image
Zain Ahmed

You must save config of any room created in DB, so the flag should also be on that config. or you can create a separate listener to catch realtime configurations of particular room

Thread Thread
 
tanasha89036712 profile image
Ashok Shakya

i can do that, no issues there. Right now what I am concerned with is how to hide that chat icon

Thread Thread
 
tanasha89036712 profile image
Ashok Shakya

I found the way, thanks anyway

Thread Thread
 
zainbinfurqan profile image
Zain Ahmed

Awesome