How to Enable User Presence in Chat Platform?

Vigneshwar Published On March 22nd, 2024 Tech Talks

This article will walk you through the different types of online presence indicators in modern chat apps. And how you can easily add them to your chat platform to boost user engagement and retention.

User presence is growing in high demand these days, especially knowing the benefits they pose to personnel. Be it quickly organize a meeting or checking out whether the person has gone for lunch, these indicators help others to know their availability. And, for sure adding features like status and presence indicators can boost in-app conversations.

So, before going ahead with the blog post, let us see the prime topic,

The Core Idea of this Article is to Help Developers in:

• Understanding the basics of Online Chat Presence Indicators
• Types of Presence indicators
• Step-by-step implementation of status indicators across Android, iOS, and web apps

While this might sound like a complex implementation, I bring you the good news which is you can integrate these real-time status indicators within a matter of just a few minutes by using our in app chat SDK.

What is an Online User Presence Indicator?

Online Presence Indicator is an instant messaging app feature that displays the availability and active status of other users in the form of animated icons and texts within a chat window. 

With these indicators, you will be able to know:

1. whether a user is active on a chat app or not
2. the last time when the user was active on the app
3. when a user is typing a message

Next If you’d ask me what you’ll get out of this in app chat service integration, gear up! Here are the core benefits:

• Give users the feel of life-like, in-person interactions
• Increase the engagement rate by letting users know they got their peers active to chat with them.
• Retains users with active conversational elements

Now that you have understood the importance of user presence in any chat platform, shall we get started with the integration process?

Let’s get started with the integration process.

Step-by-Step Implementation of Online Presence Indicators

To implement Online Presence Indicators, we will use MirrorFly SDK to integrate the status indicators across Android, iOS, and Web apps. 

Note: In this construct, I’ve used Java for Android apps, Swift for iOS, and Javascript for Web apps, Flutter and React Native for multi-platform deployment.

Here’s how you will build the presence indicators:

1. Download the SDK dependency files
2. Import them into your chat app library
3. Configure the SDK license into your app/build.gradle
4. Proceed with the addition of the presence indicator elements as instructed below

 

Level Up Your Interactions with Our Futuristic All-in-One Chat SDK

Try Our SDK

Add Virtual Chat Presence Indicators

Typing Status 

The below method will be used to indicate the status when other parties in a conversation are typing a message to the user in a chat window.

ChatManager.sendTypingStatus(TO_JID, CHAT_TYPE)

Similarly when the other user has stopped or completed composing a message in the message input pane of the chat window, you need to call the below method to hide the typing status.

ChatManager.sendTypingGoneStatus(TO_JID, CHAT_TYP

Observation of the Typing Status

When the typing status changes, you need to set up the listener for the typing events. To execute this, you need to call the below method:

ChatManager.setTypingStatusListener(new TypingStatusListener() {
            @Override
            public void onChatTypingStatus(@NotNull String fromUserJid, @NotNull TypingStatus status) {
                
            }

            @Override
            public void onGroupTypingStatus(@NotNull String groupJid, @NotNull String groupUserJid, @NotNull TypingStatus status) {

            }
        });

Once the SDK sets the listener, it will trigger the callbacks based on the chat type as mentioned below:

Single chat

The below callback will be triggered to sending and receiving one-to-one message in Flutter.

Send one-to-one message

var userJid = await Mirrorfly.getJid(username);

Mirrorfly.sendTextMessage(message, jid).then((value) {
  // you will get the message sent success response
  var chatMessage = sendMessageModelFromJson(value);
});

Receive one-to-one message

Mirrorfly.onMessageReceived.listen(result){
  // you will get the new messages
  var chatMessage = sendMessageModelFromJson(result)
}

Group Chat

The below callback will be triggered for Group Chat 

 @Override
 public void onGroupTypingStatus(@NotNull String groupJid, @NotNull String groupUserJid, @NotNull TypingStatus status) {

 }

Last Seen Time 

To get the last seen time of the chat user, you need to call the below method:

ContactManager.getUserLastSeenTime(JID , LISTENER );

Check Last Seen Hidden Status

To check if the last seen time of a chat user is available or not, you need to call the below method:

boolean lastSeenStatus = FlyCore.isHideLastSeenEnabled();

Get Status of the Current User

The below method is used to indicate the active and inactive status in chat API configuration:

To get users’ current status, you need to use the following command:

ProfileStatus myUserStatus = FlyCore.getMyProfileStatus();

Get Busy Status of Current User

To get users the busy status, you need to use the below method:

BusyStatus myBusyStatus = FlyCore.getMyBusyStatus();

User Profile Status

To set the profile status of users, you need to call the below method:

FlyCore.setMyProfileStatus(STATUS_TEXT,(isSuccess, throwable, data) -> {
            if (isSuccess) {
               // Status Set
            } else {

            }
});

Set User Busy Status

To set the busy status for one-to-one chat conversations, you need to call the below method:

FlyCore.setMyBusyStatus(BUSY_STATUS_TEXT);

Enable or Disable Busy Status of Users

When you call the below method, your users will get to enable or disable the busy status in their chat window 

FlyCore.enableDisableBusyStatus(ENABLE_BUSY_STATUS);

Check If The Busy Status Of Users Is Enabled

Users will be able to check if the busy status is enabled or not when you call the below method

boolean isMyBusyStatusEnabled = FlyCore.isBusyStatusEnabled();

Delete User Profile Status

The Status can be deleted by users when you call the below method:

FlyCore.deleteProfileStatus(USER_STATUS);

Delete Busy Status of a User

Users will be able to delete the busy status when the below method is called

FlyCore.deleteBusyStatus(USER_BUSY_STATUS);

Android

Hide/ Show Last Seen Status 

Users will be able to hide their last seen status or show them when the below method is called:

FlyCore.enableDisableHideLastSeen( ENABLE_LAST_SEEN,(isSuccess, throwable, data) -> {

         if (isSuccess) {
            // Last seen status updated successfully
         } else {
            // updation failed print throwable for more info
         }
})

Check Last Seen Status

To enable users to check on the last seen status, the below method has to be called

boolean lastSeenStatus = FlyCore.isLastSeenEnabled();

 iOS

Enable/ Disable Last Seen Status

You need to call the below method to hide/ show the last seen status of the users. 

    ChatManager.shared.enableDisableHideLastSeen( EnableLastSeen: lastSeen) { isSuccess, flyError, flyData in
            var data  = flyData
            if isSuccess {
                print(data.getMessage() as! String )
            } else{
                print(data.getMessage() as! String )
            }
        }

Check the Last Seen Time

To check the timestamp when the user was last online, you need to call the below method:

      ChatManager.shared.getUserLastSeen( for: JID_STRING) { isSuccess, flyError, flyData in
            var data  = flyData
            if isSuccess {
                print(data.getMessage() as! String )
                print(data.getData() as! String )
            } else{
                print(data.getMessage() as! String )
            }
        }

Get The Typing Status of Users

To indicate the typing status of a user when composing a message, you need to call the below method:

GroupManager.shared.sendTyping(groupJid: "xUWD3J4oD10HcaK@mix.xmpp-preprod-abcdef.mirrorfly.com"){ isSuccess, flyError, flyData in
    if isSuccess {
    
    } else{
       
    }
}

Set Gone Status

To stop indicating the typing status of the user, when he/ she has stopped composing a message in the input window of the chat window, you need to call the below method:

GroupManager.shared.sendTypingGone(groupJid: "xUWD3J4oD10HcaK@mix.xmpp-preprod-abcdef.mirrorfly.com"){ isSuccess, flyError, flyData in
    if isSuccess {
    
    } else{
       
    }
}

Web

To get the last-seen time of the users in a web chat conversation, you need to call the below method:

await SDK.getLastSeen(`TO_USER_JID`);

Get recent chat

To get all the list of recent chats in React Native, send a request to the server as described below.

await SDK.getRecentChatsDB();

Response Params

Arguments	Description	Type
statusCode	Status Code	Number
message	Success/Error Message	String
data	Array of Object datas	Array

Response format

{
 "message": "",// String - Success/Error Message 
  "statusCode": "" // Number - status code
  "data": [
    {
      "chatType": "chat",
      "createdAt": "2023-09-06 10:52:46",
      "deleteStatus": 0,
      "fromUserId": "", // String - fromUserId
      "msgBody": {
        "nickName": "",
        "mid": "",// String - user mid
        "message": "",// String - User Text Mesaage
        "message_type": "",// String - User Text Mesaage Type
        "replyTo": "",
        "mentionedUsersIds": ""
      },
      "msgId": "",// String - user msgId
      "msgStatus": 1,
      "msgType": "",// String - msgType
      "muteStatus": 0,
      "publisherId": "",// String - user Number
      "timestamp":"",// number timestamp
      "toUserId": "",
      "unreadCount": 0,
     "userId": "",// String - userId
     "userJid": "",// String - userJid
      "profileDetails": {
        "nickName": "",// String - User Name
        "image": "",// String - image
        "status": "",//String - User status
        "colorCode": "#7b0b88",
        "userId": "",// String - userId
        "userJid": "",// String - userJid
        "email": "",//String - User Email-Id
        "mobileNumber": "",//String - User mobile number
        "isAdminBlocked": 0
      }

    },
    
  ]
}

Conclusion:

There you have it! You have successfully integrated your online presence in the admin portal of your Android chat app using MirrorFly SDKs. With this step done, your users will now be able to see Typing Status and Last Seen time in their chat interfaces.

So what’s next?

MirrorFly’s Chat APIs & SDKs just don’t stop with presence indicators. Here are some of the best resources you can add to your video chat app to build modern conversations:

• User Muting 
• Read Receipts 
• Message receipts and more.

In my next guide, I will walk you through the steps in implementing push notifications in your Chat apps. If you are interested to learn further, we suggest you post your thoughts in the comments section below of what other in-app chat topics should I write next on. Until then, I wish you the best in building your chat app!